網頁布局基礎教程
網頁的布局有很多種方式，一般分為以下幾個部分：
頭部區域部分菜單導航區域部分內容區域部分底部區域部分
一般網頁的布局
網頁頭部區域部分
頭部區域部分位於整個網頁的頂部，一般用於設置網頁的標題或者網頁的圖標：
實例如下：
代碼1
效果1
代碼2
效果2
部分代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS網頁布局教程</title> <style> body { margin: 0; } /* 頭部樣式 */ .header { background-color:darkslategrey; padding: 25px; text-align: center; } h1 { color: aliceblue; } </style></head><body><div> <h1>頭部區域部分</h1></div></body></html>菜單導航區域
菜單導航條包含了一些連結，可以引導用戶瀏覽其他頁面：
代碼1
代碼1
效果
實現代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 網頁布局 </title> <style> * { box-sizing: border-box; } body { margin: 0; } /* 頭部樣式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 導航條 */ .topnav { overflow: hidden; background-color:midnightblue; } /* 導航連結 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 連結 - 修改顏色 */ .topnav a:hover { background-color: #ddd; color: black; } </style></head><body><div> <h1>頭部區域</h1></div><div> <a href="#">導航連結</a> <a href="#">導航連結</a> <a href="#">導航連結</a></div></body></html>內容區域
內容區域一般形式（根據屏幕解析度和舒適的視覺體驗）:
1 例：用於移動端2 例：用於平板設備3 例：用於 PC 桌面設備
內容區域一般形式
創建一個響應式布局PC和以設備有不一樣的布局，如下：
部分代碼
PC 換顯示
移送設備顯示
IPad顯示
實現代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 網頁布局(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; } /* 頭部樣式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 導航條 */ .topnav { overflow: hidden; background-color: #333; } /* 導航連結 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 連結 - 修改顏色 */ .topnav a:hover { background-color: #ddd; color: black; } /* 創建三個不相等的列 */ .column { float: left; padding: 10px; } /* 左右兩側寬度 */ .column.side { width: 25%; } /* 中間區域寬度 */ .column.middle { width: 50%; } /* 列後面清除浮動 */ .row:after { content: ""; display: table; clear: both; } /* 響應式布局 - 寬度小於600px時設置上下布局 */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } } </style></head><body><div> <h1>頭部區域</h1> <p>重置瀏覽器大小查看效果。</p></div><div> <a href="#">連結</a> <a href="#">連結</a> <a href="#">連結</a></div><div> <div> <h2>左側欄</h2> <p>網頁布局教程 - 網頁布局教程</p> </div> <div> <h2>主區域內容</h2> <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p> <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p> </div> <div> <h2>右側欄</h2> <p>網頁布局教程 - 網頁布局教程</p> </div></div></body></html>底部區域部門
底部區域部分在網頁的最下方，一般包含版權資訊，爬蟲信息和聯繫方式等。
HTML代碼
CSS代碼
效果
實例代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 網頁布局 </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; } /* 頭部樣式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 導航條 */ .topnav { overflow: hidden; background-color: #333; } /* 導航連結 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 連結 - 修改顏色 */ .topnav a:hover { background-color: #ddd; color: black; } /* 創建三個相等的列 */ .column { float: left; padding: 10px; } /* 左右兩側寬度 */ .column.side { width: 25%; } /* 中間區域寬度 */ .column.middle { width: 50%; } /* 列後面清除浮動 */ .row:after { content: ""; display: table; clear: both; } /* 響應式布局 - 寬度小於600px時設置上下布局 */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } } /* 底部樣式 */ .footer { background-color:black; padding: 10px; text-align: center; } p { color:white; } </style></head><body><div> <h1>頭部區域</h1> <p>重置瀏覽器大小查看效果。</p></div><div> <a href="#">連結</a> <a href="#">連結</a> <a href="#">連結</a></div><div> <div> <h2>左側欄</h2> <p>菜鳥教程 - 學的不僅是技術，更是夢想！</p> </div> <div> <h2>主區域內容</h2> <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p> <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p> </div> <div> <h2>右側欄</h2> <p>菜鳥教程 - 學的不僅是技術，更是夢想！</p> </div></div><div> <p>底部區域</p></div></body></html>下次詳細講解另一種響應式網頁的實現，感謝點讚助力！
另一種響應式頁面