CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局,
这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了,
就是两边定宽, 中间自适应 的 布局
1 , 圣杯布局
<!--三栏布局-->
<header>三栏布局</header>
<div class="container">
<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<footer>footer</footer>
首先HTML结构是这样的,因为要保证中间的结构先渲染, 所以 center 要放在 最前面 。
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
header , footer{
background-color: antiquewhite;
text-align: center;
}
footer{
clear: both;
}
.container{
height: 200px;
}
.container .column{
float: left;
position: relative;
height: 100%;
}
.center{
width: 100%;
background-color: tomato;
}
.left{
width: 200px;
background-color: aqua;
}
.right{
width: 200px;
background-color: chartreuse;
}
先让它们浮动, 并给left 和 right 一个 固定 宽度, center宽度100%,
footer清除浮动流, 结果变成上面这样 。
然后我们要把 left 和 right 放上去
先把left 放上去 :
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
}
加上 一个 margin-left 为 负的自己的宽度 , 变成了这样:
我们可以看到 center的文字被 left 盖住了 , 所以给container加一个padding
.container{
height: 200px;
padding: 0 200px;
}
变成了这样:
由于加了padding, 内容区域变小, left 也跟过来了, 所以要给left设置一个left:
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
left: -200px;
}
这样left 就到最左边了, center文字也出来了, 同理right
.right{
width: 200px;
background-color: chartreuse;
margin-left: -100%;
right: -100%;
}
最终效果:
2 双飞翼布局(始于淘宝的UED)
和圣杯布局差不多, 不同之处在于它们处理中间部分被两边盖住的方法不同
双飞翼布局给center加了一个inner center ,而不是在最外层加container
HTML:
<header>双飞翼布局</header> <div class="center column">
<div class="inner-center">
center
</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div> <footer>footer</footer>
然后 给 inner-center 加margin (只列出关键代码) :
.center .inner-center{
margin-left: 200px;
margin-right: 200px;
height: 100%;
background-color: tomato;
}
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
}
.right{
width: 200px;
background-color: chartreuse;
margin-left: -200px;
}
最终效果和圣杯布局一样。。。。。。
CSS 圣杯布局 / 双飞翼布局的实现的更多相关文章
- CSS(五)圣杯,双飞翼布局
双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- css布局 -双飞翼布局&圣杯布局
一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 【布局】圣杯布局&双飞翼布局
背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- css布局-双飞翼布局
<div class="header">Header</div> <div class="bd"> <div clas ...
- HTML特殊布局--------双飞翼布局
今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
随机推荐
- No module named zope.interface error的解决
明明安装了 zope.interface,还是出现标题错误,错误语句是 from zope.interface import ooxx 根据 http://stackoverflow.com/ques ...
- Docker快速入门(二)
上篇文章<Docker快速入门(一)>介绍了docker的基本概念和image的相关操作,本篇将进一步介绍image,容器和Dockerfile. 1 image文件 (1)Docker ...
- 基于Python的数据分析(3):文件和时间
在接下来的章节中,我会重点介绍一下我自己写的基于之前做python数据分析的打包接口文件common_lib,可以认为是专用于python的第三方支持库.common_lib目前包括文件操作.时间操作 ...
- Oracle12c中分区(Partition)新特性之TRUNCATEPARTITION和EXCHANGE PARTITION级联功能
TRUNCATE [SUB]PARTITION和EXCHANGE [SUB]PARTITION命令如今可以包括CASCADE子句,从而允许参照分区表向下级联这些操作.为确保该选项正常,相关外键也必须包 ...
- ELK 架构之 Elasticsearch 和 Kibana 安装配置
阅读目录: 1. ELK Stack 简介 2. 环境准备 3. 安装 Elasticsearch 4. 安装 Kibana 5. Kibana 使用 6. Elasticsearch 命令 最近在开 ...
- spring事务机制
一.Java动态代理 1.定义 Java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处理. 默认情况下会采用JDK的动态代理实现AOP . 2. ...
- QT中的相对位置,绝对位置之间的转换(maptoglobal,mapfromglobal)
1. 相对位置:每个Qwidget都能通过pos()获取到相对自己父类窗口的位置, 2. 绝对位置:pWidget->mapToGlobal(QPoint(0,0)) ;将当前控件的相对位置转换 ...
- Cookie与 Session使用详解
Cookie概念 在浏览某些 网站 时,这些网站会把 一些数据存在 客户端 , 用于使用网站 等跟踪用户,实现用户自定义 功能. 是否设置过期时间: 如果不设置 过期时间,则表示这个 Cookie生命 ...
- UISegmentedControl在Swift中的使用
UISegmentedControl控件是分段显示控件,用户可以选择它上展示的任一段部分,每一个部分都像是一个按钮,如果被按下也会像UIButton一样执行相应的方法.在这篇文章中我们将创建一个UIS ...
- SSM-MyBatis-14:Mybatis中智能标签
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 谈论到智能,有什么要想的没有? 我下面放张图 相信都见过这个吧,你在之前没有学习过框架的时候怎么写的,动态sq ...