圣杯布局&双飞翼布局认识

最新推荐文章于 2023-06-25 10:40:25 发布

前端向朔

最新推荐文章于 2023-06-25 10:40:25 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签：布局前端

本文链接：https://blog.csdn.net/u013778905/article/details/51684395

HTML/CSS 同时被 2 个专栏收录

32 篇文章

订阅专栏

总结

30 篇文章

订阅专栏

作为纯野生的前端小白，当第一次听到圣杯布局的时候是懵逼的，这是什么布局，简直从来没听过。于是乎搜索引擎搜索一番，狂点开十来个页面，看demo，看评论，动手实践demo，最后。。。“圣杯布局从听过到看过”Duang！！！

先贴出我看的文章：
1.这篇思路清晰，一看就清楚了。
http://www.cnblogs.com/imwtr/p/4441741.html

2.这篇是最好的实践，把常用的圣杯布局写在一个DEMO。关键是人家的摘要一句话就把圣杯布局解释清楚了好吗。

【摘要】：经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin> Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句。

http://my.oschina.net/jsan/blog/368543

3.饮水思源，圣杯布局的来历是2006年发在a list part上的这篇文章：
http://alistapart.com/article/holygrail

4.如果你实在是看不懂英文的话，这里有一篇简单的不能再简单的翻译（除去代码相当于没翻译555…..）
http://chen106106.iteye.com/blog/1631865

5.详细的对比解释（慕课网-猿问）
http://www.imooc.com/wenda/detail/254035

6.学习视频（极客学院）
http://www.jikexueyuan.com/course/981.html

好了，最后到这里你应该知道什么叫圣杯布局或者双飞翼布局了，你也从听过到看过了。想要实践的话，我们一起完成这个demo吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局&双飞翼布局</title>
    <style>
        body{
            background-color: white;
            text-align: center;
            font-size: 16px;
            margin: 0;
        }
        #head,#footer{
            background-color: #cccccc;
            padding: 20px 0;
            clear: both;
        }
        #container{
            padding: 0 150px 0 200px;
            overflow: hidden;
            min-width: 450px;
        }
        .column{
            float: left;
            min-height: 200px;
            position: relative;
        }
        #center{
            width: 100%;
            background-color: #4cae4c;
            overflow: visible;
        }
        #left{
            width: 200px;
            background-color: #6b9cde;
            margin-left: -100%;
            left: -200px;
        }
        #right{
            width: 150px;
            background-color: #a8acaf;
            margin-left: -150px;
            right: -150px;
        }
    </style>
</head>
<body>
<div id="head">头部</div>
<div id="container">
    <div id="center" class="column">主内容栏自适应宽度</div>
    <div id="left" class="column">侧栏固定宽度1</div>
    <div id="right" class="column">侧栏固定宽度2</div>
</div>
<div id="footer">底部</div>
</body>
</html>