網(wǎng)頁布局有很多種方式，一般分為以下幾個部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。
1.頭部區(qū)域頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設(shè)置網(wǎng)頁的標題或者網(wǎng)頁的logo：
例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS項目(runoob.com)</title><metaname="viewport"content="width=device-width,initial-scale=1"><style>body{margin:0;}/*頭部樣式*/.header{background-color:#f1f1f1;padding:20px;text-align:center;}</style></head><body><divclass="header"><h1>頭部區(qū)域</h1></div></body></html>2.菜單導(dǎo)航區(qū)域菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶瀏覽其他頁面：
例
/*導(dǎo)航條*/.topnav{overflow:hidden;background-color:#333;}/*導(dǎo)航鏈接*/.topnava{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;}/*鏈接-修改顏色*/.topnava:hover{background-color:#ddd;color:black;}3.內(nèi)容區(qū)域內(nèi)容區(qū)域一般有三種形式:
1列：一般用于移動端。2列：一般用于平板設(shè)備。3列：一般用于PC桌面設(shè)備。不相等的列不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容，這三列加起來的寬度是100％。
例：
.column{float:left;}/*左右側(cè)欄的寬度*/.column.side{width:25%;}/*中間列寬度*/.column.middle{width:50%;}/*響應(yīng)式布局-寬度小于600px時設(shè)置上下布局*/@mediascreenand(max-width:600px){.column.side,.column.middle{width:100%;}}4.底部區(qū)域底部區(qū)域在網(wǎng)頁的最下方，一般包含版權(quán)信息和聯(lián)系方式等。
例
.footer{background-color:#F1F1F1;text-align:center;padding:10px;}二、響應(yīng)式網(wǎng)頁布局通過以上等學習我們來創(chuàng)建一個響應(yīng)式等頁面，頁面的布局會根據(jù)屏幕的大小來調(diào)整：
案例<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>項目</title><style>*{box-sizing:border-box;}body{font-family:Arial;padding:10px;background:#f1f1f1;}/*頭部標題*/.header{padding:30px;text-align:center;background:white;}.headerh1{font-size:50px;}/*導(dǎo)航條*/.topnav{overflow:hidden;background-color:#333;}/*導(dǎo)航條鏈接*/.topnava{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;}/*鏈接顏色修改*/.topnava:hover{background-color:#ddd;color:black;}/*創(chuàng)建兩列*//*Leftcolumn*/.leftcolumn{float:left;width:75%;}/*右側(cè)欄*/.rightcolumn{float:left;width:25%;background-color:#f1f1f1;padding-left:20px;}/*圖像部分*/.fakeimg{background-color:#aaa;width:100%;padding:20px;}/*文章卡片效果*/.card{background-color:white;padding:20px;margin-top:20px;}/*列后面清除浮動*/.row:after{content:"";display:table;clear:both;}/*底部*/.footer{padding:20px;text-align:center;background:#ddd;margin-top:20px;}/*響應(yīng)式布局-屏幕尺寸小于800px時，兩列布局改為上下布局*/@mediascreenand(max-width:800px){.leftcolumn,.rightcolumn{width:100%;padding:0;}}/*響應(yīng)式布局-屏幕尺寸小于400px時，導(dǎo)航等布局改為上下布局*/@mediascreenand(max-width:400px){.topnava{float:none;width:100%;}}</style></head><body><divclass="header"><h1>我的網(wǎng)頁</h1><p>重置瀏覽器大小查看效果。</p></div><divclass="topnav"><ahref="#">鏈接</a><ahref="#">鏈接</a><ahref="#">鏈接</a><ahref="#"style="float:right">鏈接</a></div><divclass="row"><divclass="leftcolumn"><divclass="card"><h2>文章標題</h2><h5>xx年xx月xx日</h5><divclass="fakeimg"style="height:200px;"><imgsrc="img/bird.png"></div><p>文本...</p><p>當熱誠變成習慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</p></div><divclass="card"><h2>文章標題</h2><h5>xx年xx月xx日</h5><divclass="fakeimg"style="height:200px;"><imgsrc="img/border.png"></div><p>文本...</p><p>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結(jié)果反而會更好！</p></div></div><divclass="rightcolumn"><divclass="card"><h2>關(guān)于我</h2><divclass="fakeimg"style="height:100px;"></div><p>6666</p></div><divclass="card"><h3>熱門文章</h3><divclass="fakeimg"><imgsrc="img/fy2_wp.png"></div></div><divclass="card"><h3>關(guān)注我</h3><p>本站發(fā)布的系統(tǒng)與軟件僅為個人學習測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買正版軟件！如侵犯到您的權(quán)益,請及時通知我們,我們會及時處理。聲明：為非贏利性網(wǎng)站不接受任何贊助和廣告。</p></div></div></div><divclass="footer"><h2>底部區(qū)域</h2></div></body></html>三、總結(jié)本文主要介紹了Html的網(wǎng)頁布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見的移動設(shè)備的三種網(wǎng)頁模式，最后通過一個小項目，總結(jié)之前講解的內(nèi)容。
代碼很簡單，希望可以幫助你學習。
