html案例 網(wǎng)站簡介 第1步 整體布局
https://www.xiaobuteach.com/html/website-intro/step1.html?from=bili
html案例 網(wǎng)站簡介 第1步 整體布局
1 本節(jié)目標
實際頁面請點擊?網(wǎng)站簡介案例 第1步：整體布局?。
查看源碼的方法：網(wǎng)頁右鍵 — 查看網(wǎng)頁源代碼 。
根據(jù)網(wǎng)頁內(nèi)容與布局特點，整個頁面分為三大塊：1 頭部區(qū)，2 主要內(nèi)容區(qū)，3 尾部區(qū)。
1 頭部區(qū)(header區(qū))：占滿頁面整個寬度；其中內(nèi)容為一級標題。
2 主要內(nèi)容區(qū)(main區(qū))：兩邊留白， 中間寬度固定為800px；其中包括3小塊：關(guān)于、原創(chuàng)聲明、交流。
3 尾部區(qū)(footer區(qū))：包括底部那條橫線，占滿頁面整個寬度；其中內(nèi)容為版權(quán)說明。
2 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)站簡介案例 第1步 | 小步教程</title>
</head>
<!-- v1：整體分塊 -->
<!-- 設(shè)置body四周的外邊距為0,消除邊緣空白 -->
<body style="margin:0;">
<!-- 整個頁面分為三大塊：1 頭部區(qū),2 主要內(nèi)容區(qū),3 尾部區(qū) -->
<div id="header">
1.頭部區(qū)
</div>
<div id="main">
2.主要內(nèi)容區(qū)
</div>
<div id="footer">
3.尾部區(qū)
</div>
</body>
</html>
3 代碼講解
1）頁面的整體分塊
也稱布局，通過容器標簽div來實現(xiàn)，3大塊用3個div實現(xiàn)。
2）body的外邊距
body默認的外邊距margin值為8px，需手動設(shè)置為0。
3）標簽的id屬性
每個標簽都有id屬性；
整個html頁面，id不能重復(fù)；
本案例僅設(shè)置id屬性，并沒有進一步使用它，是為了方便大家閱讀代碼，區(qū)分不同的div。
