8.9　综合实例

8.9　综合实例

超链接是互联网中最具特色的元素，它的形式多种多样，变化非常多。结合本章所学知识，制作一个带超链接的网页实例，它在浏览器中的运行效果如图8-20所示。

图8-20　儿童用品网上商店

该页面可以划分为上、中、下3个部分，中间的内容区域又分为左、右两列，左列为主要内容，右列为竖直排列的导航菜单。其中页眉部分包含由列表实现的行内导航条，这是建立网站内部链接的常见形式；主体内容中包含图片，这里都设置了图像链接；侧边栏是竖直排列的导航栏。

按照这个基本框架，首先搭建出网页的HTML结构，为了方便设置整个页面内容的样式，使用id为container的div将所有元素包围起来，代码如下：

网页内容建立之后，因为没有设置CSS样式，所以页面效果还看不出来。下面设置CSS样式，步骤如下：

（1）网页整体样式设置，对应＜body＞标签以及最外层＜div id＝＂container＂＞，代码如下：

（2）页头中的行内导航栏部分，由列表实现，代码如下：

（3）主体内容部分，代码如下：

（4）侧边栏部分为由列表建立的竖直排列导航栏，代码如下：

（5）页脚部分代码如下：