7.8　综合实例

7.8　综合实例

本章主要介绍了各种列表及其在网页中的应用，围绕这个核心，完成图7-17所示页面的设计，在这个网页中综合运用了多种列表。

具体操作步骤如下：

（1）新建页面，在＜title＞标签中输入“综合实例——电信5G”作为页面标题。

（2）观察整个页面内容，根据语义选择使用哪个标签。页面最上方的部分使用header和nav元素，主体文字内容使用article元素。

（3）为了方便设置整个页面内容的样式，使用id为content的div将所有元素包围起来。

（4）各部分内容的代码按照从上到下的顺序书写。

图7-17　综合实例页面效果

（5）向每个区域中填入内容对应的代码。

完成后的HTML代码如下：

（6）完成页面的CSS样式设置，代码如下：

①页面整体效果的设置，即对＜body＞标签和＜div id＝＂content＂＞的定义，代码如下：

②为header添加背景图片，并设置上方内间距，代码如下：

③对由列表实现的行内导航栏进行CSS样式设置，注意内外边距的定义，代码如下：

④设置＜article＞标签中各元素的样式，代码如下：

网页制作完成，其在浏览器中的运行效果如图7-17所示。