css3佈局篇（雙飛翼）

時間 2019-11-16

標籤 css3 css 佈局雙飛欄目 CSS 简体版

原文原文鏈接

你們看到好多電商網站都見過經典三列布局，它也叫作聖盃佈局，是Kevin Cornell在2006年提出的一個佈局模型概念，這個在國內最先是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有如下的幾點：html

一、三列布局，中間寬度就自適應，目的都是左右兩欄固定寬度；
二、在執行代碼時候，代碼是從上往下執行的。中間欄要在瀏覽器中優先展現渲染。中間每每是你們最關注的點。
三、容許任意列的高度最高；
四、要求只用一個額外的DIV標籤；瀏覽器

參考代碼：ide

<!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

菜鳥一枚佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。