時(shí)間：2023-10-02 15:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-02 15:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
一篇文章帶你了解HTML的網(wǎng)頁(yè)布局結(jié)構(gòu)：
在線咨詢
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS 項(xiàng)目(runoob.com)</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { margin: 0;}/* 頭部樣式 */.header { background-color: #f1f1f1; padding: 20px; text-align: center;}</style></head><body><div class="header"> <h1>頭部區(qū)域</h1></div></body></html>/* 導(dǎo)航條 */.topnav { overflow: hidden; background-color: #333;} /* 導(dǎo)航鏈接 */.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;} /* 左右側(cè)欄的寬度 */.column.side { width: 25%;} /* 中間列寬度 */.column.middle { width: 50%;} /* 響應(yīng)式布局 - 寬度小于600px時(shí)設(shè)置上下布局 */@media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; }}.footer { background-color: #F1F1F1; text-align: center; padding: 10px;}<!DOCTYPE html><html><head><meta charset="utf-8"><title>項(xiàng)目</title><style>* { box-sizing: border-box;} body { font-family: Arial; padding: 10px; background: #f1f1f1;} /* 頭部標(biāo)題 */.header { padding: 30px; text-align: center; background: white;} .header h1 { font-size: 50px;} /* 導(dǎo)航條 */.topnav { overflow: hidden; background-color: #333;} /* 導(dǎo)航條鏈接 */.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;} /* 創(chuàng)建兩列 *//* Left column */.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;} /* 列后面清除浮動(dòng) */.row:after { content: ""; display: table; clear: both;} /* 底部 */.footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px;} /* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時(shí)，兩列布局改為上下布局 */@media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; }} /* 響應(yīng)式布局 -屏幕尺寸小于 400px 時(shí)，導(dǎo)航等布局改為上下布局 */@media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; }}</style></head><body><div class="header"> <h1>我的網(wǎng)頁(yè)</h1> <p>重置瀏覽器大小查看效果。</p></div><div class="topnav"> <a href="#">鏈接</a> <a href="#">鏈接</a> <a href="#">鏈接</a> <a href="#" style="float:right">鏈接</a></div><div class="row"> <div class="leftcolumn"> <div class="card"> <h2>文章標(biāo)題</h2> <h5>xx 年xx月 xx日</h5> <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div> <p>文本...</p> <p>當(dāng)熱誠(chéng)變成習(xí)慣，恐懼和憂慮即無(wú)處容身。缺乏熱誠(chéng)的人也沒有明確的目標(biāo)。熱誠(chéng)使想象的輪子轉(zhuǎn)動(dòng)。一個(gè)人缺乏熱誠(chéng)就象汽車沒有汽油。 善于安排玩樂和工作，兩者保持熱誠(chéng)，就是最快樂的人。熱誠(chéng)使平凡的話題變得生動(dòng)。！</p> </div> <div class="card"> <h2>文章標(biāo)題</h2> <h5>xx 年 xx 月xx日</h5> <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div> <p>文本...</p> <p>一切事無(wú)法追求完美，唯有追求盡力而為。這樣心無(wú)壓力，出來(lái)的結(jié)果反而會(huì)更好！</p> </div> </div> <div class="rightcolumn"> <div class="card"> <h2>關(guān)于我</h2> <div class="fakeimg" style="height:100px;"></div> <p>6666</p> </div> <div class="card"> <h3>熱門文章</h3> <div class="fakeimg"><img src="img/fy2_wp.png">/</div> </div> <div class="card"> <h3>關(guān)注我</h3> <p>本站發(fā)布的系統(tǒng)與軟件僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除， 不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買正版軟件！如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們,我們會(huì)及時(shí)處理。聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p> </div> </div></div><div class="footer"> <h2>底部區(qū)域</h2></div></body></html>關(guān)鍵詞：布局,結(jié)構(gòu),文章
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
