HTML基础第11章 商品列表和详细信息页面的制作

11.2 制作商品详细信息页面
布局示意图如图11-9所示。
11.2 制作商品详细信息页面
1．左侧边栏区域的制作 2．商品详细介绍区域的制作
习题11
1．读者继续制作习题10中网上书店的图书目录子页面， 如图11-16所示。
2．制作网上书店的特别推荐子页面，如图11-17所示。
11.1 制作商品搜索列表页面
1．前期准备 （1）新建网页
在站点根目录下新建搜索列表页面list.html。 （2）添加CSS规则
打开网站style目录下的样式表文件style.css，在首页 的样式之后准备添加实现搜索结果翻页效果的CSS规则。 2．制作页面
添加一个pagination类的Div容器，用于对整个翻页区域进行控制 。
11.1 制作商品搜索列表页面
在网页的结构代码中将刚创建的currentpage类应用在 当前页面数字所在的<li>标签中，代码如下：
<li class="currentpage">1</li>
此时，页面效果如图11-7所示。
பைடு நூலகம்
11.2 制作商品详细信息页面
商品详细信息 页面是客户查看具 体产品时显示的页 面，此外，页面中 还增加了相似产品 和推荐产品的列表， 为浏览者提供产品 参考。商品详细信 息页面的效果如图 11-8所示。
第11章 商品列表和详细信息页面的制作
11.1 制作商品搜索列表页面 11.2 制作商品详细信息页面
11.1 制作商品搜索列表页面
搜索列表页面是客 户在搜索栏中输入关键 字后，通过系统搜索找 出符合条件的产品列表 页面。搜索列表页面的 效果如图11-1所示
11.1 制作商品搜索列表页面
布局示意图如图11-2所示。