CSS中關於常見布局的使用總結

1.一列布局——常用於網站首頁。

html：

1 <div class="top"></div>2 <div class="main"></div>3 <div class='foot'></div>

css：

body{            margin:0;            padding: 0;        }        .top{            height: 80px;            background-color: #f19b6a;        }        .main,.foot{            width: 800px;            margin:0 auto;        }        .main{                height: 500px;                background-color: #f1b8e4;        }        .foot{            height: 80px;            background-color: #f1f1b8;        }

效果：

2.兩列(固定寬度)，調適型配置

html：

1 <p class="main">2 <p class="left"></p>3 <p class="right"></p>4 </p>

css：

body{           margin:0;           padding: 0;       }       .main{           width: 800px;           margin: 0 auto;       }       .left,.right{           height: 600px;       }       .left{           width: 20%;           float: left;           background-color:#f19b6a;       }       .right{           width: 80%;           float: right;           background-color: #f1b8e4;       }

：

3.三列(固定寬度)，調適型配置

HTML：

1 <p class="main">2     <p class="left"></p>3     <p class="middle"></p>4     <p class="right"></p>5 </p>

css：

body{           margin:0;           padding: 0;       }       .main{           width: 800px;           margin: 0 auto;       }       .left,.right,.middle{           height: 600px;       }       .left{           width: 33.3%;           float: left;           background-color:#f19b6a;       }       .middle{           width: 33.3%;           float: left;           background-color:#f1f1b8;       }       .right{           width: 33.3%;           float: right;           background-color: #f1b8e4;       }

：

4.三列布局，中間自適應，兩邊固定寬度：position:absolute;

HTML：

1 <p class="left"></p>2     <p class="middle">3     區塊鏈是分布式資料存放區、點對點傳輸、共識機制、密碼編譯演算法等電腦技術的 新型應用模式。所謂共識機制是區塊鏈系統中實現不同節點之間建立信任、擷取權益的數學演算法[1]  。2016年5月，貨幣區塊鏈研究中心出版了國內第一本深入淺出介紹區塊鏈的書籍《區塊鏈：定義未來金融與經濟新格局》。其中介紹了區塊鏈技術對未來金融與經濟帶來的影響。區塊鏈（Blockchain）是比特幣的一個重要概念，火幣聯合清華大學五道口金融學院互連網金融實驗室、新浪科技發布的《2014—2016全球比特幣發展研究報告》提到區塊鏈是比特幣的底層技術和基礎架構[2]  。本質上是一個去中心化的資料庫，同時作為比特幣的底層技術。區塊鏈是一串使用密碼學方法相關聯產生的資料區塊，每一個資料區塊中包含了一次比特幣網路交易的資訊，用於驗證其資訊的有效性（防偽）和產生下一個區塊。4     </p>5 <p class="right"></p>

css:

body{           margin:0;           padding: 0;       }       .left,.right,.middle{           height: 600px;       }       .left{           width: 200px;         position:absolute;         left: 0;         top:0;           background-color:#f19b6a;       }       .middle{           margin: 0 310px 0 210px;           background-color:#f1f1b8;       }       .right{           width: 300px;           position: absolute;           right: 0;           top:0;           background-color: #f1b8e4;       }

：

5.混合布局

html：

 1 <p class="top">  2     <p class="header"></p>  3 </p>  4 <p class="main">  5     <p class="left"></p>  6     <p class="right">  7         <p class="sub_left"></p>  8         <p class="sub_right"></p>  9     </p> 10 </p> 11 <p class='foot'></p>

css：

body{            margin:0;            padding: 0;        }        .top{            height: 80px;            background-color: #f19b6a;        }        .top .header{            width: 800px;            height: 80px;            margin: 0 auto;            background-color: #e27386;        }        .main,.foot{            width: 800px;            margin:0 auto;        }        .main{                height: 600px;                background-color: #f1b8e4;        }        .foot{            height: 80px;            background-color: #f1f1b8;        }         .main .left{            width: 200px;            height: 600px;            float: left;            background-color: #dcff93;         }         .main .right{             width: 590px;/*600px沒有粉紅色縫隙*/             height: 600px;             float:right;             background-color: #b8f1cc;         }         .sub_left{             width: 200px;             height: 600px;             float: left;             background-color: #f2debd;         }         .sub_right{             width: 380px;/*390px沒有中間綠色縫隙*/             height: 600px;             float: right;             background-color: #c86f67;         }

：