<div class="cartDiv"><!-- 11 -->
<div class="cartProductList"><!-- 12 -->
<table class="cartProductTable"><!-- 13 -->
<thead>
<tr>
<th class="selectAndImage">
<!-- 1 -->
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png"
class="selectAllItem" selectit="false">
全选
</th>
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th width="120px">金额</th>
<th class="operation">操作</th>
</tr>
</thead>
<tbody>
<tr class="cartProductItemTR" oiid="936"><!-- 14 -->
<td>
<!-- 2 15class购物车商品条目如果选中-->
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png"
class="cartProductItemIfSelected"" selectit="false">
<!-- 3 -->
<a href="nowhere" style="display:none">
<img src="http://how2j.cn/tmall/img/site/cartSelected.png">
</a>
<!-- 4 16class购物车商品图片-->
<img class="cartProductImg" width="40px" src="http://how2j.cn/tmall/img/productSingle_middle/3665.jpg">
</td>
<td>
<!-- 5 16class购物车商品链接外部div-->
<!-- div+{a+div{3*img}} -->
<div class="cartProductLinkOuterDiv">
<!-- 17class购物车商品链接 -->
<a class="cartProductLink" href="nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
<!-- 18class购物车商品链接内部div -->
<div class="cartProductLinkInnerDiv"">
<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
</div>
</div>
</td>
<td>
<!-- 6 -->
<!-- class相反 -->
<!-- 19class购物车商品条目原始价格 -->
<span class="cartProductItemOringalPrice">￥7580.0</span>
<!-- 20class购物车商品条目促销价格 -->
<span class="cartProductItemPromotionPrice">￥5306.0</span>
</td>
<td>
<!-- 7 -->
<!-- 21class购物车商品条目改变数字div -->
<div class="cartProductChangeNumberDiv">
<!-- 22不太懂这个的作用 -->
<!-- 加了bootstrap才知道是bootstrap发挥的作用 -->
<span pid="365" class="hidden orderItemStock ">75</span>
<span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
<!-- 8 -->
<!-- 22class数字减 -->
<a class="numberMinus" href="nowhere" pid="365">-</a>
<!-- 23订单order(项，条目)数字设定 -->
<input class="orderItemNumberSetting" value="4" autocomplete="off" pid="365" oiid="936">
<!-- 23class数字加 -->
<a class="" href="nowhere" pid="365" stock="75">+</a>
</div>
</td>
<td>
<!-- 9 -->
<!-- 24class购物车商品(条目，项)小加总价格 -->
<span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span>
</td>
<td>
<!-- 10 -->
<!-- 25class删除订单(项，条目) -->
<a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
</td>
</tr>
<!-- 以下与上面基本一致 -->
<tr class="cartProductItemTR" oiid="935">
<td>
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
<a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a>
<img width="40px" src="http://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
</td>
<td>
<div class="cartProductLinkOutDiv">
<a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
<div class="cartProductLinkInnerDiv">
<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
</div>
</div>
</td>
<td>
<span class="cartProductItemOringalPrice">￥235.0</span>
<span class="cartProductItemPromotionPrice">￥152.75</span>
</td>
<td>
<div class="cartProductChangeNumberDiv">
<span pid="809" class="hidden orderItemStock ">17</span>
<span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
<a href="#nowhere" class="numberMinus" pid="809">-</a>
<input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
<a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
</div>
</td>
<td>
<span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
￥152.75
</span>
</td>
<td>
<a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
</td>
</tr>
<!-- 以上与上面基本一致 -->
</tbody>
</table>
</div>
</div>
/* 购物车div */
div.cartDiv{
/* 最大宽度+外边距(居中)+颜色(可以忽略) */
max-width: 1013px;
/* 最大宽度1013，有时候用户的分辨率很高，
比如1600x1200,使用1013可以使购物车这一块仅仅显示在中间，
而不是平铺满整个屏幕，那样不好看 */
margin: 10px auto;/* 本元素居中显示 */
color: black;/* 字体颜色: black */
}
/* 商品table */
table.cartProductTable{
/* 宽度百分百,不能忽略，字体大小在完整项目不用设置 */
width: 100%;/* 宽度: 100% */
font-size:12px;/* 字体大小:12px */
}
/* 商品所在的每一行 */
/* 这个目前呈现不出效果，后面不知道怎么的就可以了 */
tr.cartProductItemTR{
border: 1px solid black;
}
/* 商品所在的每一列 */
tr.cartProductItemTR td{
/* 加内边距，拉开距离，每个格子都有一定空间
padding比margin好，后面加格子都是有内边距*/
padding: 20px;/* 内边距 */
}
/* 表头信息的每一列 */
table.cartProductTable th{
/* 字体正常，不粗+字体颜色+内边距（和商品每一列对齐） */
font-weight: normal;/* 正常字体粗细 */
color: #3C3C3C;/* 字体颜色: #3C3C3C */
padding: 20px;/* 内边距 */
}
/* 商品图片 */
img.cartProductImg{
/* padding为1px很灵性，以后hover换边框颜色不会错位 */
/* 宽度+高度 */
padding: 1px;/* 内边距 */
border: 1px solid #EEEEEE;/* 边框 */
width: 80px;/* 宽度: 80px */
height: 80px;/* 高度: 80px */
}
/* 图片所在列 */
table.cartProductTable th.selectAndImage{
width:100px;
/* 宽度:100px */
}
/* 最后一列 */
table.cartProductTable th.operation{
width:30px;
/* 宽度:30px */
}
/* 产品连接所在div */
div.cartProductLinkOuterDiv{
/* 外部div相对与td格子相对定位，设置高度
内部div可以相对于外部div绝对定位，
bottom:0 ,left:0*/
position: relative;
/* 相对定位，之所以要使用相对定位，
是这个div里有用来放3个图标的另一个
div:cartProductLinkInnerDiv,
而cartProductLinkInnerDiv需要使用据对定位 */
height: 80px;
/* 高度: 80px */
}
/* 产品连接 */
a.cartProductLink{
color: #3C3C3C;/* 字体颜色: #3C3C3C */
}
/* 产品连接悬停状态 */
a.cartProductLink:hover{
color: #C40000;/* 字体颜色: #C40000 */
text-decoration: underline;/* 有下划线 */
}
/* 产品连接下面的三个图标所在div */
div.cartProductLinkInnerDiv{
/* 看外部div的relative
bootom:0相对于外部div的底部*/
position: absolute;/* 绝对定位 */
bottom: 0;/* 贴在下面 */
/* 改成height:0看看效果
三个图标的距离就往下移20px
其实是div没有距离内部div的底部紧贴着外部div的底部 */
/* 内部div的高度20px,
但因为内部div的底部是紧贴着内部div的底部，
height:20px,内联元素img在div盒子起始位置
(起始位置是上边，下边是底部)，
所以图标距离文字的距离会比height:0的距离要小 */
height: 20px;/* 高度: 20px */
}
/* 原始价格 */
span.cartProductItemOringalPrice{
/* 删除线+字体颜色+块状元素+字体加粗+字体大小 */
text-decoration: line-through;/* 删除线 */
color: #9C9C9C;/* 字体颜色: #9C9C9C */
display: block;/* 以块状显示，自动换行, 并且可以修改宽度 */
font-weight: bold;/* 粗体 */
font-size: 14px;/* 字体大小: 14px */
}
/* 促销价格 */
span.cartProductItemPromotionPrice{
/* 字体3件套+字体颜色 */
font-family: Arial;
/* 使用Arial字体的目的是为了把￥正常显示出来 */
font-size: 14px;/* 字体大小: 14px */
font-weight: bold;/* 粗体 */
color: #C40000;/* 字体颜色: #C40000 */
}
/* 调整数量div */
div.cartProductChangeNumberDiv{
/* 边框加宽度 */
border: solid 1px #E5E5E5;
/* 边框 */
width: 80px;
/* 宽度: 80px */
}
/* 增加和减少 */
div.cartProductChangeNumberDiv a{
/* 宽度+内联-块状+水平居中+颜色+无下划线 */
width: 14px;
/* 宽度: 14px */
display: inline-block;
/* 显示为内联，既可以设置大小，又能够不换行 */
text-align: center;
/* 文本水平居中 */
color: black;
/* 字体颜色: black */
text-decoration: none;
/* 无下划线 */
}
/* 数量输入框 */
div.cartProductChangeNumberDiv input{
/* 边框+宽度+内联-块状 */
border: solid 1px #AAAAAA;
/* 边框 */
width: 42px;
/* 宽度: 42px */
display: inline-block;
/* 显示为内联，既可以设置大小，又能够不换行 */
}
/* 小计金额 */
span.cartProductItemSmallSumPrice{
/* 字体类型+字体大小+字体加粗+字体颜色 */
font-family: Arial;
/* 使用Arial字体的目的是为了把￥正常显示出来 */
font-size: 14px;
/* 字体大小: 14px */
font-weight: bold;
/* 粗体 */
color: #C40000;
/* 字体颜色: #C40000 */
}
/* 最前方的是否选中图片 */
img.cartProductItemIfSelected, img.selectAllItem{
/* 小方形呈点击状 */
cursor: pointer;/* 鼠标呈点击状 */
}