一、首页制作
1、准备工作：
新建文件夹ds,文件夹内有文件夹：images,js,style。
新建HTML文件在ds文件夹下，CSS文件在style文件夹下。
关联HTML和CSS：
CSS文件内，reset操作：
2.顶部结构
1）
收藏慕课：用a标签，设置背景图片，且设置padding-left
设置左右浮动。
2）
log设置左浮动
3）
search_box设置左浮动；
search_box: search_text(360px*35px),search_btn(70px*35px)
search_text要设置padding:0 5px,所以其width:360-2*5=350px
遇到的问题，IE6不支持部分功能：
（1）input search_text仍然有边框。解决: background设为none,
（2）input内文字不垂直居中。解决1：重新设置height,padding,line-height:
高度=height+padding-top+padding-bottom
解决方法2：
CSShack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSShack为不同版本的浏览器定制编写不同的CSS效果。
4）
ShopCar设置右浮动；
span是一个行内元素，行内元素浮动了就变成块级元素了，可以设置宽高等等了
技巧：解决shopText/shopNum添加完背景图像之后，让文字移动到想要的位置：
a.设置padding,并且同时width减去padding的设置数值
b.设置text-indent
这里shopText用的b方法，shopNum用的a方法
--->
5）
小三角在文字右边的i标签内，折让方便定位。
6）
7）
如何控制两行的间距？
通过height/line-height
此例子，上一行是dt,下一行是dd,是不同的，所以可以控制dt的height。
8）
关键知识点：如何控制两行的间距？对于同样是dd标签的内部有两行，设置合适的行高。
9）
当点击左侧列表第二项时，展开右侧列表，同时左侧第二项的样式改变。
为第二项加一个类，并且为此类设置相应样式。样式设置好之后，可以把此类去掉，可在JS中加入动态的添加类。
10）此列表当不点击相应列表时时隐藏状态，添加类hide.
在CSS中公共部分，设置类hide与show
11）
准备好所有的banner图，譬如说两张；
设置图片的包裹div:I'mBox的width=imgWidth*Banner张数；
设置图片的包裹div的包裹div:banner_bar的width=imgWidth,并且overflow:hidden;
如下：
banner图片下面的指示图像链接：
如何显示第二张?
改变banner包裹层的left.
12）
13）
<--
可以由右侧部分的HTML代码改编而来。如何改造？
发现两个banner，只有width和height的属性不同。可以把横向的banner中的宽高属性拿出来放到
一个类banner_big中；然后设置banner_sm类，设置竖向banner的宽高。
分别为两个banner_bar添加类banner_big/banner_sm
复制右侧部分的代码，
14）
右侧总共的距离为1000px-bannerW(190)=810px,810/4=202.5px,可以取整数203px
右侧每个块分到的距离203px=202px(width)+1px(border)
最后，第四个块掉下去了，因为宽度不够了：203*4-808px=4px,少了4px,所以右侧的整体div 设置margin-right:-4px;
为描述文字设置距离：注意line-heigh,padding,margin
最外层的div的padding-top(如图中蓝色方框所示)
右侧是text的div的总高度为阴影区域，红色宽方框所示为text的padding-top(注意line-heiht占据的位置)
line-height的高度为红色细方块。
15）
===============================================================
出现的bug:
1.缩小窗口之后出现的问题
此页的结构是Header部分为和网页可视等宽的值，其父元素body也是；
下面的部分的宽度都为固定宽度：1000px;
当窗口缩小到>1000px时，是正常的。
当窗口缩小到<1000px时，出现滚动条，当滚动到最右边时，上边header部分出现白色背景。
解释，如：
<div class=”parent” style=”width: 100%; background-color: #f00;”>
<div class=”child” style=”width: 1000px; background: url() no-repeat;”>
….省略若干层
</div>
</div>
想实现一个和浏览器等宽的div，parent；在该div里实现一个固定宽度为1000像素的div，child ；当浏览器窗口宽度大于1000px时，显示很正常；但是当浏览器宽度小于1000px时，出现了水平滚动条，拖动滚动条发现，右侧的parent居然变成了白色，为什么会这样呢？
可能你会说，我不是设置parent宽度和浏览器等宽了么，为什么还会出现这种问题，其实由于你设置了child的宽度为固定值1000px，当浏览器的宽度小于这个值时，实际parent元素并未撑到1000px，而是按照自己设置的浏览器可视宽度和min-width属性中的最大值进行设置，此时计算的结果就会出现偏差，也就是你看到的为什么parent的宽度是当前可视窗口的宽度，拖动滚动条右侧全部变白了，那么怎么修改呢？很简单
<div class="parent" style="min-width: 1000px; background-color: #f00;">
<div class="child" style="width: 1000px; background: url() no-repeat;">
....省略若干层
</div>
</div>
如果你body下有很多层，你不妨可以将body设置一下min-width。
最终解决方法：添加body CSS样式：body{min-width:1000px;}
或者可以不让滚动条出现：body{overflow:hidden;}
二、产品分类页制作
1）
2）
解释：因为products中一共四列item,所以item的item设置为25%.
============================================================
IE6中的bug:
1)
问题：标题h3下的两个border没有重合。
是因为h3是子元素，其父元素的要包裹子元素，所以父元素的boder包裹了h3的border；
解决：
2)
有一列没了。通过删除其他项，只留4项发现，有一项掉到第二行了。
查找方法由大范围逐渐缩小：未数码影像的整体添加background,发现与chrome没什么区别。
其实是ie6里计算width的%数值，计算得不好。
解决：width缩小百分比，写法*width这种写法只针对ie浏览器
三、产品筛选页制作
1）改造左侧产品分类
<--
......
2）
四、详细内容页制作
五、商品评价页制作
六、购物车页面制作
七、登录、注册页制作
