工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下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 圣杯布局 / 双飞翼布局的实现的更多相关文章

  1. CSS(五)圣杯,双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

  2. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  3. CSS 之 圣杯布局&双飞翼布局

    圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...

  4. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 【布局】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...

  6. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  7. css布局-双飞翼布局

    <div class="header">Header</div> <div class="bd"> <div clas ...

  8. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

  9. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

随机推荐

  1. 关于Android适配华为等带有底部虚拟按键的解决方案

    http://blog.csdn.NET/a91694451/article/details/50469857 最近公司的项目里遇到了一个问题,就是最后适配的时候时候同事的华为手机时,由于底部带有虚拟 ...

  2. mac os x 10.9.3 升级到10.10.4 记录

    昨天终于忍不住,将mac pro 的操作系统从 os x 10.9.3 升级到10.10.4,因为网络不给力,500k/s,光系统包都要5.6G,所以整整下来了一个工作白天,等下班的时候开始安装,不过 ...

  3. id为194024的进程当前未运行

    .NET MVC 编译运行时 提示  >> id为194024的进程当前未运行 << 清理解决方案,重新运行

  4. EntityFramework 6.x和EntityFramework Core插入数据探讨

    前言 一直以来对EF和EF Core都是单独分开来写,从未以比较的形式来讲解,如果您既用过EF 6.x也用过用EF Core是否有了解过EF和EF Core在插入数据时和返回主键有何异同呢?本篇博客是 ...

  5. 面向对象的WebAPI框架XXL-HEX

    <面向对象的WebAPI框架XXL-HEX>    一.简介 1.1 概述 XXL-HEX 是一个简单易用的WebAPI框架, 拥有 "面向对象.数据加密.跨语言" 的 ...

  6. Myeclipse使用git

    推荐使用服务器:coding,coding的上传很稳定很快 怎么建仓库: coding 这个服务器呢有个很明显的东西就是太的语言可以是中文的, 点头标签的加号就能进行创建仓库了 点击新建就行了 点击这 ...

  7. python while 循环语句

    Python 编程中 while 语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务.其基本形式为: while 判断条件: 执行语句-- 执行语句可以是单个语句或语句 ...

  8. MySQL分组、链接的使用

    一.深入学习  group by group by ,分组,顾名思义,把数据按什么来分组,每一组都有什么特点. 1.我们先从最简单的开始: select count(*) from tb1 group ...

  9. 命令行备忘录 cli-memo

    前言 有时候想用一个简洁点儿的备忘录,发现没有简洁好用的,于是就想着开发一个,秉着简洁 的思想,所以连界面都没有,只能通过命令行来操作(尽可能的将命令简化).设计的时候 借鉴了git分支的思想,每个备 ...

  10. PAT1040:Longest Symmetric String

    1040. Longest Symmetric String (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, ...