17.2.6 设计产品展示页面
本实例的产品展示页面文件是shop.html，具体实现流程如下。
（1）设计顶部导航界面，本步骤和前面17.2.4中的步骤（1）完全一样。
（2）设计中间内容界面，插入一个名为“contents”的<div>，具体实现流程如下。
■连续插入4个<div></div>块，每个<div>块展示一个产品。
■在每一个<div>块中，在顶部插入一幅有超级链接的图片，在中间使用<h3></h3>标记设置产品的名称，在下方使用<p></p>标记对展现这款产品的简介信息。
实现代码如下。
（3）设计底部导航界面，本步骤和前面17.2.4中的步骤（3）完全一样。 执行后的效果如图17-22所示。
图17-22 执行效果
