6.7 综合实例2——制作新闻菜单

在网上浏览新闻可能是每个上网者都喜欢做的事情。一个布局合理、样式美观大方的新闻菜单是吸引人的主要途径之一。本实例使用CSS控制HTML标记创建新闻菜单，具体步骤如下：

01 分析需求

创建一个新闻菜单需要包含两个部分：一个是父菜单，用来表明新闻类别；一个是子菜单，介绍具体的新闻消息。菜单方式很多，可以用<table>创建，也可以用列表创建，同样也可以使用段落<p>创建。本实例采用<p>标记结合<div>创建。

02 分析局部和整体，构建HTML网页

一个新闻菜单可以分为三个层次，即新闻父菜单、新闻焦点和新闻子菜单，下面分别使用div创建，其HTML代码如下所示。

在IE 11.0中的显示效果如图6-34所示，一个标题一个超链接和三个段落以普通样式显示，其布局只存在上下层次。

03 添加CSS代码，修饰整体样式

对于HTML页面，需要有一个整体样式，其代码如下所示。

在IE 11.0中的显示效果如图6-35所示，可以看到全局层会以边框显示，宽度为400px，其颜色为浅绿色；文档内容中的字采用宋体、大小为12px，并且定义内容和层之间的空隙为0、层和层之间的空隙为0。

04 添加CSS代码，修饰新闻父菜单

对新闻父类菜单进行CSS控制，其代码如下所示。

在IE 11.0中的显示效果如图6-36所示。标题“时事热点”以矩形方框显示，背景色为橄榄色，字体大小为14px，行高为18px。

05 添加CSS菜单，修饰子菜单

在IE 11.0中的显示效果如图6-37所示，超链接“7月周周爬房团报名”居中显示，所有段落之间间隙增大。

06 添加CSS菜单，修饰超级链接

在IE 11.0中的显示效果如图6-38所示。超链接“7月周周爬房团报名”字体变大，加粗，并且无下画线显示；将鼠标指针放在此超级链接上时会以红色字体显示，并且下面带有下画线。