您的位置：首页 > Web前端

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

2016-06-15 18:23 447 查看

作为纯野生的前端小白，当第一次听到圣杯布局的时候是懵逼的，这是什么布局，简直从来没听过。于是乎搜索引擎搜索一番，狂点开十来个页面，看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>

至此，这个布局就可以实现高度和宽度自适应了！欧耶！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 布局前端

相关文章推荐

新的分享

章节导航