CSS常見布局，css布局

CSS常見布局，css布局

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

html：

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

css：

 1 body{ 2             margin:0; 3             padding: 0; 4         } 5         .top{ 6             height: 80px; 7             background-color: #f19b6a; 8         } 9         .main,.foot{10             width: 800px;11             margin:0 auto;12         }13         .main{    14             height: 500px;    15             background-color: #f1b8e4;16         }17         .foot{18             height: 80px;19             background-color: #f1f1b8;20         }

效果：

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

html：

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

css：

 1 body{ 2            margin:0; 3            padding: 0; 4        } 5        .main{ 6            width: 800px; 7            margin: 0 auto; 8        } 9        .left,.right{10            height: 600px;11        }12        .left{13            width: 20%;14            float: left;15            background-color:#f19b6a;16        }17        .right{18            width: 80%;19            float: right;20            background-color: #f1b8e4;21        }

：

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

HTML：

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

css：

 1 body{ 2            margin:0; 3            padding: 0; 4        } 5        .main{ 6            width: 800px; 7            margin: 0 auto; 8        } 9        .left,.right,.middle{10            height: 600px;11        }12        .left{13            width: 33.3%;14            float: left;15            background-color:#f19b6a;16        }17        .middle{18            width: 33.3%;19            float: left;20            background-color:#f1f1b8;21        }22        .right{23            width: 33.3%;24            float: right;25            background-color: #f1b8e4;26        }

：

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

HTML：

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

css:

 1  body{ 2            margin:0; 3            padding: 0; 4        } 5        .left,.right,.middle{ 6            height: 600px; 7        } 8        .left{ 9            width: 200px;10          position:absolute;11          left: 0;12          top:0;13            background-color:#f19b6a;14        }15        .middle{16            margin: 0 310px 0 210px;17            background-color:#f1f1b8;18        }19        .right{20            width: 300px;21            position: absolute;22            right: 0;23            top:0;24            background-color: #f1b8e4;25        }

：

5.混合布局

html：

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

css：

 1 body{ 2             margin:0; 3             padding: 0; 4         } 5         .top{ 6             height: 80px; 7             background-color: #f19b6a; 8         } 9         .top .header{10             width: 800px;11             height: 80px;12             margin: 0 auto;13             background-color: #e27386;14         }15         .main,.foot{16             width: 800px;17             margin:0 auto;18         }19         .main{    20             height: 600px;    21             background-color: #f1b8e4;22         }23         .foot{24             height: 80px;25             background-color: #f1f1b8;26         } 27         .main .left{28             width: 200px;29             height: 600px;30             float: left;31             background-color: #dcff93;32 33          }34          .main .right{35              width: 590px;/*600px沒有粉紅色縫隙*/36              height: 600px;37              float:right;38              background-color: #b8f1cc;39          }40          .sub_left{41              width: 200px;42              height: 600px;43              float: left;44              background-color: #f2debd;45          }46          .sub_right{47              width: 380px;/*390px沒有中間綠色縫隙*/48              height: 600px;49              float: right;50              background-color: #c86f67;51          }

：