css3布局篇（双飞翼）
生活随笔
收集整理的這篇文章主要介紹了
css3布局篇（双飞翼）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
大家看到好多電商網站都見過經典三列布局，它也叫做圣杯布局 ，是Kevin Cornell在2006年提出的一個布局模型概念，這個在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有以下的幾點：
1、三列布局，中間寬度就自適應，目的都是左右兩欄固定寬度；?
2、在執行代碼時候，代碼是從上往下執行的。中間欄要在瀏覽器中優先展示渲染。中間往往是大家最關注的點。?
3、允許任意列的高度最高；
4、要求只用一個額外的DIV標簽；?
參考代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>雙飛翼或圣杯布局</title><style>*{margin: 0;padding: 0;}#continate{font:18px/30px "微軟雅黑"; /*第一個是字體大小 第二 是字體行高 第三 字體**/}/**全局定義三個div高度*/#conter,#left,#right{height: 300px;float: left;}#conter{background: sandybrown;width: 100%;}#left{background: lightblue;width: 30%;margin-left: -100%; /*往上100%就是回到最開始哪里*/}#right{background: cyan;width: 20%;margin-left: -20%;/*往上100%就是回到最開始哪里*/}header,footer{height: 100px;line-height: 100px;text-align: center;background: salmon;clear: both;/*清除浮動，要不然里面的div無法進入 因為里面沒有指定height*/}#yingca{padding: 0 20% 0 30%;/*去掉左右的距離，把隱藏的內容顯示出來**/}/*示例中增加一個#yingca的目的是因為當left上移時與center重疊了，left覆蓋了center，通過yingca的padding將left占用的位置空出。* */</style></head><body><header>one</header><div id="continate"><div id="one"><div id="conter"><div id="yingca">conter</div></div><div id="left">left</div><div id="right">right</div></div></div><footer>footer</footer></body> </html> View Code菜鳥一枚
?
轉載于:https://www.cnblogs.com/LCH-M/p/9336624.html
總結
以上是生活随笔為你收集整理的css3布局篇（双飞翼）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： P3195 [HNOI2008]玩具装箱
- 下一篇： 10-18考试记