AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

🍊CSS之圣杯布局及双飞翼布局

2022-12-05 318
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 🍊CSS之圣杯布局及双飞翼布局

1. 圣杯布局

aa86a1000a8f4ba89641620a74c28ef0_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


看，是不是很像一个圣杯，这就圣杯布局的来源啦，这种网页布局很常见呦，每个前端人都应该会哒！


目的


  1. 两侧内容宽度固定，中间内容宽度自适应
  2. 三栏布局，中间一栏最先加载、渲染出来（主要内容）


实现方法


float + margin


1.1 HTML框架


<body>
    <header>头部</header>
    <div class="center">主区域</div>
    <div class="left">左区域</div>
    <div class="right">右区域</div>
    <footer>底部</footer>
</body>
复制代码


注意：因为主区域的内容需要优先加载，故主区域div标签放在其他div标签的前面。


1.2 CSS部分


首先给每个标签添加颜色和高度


<style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #ffb3a7;
        }
        .center {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #ff2121;
        }
        .left {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #a1afc9;
        }
        .right {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #00bc12;
        }
        footer {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #ffb3a7;
        }
    </style>
复制代码


先看看网页效果


f51b2c65ef604ccabc30c9024d7c54db_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


接下来我们需要让主区域，左区域和右区域在一行显示，怎么做呢？


添加浮动


.center,
        .left,
        .right {
            float: left;
        }
复制代码


2e6443fbb2d64881803456256af01aba_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


我们发现底部也跑上来凑热闹了，这是因为浮动产生了塌陷，怎么做呢？


清除浮动


第一步，用一个标签包裹主区域，左区域和右区域标签


c72f8e9b3e5148e5864fbbeff1c45b8e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


第二步，添加清除浮动代码


.clearfix::after {
            content: "";
            display: block;
            clear: both
        }
复制代码


看看效果如何


3e4c3912b50d4d2d9849976219123ab3_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


好啦，现在底部div标签已经在正常的位置了。


接下来需要让主区域div标签在中间显示，怎么做呢？


.clearfix {
            padding: 0 100px;// 内边距必须要加
        }
        .left {
            width: 100px;
            margin-left: -100%;// 这里-100%是重点
        }
        .right {
            width: 100px;
            margin-left: -100px;
        }
        .center {
            width: 100%;
        }
复制代码


看一下效果


d1b054a4af09489681bc7de5a2f0135e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


貌似达到效果了，但其实不然，我们这里的左区域和右区域是覆盖在主区域上的，因此我们需要在左区域和右区域上加定位！


127f3aa08b7a4fd380f530f9fd43e8fd_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


好啦，大功告成！看看效果！


image.png


2. 双飞翼布局


接下来就是双飞翼布局，其实双飞翼布局和圣杯布局是同一种布局，只是所有实现的方法不同而已


2.1 HTML框架


<header>头部</header>
    <div class="wrapper">
        <div class="center">主区域</div>
    </div>
    <div class="left">左区域</div>
    <div class="right">右区域</div>
    <footer>底部</footer>
复制代码


和圣杯布局不同的地方在于我们的主区域必须用一个标签包裹


2.2 CSS部分


首先给每个标签添加颜色和高度


* {
            margin: 0;
            padding: 0;
        }
        header {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #ff7500;
        }
        footer {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #ff7500;
        }
        .center {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #ff2121;
        }
        .left {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #a1afc9;
        }
        .right {
            text-align: center;
            line-height: 60px;
            height: 60px;
            background-color: #00bc12;
        }
    </style>
复制代码


先看看网页效果


10fa61c3d27344898ceaad6da6aca436_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


添加浮动，给谁加？


给.wrapper,.left,.right 加，然后给footer标签清除浮动


83f1145401cc4134b19e29264f405928_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


接下来很重要的步骤来了给.wrapper标签设置宽度为100%，给.center标签外边距

margin


6efd025913ec410db38387c762b8756c_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


看一下效果


1ad28610db74455597a147d5e4c93623_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

后面的步骤so easy的啦，和圣杯布局一样


.left {
            margin-left: -100%;
        }
        .right {
            margin-left: -100px;
        }
复制代码


大功告成，看看效果！


image.png


总结：


  • 相比较而言圣杯布局的HTML结构更直观一点
  • 圣杯布局需要用到相对定位，双飞翼布局无需定位
  • 圣杯布局代码量相对来说多一些，但是在只需要一个标签包裹的情况下，圣杯布局清除浮动的方法多一些，副作用会少一些。
文章标签：
前端开发
关键词：
CSS布局
CSS圣杯布局双飞翼布局
CSS双飞翼布局
CSS圣杯布局
CSS布局双飞翼布局
sexpxwwacjcpq
目录
相关文章
杀死一只知更鸟debug
|
6天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。
杀死一只知更鸟debug
17 2
杀死一只知更鸟debug
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
22 0
石小石Orz
|
2月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局？
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局？
石小石Orz
42 3
技术混子
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。
技术混子
41 3
土木林森
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统，打造未来网页设计！
【8月更文挑战第25天】在网页设计领域，布局至关重要。传统的布局方法难以满足复杂需求，CSS Grid 栅格系统因此诞生。它是一种二维布局模式，能直接控制行和列，简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器，并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸，轻松实现响应式布局。此外，CSS Grid 支持高级功能，如网格区域划分和对齐设置，极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强，CSS Grid 必将成为未来网页设计的关键技术之一。
土木林森
52 1
白如意i
|
2月前
|
前端开发
CSS Grid 布局：span 关键字
CSS Grid 布局：span 关键字
白如意i
40 0
刘志辉~
|
2月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
刘志辉~
37 0
游客fz577umxdejsg
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
43 2
游客fz577umxdejsg
|
2月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
60 2
程序员皮皮林
|
5天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面，包含一个水滴形状的登录框与两个按钮（忘记密码和注册）。登录框包括用户名、密码输入框及登录按钮。页面设计独特，采用渐变色与动态效果，增强了交互性和视觉美感。以下为关键实现步骤： - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式，包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式，并添加悬停效果。
程序员皮皮林
15 1