html案例 网站简介 第1步 整体布局
https://www.xiaobuteach.com/html/website-intro/step1.html?from=bili
html案例 网站简介 第1步 整体布局
1 本节目标
实际页面请点击 网站简介案例 第1步：整体布局 。
查看源码的方法：网页右键 — 查看网页源代码 。
根据网页内容与布局特点，整个页面分为三大块：1 头部区，2 主要内容区，3 尾部区。
1 头部区(header区)：占满页面整个宽度；其中内容为一级标题。
2 主要内容区(main区)：两边留白， 中间宽度固定为800px；其中包括3小块：关于、原创声明、交流。
3 尾部区(footer区)：包括底部那条横线，占满页面整个宽度；其中内容为版权说明。
2 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站简介案例 第1步 | 小步教程</title>
</head>
<!-- v1：整体分块 -->
<!-- 设置body四周的外边距为0,消除边缘空白 -->
<body style="margin:0;">
<!-- 整个页面分为三大块：1 头部区,2 主要内容区,3 尾部区 -->
<div id="header">
1.头部区
</div>
<div id="main">
2.主要内容区
</div>
<div id="footer">
3.尾部区
</div>
</body>
</html>
3 代码讲解
1）页面的整体分块
也称布局，通过容器标签div来实现，3大块用3个div实现。
2）body的外边距
body默认的外边距margin值为8px，需手动设置为0。
3）标签的id属性
每个标签都有id属性；
整个html页面，id不能重复；
本案例仅设置id属性，并没有进一步使用它，是为了方便大家阅读代码，区分不同的div。
