17.2.頁面布局應用 · HTML+CSS學習筆記

## 17.2.1.布局思想表格布局思想：使用表格，將頁面分割為若干區域：縱向：就用表格的tr。橫向：就用表格的td實現。層層分割：每個區塊只考慮是“橫向”還是“縱向”。表格布局思想，被拋棄的原因是：網頁展示速度慢！非常慢！ div+浮動布局思想：縱向：使用div，自然上下排列出來。橫向：使用浮動div，并做好清除浮動工作（使浮動元素不影響后續元素）。層層分割：每個區塊只考慮是“橫向”還是“縱向”。典型布局效果： ![](https://img.kancloud.cn/a3/b1/a3b1c920abc4d58bc91d05306223d856_751x310.png) 課堂練習：實現如下所示經典固定寬度布局，要求如下： 1，總寬度960px。 2，邊框線1px； 3，所有線跟線之間的間隙都是5px 4，主體區域左右兩個盒子的間隙是10px。 5，使用到h5中的新語義標簽（header，nav，footer，aside，main等）。 6，擴展練習：加一個導航條在頭部區域下面，加幾個鏈接。 ## 17.2.2.縱向布局的實現若干div自然就實現的縱向布局（自然從上到下排列出來） ![](https://img.kancloud.cn/05/71/0571962867b4a058791e41edddc9b36a_565x135.png) ## 17.2.3.橫向布局的實現若干div使用浮動，就橫過來了。注意清除浮動以使外層盒子有正常的高度（包住內層浮動盒子，并避免影響后續內容）。 ![](https://img.kancloud.cn/6e/7f/6e7f8f30ad692c3344e8e99bb35587bd_730x155.png) ## 17.2.4.整體布局的實現非常簡單，就是“層層分割”： 1，確定當下要進行布局設計的區域范圍（毫無疑問是矩形盒子，而且最初肯定是整個網頁區域）； 2，確定該區域按縱向布局還是橫向布局，依此進行盒子樣式設計； 3，對第2步中分割出來的“小區域”，繼續用第2步的思路進行布局設計，以此類推，層層細分。 ## 17.2.5.經典圣杯布局所謂經典圣杯布局（不知道誰取的這個名字），就是一個網頁最常見的布局需求，大致如下所示： ![](https://img.kancloud.cn/46/7e/467e5a73202e46fa61ee0075a6815e98_894x248.png) 其中主要的布局實現其實是中間部分。中間部分也可能是2欄（或左或右）。兩邊的寬度是固定的，中間主體部分的寬度可以是固定的，也可以是可變的（根據需要而定）。案例1：實現網頁兩欄典型布局效果。其中左邊側欄寬度固定（200px），右邊主體欄寬度可變（最小600px）。 ![](https://img.kancloud.cn/68/fa/68fa3a98c04b9a4222ab46c89427456c_814x119.png) 方法1：代碼如下： ``` <div class="box"> <aside>邊欄</aside> <main> <div class="main"> 主體主體主體主體</div> </div> </main> </div> <style> .mainpage{ border:1px solid red; margin:0 auto; width:90%; min-width: 800px; } .box{ border:1px solid red; margin:5px; } .box::after{ content:""; display:block; clear:both; } .box>aside{ background: yellow; width:200px; float:left; } .box>main{ margin-left:210px; } .box>main>.main{ border:solid 1px blue; background: pink; } </style> ``` 方法2； ``` <style> .mainpage{ border:1px solid red; margin:0 auto; width:90%; min-width: 800px; } .box{ border:1px solid red; margin:5px; } .box::after{ content:""; display:block; clear:both; } .box>aside{ background: yellow; width:200px; float:left; margin-left:-100%; } .box>main{ float:left; width:100%; height:40px; background: orange; } .box>main>.main{ margin-left:210px; border:solid 4px blue; background: pink; } </style> </head> <body> <div class="mainpage"> <header>頭部</header> <div class="box"> <main> <div class="main"> 主體主體主體主體主體主體主體 </div> </main> <aside>邊欄<br><br></aside> </div> <footer>底部</footer> </div> ``` 案例2：實現網頁三欄典型布局效果。其中左邊和右邊側欄寬度固定（均為200px），中間主體欄寬度可變（最小400px）。方法1：代碼如下： ``` <style> .mainpage{ border:1px solid red; margin:0 auto; width:90%; min-width: 800px; } .box{ border:solid 1px blue; } .box:after{ content:""; display: block; clear:both; } .box>.side_left{ width:200px; background: yellow; float:left; } .box>.side_right{ width:200px; background: yellow; float:right; } .box>main{ margin-left:210px; margin-right:210px; background: gray; } </style> </head> <body> <div class="mainpage"> <header>頭部</header> <div class="box"> <aside class="side_left">左邊欄<br><br></aside> <aside class="side_right">右邊欄<br><br></aside> <main> <div class="main"> 主體主體主體主體主體主體主體 </div> </main> </div> <footer>底部</footer> ``` 方法1： ``` <style> .mainpage{ border:1px solid red; margin:0 auto; width:90%; min-width: 800px; } .box{ border:solid 1px blue; } .box:after{ content:""; display: block; clear:both; } .box>main{ float:left; width:100%; } .box>main>.main{ background: gray; margin-left:210px; margin-right:210px; } .box>.side_left{ width:200px; background: yellow; float:left; margin-left:-100%; } .box>.side_right{ width:200px; background: yellow; float:right; margin-left:-10px; } </style> </head> <body> <div class="mainpage"> <header>頭部</header> <div class="box"> <main> <div class="main"> 主體主體主體主體主體主體主體 </div> </main> <aside class="side_left">左邊欄<br><br></aside> <aside class="side_right">右邊欄<br><br></aside> </div> <footer>底部</footer> </div> ```