JavaScript实战之购物车案例

这个是通过网上视频案例学习，然后，自己想整理一下页面书写流程文档。

show样式：

HTML代码结构+CSS结构

初始化css样式：

	* {
   
	    margin: 0;
	    padding: 0;
	}
	a {
   
	    color: #666;
	    text-decoration: none;
	}
	body {
   
	    padding: 20px;
	}

此页面主要分为两个部分：商品表格部分+合计结算等的页脚部分

对应代码：

表格

表格总体样式：

table {
   
    border-collapse: collapse;     //边框合并为单一边框
    border-spacing: 0;             //相邻单元格边框间距，因collapse的存在，无影响
    border: 0;                     //边框宽度，在此处没有影响
    text-align: center;
    width: 937px;
}

表格头部：

对应样式：

th, td {
   
    border: 1px solid #CADEFF;
}
th {
   
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}

表格主体内容部分
每一行代码都差不多就是图片文字数字更改一下

<tr>
	<td class="checkbox"><input type="checkbox" class="check-one check" /></td>
	<td class="goods"><img src="img/1.jpg" alt="" /><span>用JS实现购物车特效</span></td>
	<td class="price">5999.88</td>
	<td class="count">
		<span class="reduce"></span>
		<input class="count-input" type="text" value="1" />
		<span class="add">+</span>
	</td>
	<td class="subtotal">5999.88</td>
	<td class="operation"><span class="delete">删除</span></td>
</tr>

对应的样式：

td {
   
    padding: 10px;