詳解CSS布局之聖杯布局與雙飛翼布局樣本

來源:互聯網
上載者:User
聖杯布局跟雙飛翼布局的實現,目的都是左右兩欄固定寬度,中間部分自適應。接下來通過本文教程給大家介紹CSS布局之聖杯布局與雙飛翼布局,感興趣的朋友一起學習吧

按照我的理解,其實聖杯布局跟雙飛翼布局的實現,目的都是左右兩欄固定寬度,中間部分自適應。
聖杯布局

實現原理
html代碼中,middle部分首先要放在container的最前部分,然後是left,right
1.將三者都設定 float:left, position:relative (因為相對定位後面會用到)
2.middle設定 width:100% 佔滿一行
3.此時middle佔滿一行,所以要把left拉到middle所在行的最左邊,使用 margin-left:-100%
4.這時left拉回到middle所在行的最左邊,但會覆蓋middle內容的左端,要把middle內容拉出來,所以在外圍container加上 padding:0 210px
5.middle內容拉出來了,但left也跟著出來了,所以要還原,就對left使用相對定位 left:-210px
6.同理,right要拉到middle所在行的最右邊,使用 margin-left:-210px,right:-210px
實現代碼

<!DOCTYPE HTML>    <html lang="en-US">    <head>    <meta charset="UTF-8">    <title>聖杯布局</title>    <style type="text/css">    body {    text-align: center;;    } #demo { margin: auto;    } #header, #footer { height: 50px;    background-color: #aaa;    } #container { overflow: hidden;    margin: 10px 0;    padding:0 210px;    } #left { background-color: red;    float:left;    position:relative;    left:-210px;    width:200px;    margin-left:-100%;    } #right { background-color: green;    width: 200px;    margin-left: -200px;    float: left;    right: -210px;    position: relative;    } #middle { background-color: blue;    float:left;    width:100%;    }    </style>    </head>    <body>    <p id="demo">    <header id="header">頭部</header>    <p id="container">    <p id="middle">    middle<br>主內容地區    </p>    <p id="left">    left<br>左側邊欄地區    </p>    <p id="right">    right<br>右側邊欄地區    </p>    </p>    <footer id="footer">底部</footer>    </p>    </body>    </html>

雙飛翼布局

實現原理
html代碼中,middle部分首先要放在container的最前部分,然後是left,right
1.將三者都設定 float:left
2.middle設定 width:100% 佔滿一行
3.此時middle佔滿一行,所以要把left拉到middle所在行的最左邊,使用 margin-left:-100%,同理right使用 margin-left:-200px
4.此時middle的內容被覆蓋,要把middle的內容拉出來,除了使用外圍container的padding,還可以考慮使用margin,給middle增加一個內層p -- middle_content, 然後設定 margin:0 210px
實現代碼

<!DOCTYPE HTML>    <html lang="en-US">    <head>    <meta charset="UTF-8">    <title>雙飛翼布局</title>    <style type="text/css">    body {    text-align: center;;    } #header, #footer { height: 50px;    background-color: #aaa;    } #container { overflow: hidden;    margin: 10px 0;    } #left { background-color: red;    float:left;    width:200px;    margin-left: -100%;    } #right { background-color: green;    width: 200px;    float: left;    margin-left: -200px;    } #middle { float: left;    width: 100%;    } #middle_content { background-color: blue;    margin: 0 210px;    }    </style>    </head>    <body>    <p id="demo">    <header id="header">頭部</header>    <p id="container">    <p id="middle">    <p id="middle_content">    middle_content<br>主內容地區    </p>    </p>    <p id="left">    left<br>左側邊欄地區    </p>    <p id="right">    right<br>右側邊欄地區    </p>    </p>    <footer id="footer">底部</footer>    </p>    </body>    </html>


關於CSS布局之聖杯布局與雙飛翼布局 的相關知識就給大家介紹這麼多,希望對大家有所協助!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.