1.页面效果

接上面

2.页面分析

头部导航栏和底部栏跟前面的大相径庭，这里就不再总结了。

详情页的制作大致分为两个部分：产品介绍模块和产品细节模块。

3.页面制作

（1）产品介绍模块

产品介绍模块大致分为以下几个部分：面包屑导航，预览区域，产品详细信息。

①面包屑导航

这个部分是一个大的div，里面包含4个a标签，设置div的高度，设置a标签的间距即可。

②预览区域

这个部分主要是三个div。第一个div用来存放一张大的img图片。第二个div用来存放5张小图片和两个左右箭头；两个左右箭头是用绝对定位定位在父亲盒子的左右两边，然后是ul>li结构，设置每个小li的宽度和高度，存放小图片，设置每个小li向左浮动即可。第三个div则是简单的文字与字体图标和复选框的合用。

③产品详细信息

这个部分也是4个大的div。第一个div是黑体字，设置字体大小和颜色就可以了。第二个div是红体字，设置字体大小和颜色页就可以了。第三个div，每一行的内容都是有dl包裹的，每一行前面的表示类别的文字都是有dt包裹的，标题后面的都是dd包裹，有的设置字体大小和颜色就行了，选择颜色、版本、容量的选项是设置a标签为inline-block，设置它的宽度和高度即可。第四个div，里面包含一个输入框，一个购物车按钮。输入框是一个div，里面一个input标签，2个a标签用来实现+和-的效果，用绝对定位设置+和-的位置，以及设置他们的宽度和高度，背景颜色等等。然后购物车按钮就是一个a标签设置宽度、高度、背景颜色、字体颜色等等。

（2）产品细节模块

这个模块主要有两个部分，左边栏部分和右边产品细节部分。

①左边栏部分

这部分是两个大的div。第一个div是ul>li结构典型的一个导航栏，设置他们的浮动，边框，背景颜色，字体等等即可。第二个部分是两个ul>li结构，第一个ul（手机，手机卡，内存卡，iPhone配件，贴膜）中包含了10个li>a结构，设置li的浮动和a的宽度，高度和底边框等等。第二个ul中包含许多li，其中一个img存放图片，h5存放文字，最后一个a标签加入购物车。

②右边产品细节