聖盃佈局和雙飛翼佈局

時間 2019-12-18

標籤佈局雙飛简体版

原文原文鏈接

1，聖盃佈局：適用：側邊欄寬度固定，內容區寬度隨着瀏覽器窗口寬度改變而改變html

優勢：沒有額外的div，容許任何列是最高的？？（什麼意思??）瀏覽器

2，能夠實現主內容區優先加載，佈局

3，須要hack不多htm

缺點：在寬度縮小時可能會對聖盃佈局發生破壞，所以能夠設置最小寬度：blog

body{it

　　min-width:600px;io

}class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hd{
            height:50px;
            background: #666;
            text-align: center;
        }
        #bd{
            /*左右欄經過添加負的margin放到正確的位置了，此段代碼是爲了擺正中間欄的位置*/
            padding:0 200px 0 180px;
            height:100px;
        }
        #middle{
            float:left;
            width:100%;/*左欄上去到第一行*//*設置寬度自適應*/
            height:100px;
            background:blue;
        }
        #left{
            float:left;
            width:180px;
            height:100px;
            margin-left:-100%;/*負外邊距百分號是至關於#middle的寬度的百分數*/
            background:#0c9;
            /*中間欄的位置擺正以後，左欄的位置也相應右移，經過相對定位的left恢復到正確位置*/
            position:relative;
            left:-180px;/*肯定left的位置信息*/
        }
        #right{
            float:left;
            width:200px;
            height:100px;
            margin-left:-200px;//設置-200px後，right塊會跳上去
            background:#0c9;
            /*中間欄的位置擺正以後，右欄的位置也相應左移，經過相對定位的right恢復到正確位置*/
            position:relative;
            right:-200px;
        }
        #footer{
            height:50px;
            background: #666;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>

</div>
<div id="footer">footer</div>
</body>
</html>

　　筆記：是對於margin-left負外邊距的理解特別當其爲百分數時，這個百分數是相對於誰的??,如何定位？？基礎

二：渲染

雙飛翼佈局：

雙飛翼佈局是在聖盃佈局的基礎上改進的佈局，特色，在聖盃佈局的main（上面的middle）內部添加一個div，取消right和left部分的positon：relative，而同時對於main內部的div元素內添加margin-left和margin-right，給中間內容留下空間，取消bd中的padding，代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 700px;
        }
        #hd{
            height:50px;
            background: #666;
            text-align: center;
        }
        #middle{
            margin-left: 180px;
            margin-right: 200px;
        }
        #bd{
            /*左右欄經過添加負的margin放到正確的位置了，此段代碼是爲了擺正中間欄的位置*/

            height:100px;
        }
        #main{
            float:left;
            width:100%;/*左欄上去到第一行*/
            height:100px;
            background:blue;
        }
        #left{
            float:left;
            width:180px;
            height:100px;
            margin-left:-100%;
            background:#0c9;
            /*中間欄的位置擺正以後，左欄的位置也相應右移，經過相對定位的left恢復到正確位置*/

            
        }
        #right{
            float:left;
            width:200px;
            height:100px;
            margin-left:-200px;
            background:#0c9;
            /*中間欄的位置擺正以後，右欄的位置也相應左移，經過相對定位的right恢復到正確位置*/

            right:-200px;
        }
        #footer{
            height:50px;
            background: #666;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
    <div id="main">
        <div id="middle">middle</div>
    </div>
        <div id="left">left</div>
        <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

　　三：變化，兩欄佈局，側欄寬度固定，主內容區寬度隨窗口大小改變而改變

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .main,.left{
           float: left;
           height: 100px;
       }
        .main{
            width: 100%;
            background-color: red;
        }
        .left{
            width: 200px;
            margin-left: -100%;/*注意，這裏加了百分號就不同了，百分號表示至關於main元素的百分號*/
            background-color: blue;
        }
        .inner{
            margin-left: 200px;/*讓main內元素顯示不會在側欄之下，給側邊欄留出空間來*/
        }      //側欄在右邊的狀況，注意側欄的margin—right  or margin-left根據側欄位置是不一樣的
        .main2,.right{
            float: left;
            height: 100px;
        }
        .main2{
            width: 100%;
            background-color: red;
        }
        .right{
            width: 200px;
            margin-left: -200px;
            background-color: blue;
        }
        .inner2{
            margin-right: 200px ;
        }
    </style>
</head>
<body>
<!--佈局1,側欄在左邊，中間部分能夠調整寬度-->
<div class="main"><!--main元素位於前面，表示優先渲染-->
    <div class="inner">main</div>
</div>
<div class="left">left</div>
<!--佈局二，側欄在右邊，寬度固定-->
<div class="main2">
    <div class="inner2">main</div>
</div>
<div class="right">right</div>
</body>
</html>

相關標籤/搜索

每日一句

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