【面试题】圣杯布局和双飞翼布局

news2025/8/2 7:18:26

圣杯布局和双飞翼布局的特点:

  • 三栏布局,中间一栏最先加载和渲染(内容最重要)
  • 两侧内容固定,中间内容随着宽度自适应
  • 一般用于PC页面

圣杯布局和双飞翼布局的实现方式:

  • 使用float布局
  • 两侧使用margin负值,以便和中间内容横向重叠
  • 为了防止中间内容被两侧覆盖,圣杯布局用padding留出空间,双飞翼布局使用margin

1. 圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style type="text/css">
        body{
            min-width: 550px;
        }
        #header{
            text-align: center;
            background-color: #f1f1f1;
        }
        #center{
            background-color: #ccc;
            width: 100%;
        }
        #left{
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right{
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }
        #footer{
            text-align: center;
            background-color: #f1f1f1;
            clear: both;
        }

        #container .column{
            float: left;
        }

        #container{
            padding-left: 200px;
            padding-right: 150px;
        }
    </style>
</head>
<body>
    <div id = "header">this is header</div>
    <div id = "container">
        <div id = "center" class="column">this is center</div>
        <div id = "left" class="column">this is left</div>
        <div id = "right" class="column">this is right</div>
    </div>
    <div id = "footer">this is footer</div>
</body>
</html>

效果
在这里插入图片描述

2. 双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        body{
            min-width: 550px;
        }
        .col{
            float: left;
        }
        #main{
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap{
            margin: 0 190px 0 190px
        }
        #left{
            width: 190px;
            height: 200px;
            background-color: #0000ff;
            margin-left: -100%;
        }
        #right{
            width: 190px;
            height: 200px;
            background-color: #ff0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id = "main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

效果
在这里插入图片描述

3. 手写clear fix

clearfix可以用于清除浮动,加在浮动的元素上

.clearfix:after{
	content: '';
	display: table;
	clear: both;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/16122.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

git 、gitLub 提交后查看显示全部删除又全部新增

问题&#xff1a; git提交后删除的行数与增加的行数一样&#xff0c;没有修改git也会去全部删除又全部新增 大概是下面你这个样子&#xff1a; 原因&#xff1a; 换行符的原因&#xff0c;win、mac、linux/Unix 换行符是不一样的&#xff0c;提交的文件换行符和git服务器的不…

【Unity300个技巧】牛顿的学问!如何优雅地使用力?

Unity 提供了一个完备且强大物理引擎。但在刚接触的时候&#xff0c;你可能会对它与现实物理规律对应有一些疑惑。 比如&#xff1a; 现实中 1N 的力在 Unity 中怎么表现&#xff1f;Unity 中物体的质量是计算的&#xff1f;Unity 中给物体添加力的方法是 rb.AddForce()&#x…

ICME 论文Latex模版要求

2023年模版获取链接&#xff1a; 链接: https://pan.baidu.com/s/1Hjk4nnybQN6LE23SGfbxKQ 提取码: 27dj --来自百度网盘超级会员v4的分享 论文写作要求&#xff1a; 所有手稿必须是英文的&#xff1b; 论文长度不应超过6页&#xff0c;包括所有文本、图形和参考文献&#…

Qt 设置CPU亲缘性,把进程和线程绑定到CPU核心上(Linux)

Qt 设置CPU亲缘性&#xff0c;把进程和线程绑定到CPU核心上(Linux) 文章目录Qt 设置CPU亲缘性&#xff0c;把进程和线程绑定到CPU核心上(Linux)摘要1 什么是CPU亲缘性2 目的3 API 介绍3.1 进程绑定到CPU3.2 线程绑定到CPU4 实际操作4.1 实操代码主进程串口线程USB线程程序运行资…

iOS开发M1芯片遇到的问题

pod失败执行&#xff1a; sudo arch -x86_64 gem install ffi Then arch -x86_64 pod install M1芯片的Mac无法在模拟器上运行项目building for iOS Simulator或could not find module for target.. 真机上可运行&#xff0c;模拟器上不行&#xff0c;并出现以下错误&#xf…

高级UI之贝塞尔曲线

前言 相信很多同学都知道“贝塞尔曲线”这个词&#xff0c;我们在很多地方都能经常看到。但是&#xff0c;可能并不是每位同学都清楚地知道&#xff0c;到底什么是“贝塞尔曲线”&#xff0c;又是什么特点让它有这么高的知名度。 贝塞尔曲线的数学基础是早在 1912 年就广为人…

八款流行无线黑客工具,非常实用

1、Aircrack Aircrack是最受欢迎的无线密码破解工具之一&#xff0c;可用于802.11a / b / g WEP和WPA破解。Aircrack使用的算法是通过捕获数据包来恢复无线密码。收集到足够的数据包后&#xff0c;它会尝试恢复密码。为了使攻击更快&#xff0c;它通过一些优化实现标准的FMS攻…

腾格尔和黑鸭子,演唱《遥远的地方》不同版本,哪首歌更值得期待

说起中国华语乐坛的音乐人&#xff0c;腾格尔老师算比较出名的一位&#xff0c;听说最近他又推出了一首新歌。《遥远的地方》这首歌曲&#xff0c;就是腾格尔老师的新歌&#xff0c;可能很多人会对这个歌名感到有些熟悉。 早在九十年代的时候&#xff0c;中国华语乐坛非常流行组…

【雷神笔记本快捷键】雷神笔记本FN功能快捷键大全以及电脑CPU处于低功耗但电脑风扇高速转动噪音较大解决方案

雷神笔记本FN功能快捷键大全以及电脑CPU处于低功耗但电脑风扇高速转动噪音较大解决方案。 本计算机有16个功能键盘。这些键的功能因应用程序而异。 请参阅软件文档以了解各个键的使用方法。 【FN】键提供便携式电脑的扩展功能,始终与另一按键搭配使用。‘【FNEsc】:启用或禁用…

教你如何使用 Visual Studio IDE 正确的进行 C++ 桌面开发

目录 先决条件 入门 一、演练&#xff1a;使用项目和解决方案 (C) 准备工作 创建项目 在 Visual Studio 中创建项目 组织项目和文件 向项目添加类 向主函数添加测试代码 向项目添加测试代码 生成并运行应用项目 生成并运行此项目 二、演练&#xff1a;生成项目 (C…

改良海量数据存储的若干的手段-转变数据垃圾为黄金

教材篇 直到翻看了后面章节&#xff0c;才注意到封面上面的标语&#xff0c;中文意思是“禁止倾倒数据垃圾&#xff0c;违者务必读此书&#xff01;” 大致祖师爷对杂乱无序的数据垃圾深恶痛绝&#xff0c;在这点上大凡上了点年头的数据工作者都是深有体会~ 直到翻看了后面章…

三相和单相智能微型断路器功能有区别吗?

安科瑞 华楠 ASCB1系列智能微型断路器是安科瑞电气股份有限公司全新推出的智慧用电产品&#xff0c;产品由智能微型断路器与智能网关两部分组成&#xff0c;可用于对用电线路的关键电气因素&#xff0c;如电压、电流、功率、温度、漏电、能耗等进行实时监测&#xff0c;具有远程…

渗透测试与漏洞扫描的区别

企业通常将漏洞扫描视为渗透测试的替代方法。这种认识是错误的。具有网络安全意识的组织必须在其业务流程中包括这两项活动&#xff0c;并确保它们协同工作。错过其中之一会大大降低 Web 应用程序安全性和网络安全性的安全状况。渗透测试和漏洞扫描也被单独视为合规性要求&…

【TFS-CLUB社区 第6期赠书活动】〖uni-app跨平台开发与应用从入门到实践〗等你来拿,参与评论,即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》 内…

Redis事务操作

Redis事务操作 每个公司每个项目可能有不同的引入方式&#xff0c;但是最基本的都大差不差&#xff0c;所以这里只展示最基本的。 redis事务定义 redis事务是一个单独的隔离操作&#xff0c;事务中的所有命令都会序列化、按顺序地执行&#xff0c;事务在执行的过程中&#x…

Rancher - v2.6.5升级v2.7.0

Rancher&#x1f449;v2.6.5升级v2.7.0 时间&#xff1a;2022年11月18日16:37:50 2022-11-17凌晨&#xff0c;rancher推出了新的稳定版&#xff1a;v2.7.0。 一、为什么要升级到v2.7.0&#xff1f;v2.6.5有什么严重的问题吗&#xff1f; ● 对于私有云来说&#xff0c;一般生…

C51项目 - 可调万年历

目录一、实验目的二、实验仪器三、实验效果预览1.显示效果2.调节效果四、实验原理五、单片机代码1.头文件包含2.类型定义3.时钟模块4. 液晶显示模块5.温度传感器模块6. 红外通讯模块7.开机初始化8.特殊功能函数9.代码段常量10.完整代码一、实验目的 使用51单片机作为主控芯片&…

Hybrid app混合开发的一些经验和总结

随着5G技术的发展和移动终端普及&#xff0c;移动设备的便捷性和网络的泛在化&#xff0c;移动应用已广泛应用于电子商务、电子政务、医疗和辅助教学中。 智能手机等移动终端的存储、运算能力不断增强&#xff0c;但其显示、输入等不如PC灵活&#xff0c;对操作界面灵活性有强…

Redis 搭建高可用集群

、单个redis服务搭建请参考&#xff1a;redis服务搭建 2、在/usr/local下创建目录redis-cluster,并在redis-cluster下创建 6379、6380、6381目录以及data、temp目录 # cd /usr/local # mkdir redis-cluster --其他文件创建类似&#xff0c;此处不一一写出 3、复制安装后的re…

[笔记]快乐的Linux命令行《二》文件系统中跳转

系列文章目录 [笔记]快乐的Linux命令行《一》LInux系统简介以及什么是shell [笔记]快乐的Linux命令行《二》文件系统中跳转 文章目录系列文章目录前言一、文件系统中跳转1.1 理解文件系统树Linux基本文件系统树目录介绍与Windows的异同1.2 当前工作目录pwd 显示当前工作目录1.…