HTML:
<main>
<div class="container">
<table border="0" cellspacing = "0" id = "shoppingcartinfo">
<thead>
<tr>
<th width = "75px" height = "42px">
<label for="checkall">
<input type="checkbox" name="checkall" id="checkall" class="checkall">
<span></span>全选
</label>
</th>
<th width = "400px" height = "42px">商品</th>
<th width = "135px" height = "42px">单价</th>
<th width = "230px" height = "42px">购买数量</th>
<th width = "150px" height = "42px">小计</th>
<th width = "200px" height = "42px">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
<label for="checkall1">
<input type="checkbox" name="checkall" id="checkall1" class="checkall">
<span class = "checkallspan fl"></span>
</label>
<img src="../images/k5.webp" alt="cosmetics" class ="shoppingitem fl">
<div class="shoppingdesc fl">
Texamo黛末烁影系列26支化妆刷子套装眼
<br><br>
<b>颜色分类:粉红 刷毛材质:人造纤维</b>
</div>
<div style="clear: both;"></div>
</td>
<td width = "135px" height = "90px" align="center" valign="top" class="price pt20">¥109.00</td>
<td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
<i class="minus iconfont icon-subtract"></i>
<input type="number" min="1" step="1" value="1">
<i class="plus iconfont icon-jiahao"></i>
</td>
<td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">¥318.00</td>
<td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
<strong>删除</strong><br>
<strong>移入收藏夹</strong>
</td>
</tr>
<tr>
<td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
<label for="checkall2">
<input type="checkbox" name="checkall" id="checkall2" class="checkall">
<span class = "checkallspan fl"></span>
</label>
<img src="../images/hot_item3.jpg" alt="laundry" class ="shoppingitem fl">
<div class="shoppingdesc fl">
白猫无磷洗衣液3kg*4瓶整箱装
<br><br>
<b>颜色分类:蓝色 版本:洁净柔香</b>
</div>
<div style="clear: both;"></div>
</td>
<td width = "135px" height = "90px" align="center" valign="top" class="price pt20">¥20.00</td>
<td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
<i class="minus iconfont icon-subtract"></i>
<input type="number" min="1" step="1" value="1">
<i class="plus iconfont icon-jiahao"></i>
</td>
<td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">¥80.00</td>
<td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
<strong>删除</strong><br>
<strong>移入收藏夹</strong>
</td>
</tr>
<tr>
<td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
<label for="checkall3">
<input type="checkbox" name="checkall" id="checkall3" class="checkall">
<span class = "checkallspan fl"></span>
</label>
<img src="../images/hot_item7.jpg" alt="kettle" class ="shoppingitem fl">
<div class="shoppingdesc fl">
苏泊尔电热水壶家用不锈钢防烫大容量自动断电
<br><br>
<b>颜色分类:玫瑰金 服务: 全面保修2年</b>
</div>
<div style="clear: both;"></div>
</td>
<td width = "135px" height = "90px" align="center" valign="top" class="price pt20">¥99.00</td>
<td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
<i class="minus iconfont icon-subtract"></i>
<input type="number" min="1" step="1" value="1">
<i class="plus iconfont icon-jiahao"></i>
</td>
<td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">¥99.00</td>
<td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
<strong>删除</strong><br>
<strong>移入收藏夹</strong>
</td>
</tr>
<tr>
<td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
<label for="checkall4">
<input type="checkbox" name="checkall" id="checkall4" class="checkall">
<span class = "checkallspan fl"></span>
</label>
<img src="../images/huaweiphone_02.png" alt="huaweiphone" class ="shoppingitem fl">
<div class="shoppingdesc fl">
HUAWEI nova8 SE 5G 超清四摄
<br><br>
<b>颜色分类:天空蓝 版本:6GB+128GB</b>
</div>
<div style="clear: both;"></div>
</td>
<td width = "135px" height = "90px" align="center" valign="top" class="price pt20">¥2599.00</td>
<td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
<i class="minus iconfont icon-subtract"></i>
<input type="number" min="1" step="1" value="1">
<i class="plus iconfont icon-jiahao"></i>
</td>
<td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">¥2599.00</td>
<td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
<strong>删除</strong><br>
<strong>移入收藏夹</strong>
</td>
</tr>
</tbody>
</table>
<div class="paddingpanel clearfix">
<div class="conclude clearfix">
<div class="concludeleft fl">
<label for="checkall5">
<input type="checkbox" name="checkall" id="checkall5" class="checkall">
<span></span>全选
</label>
<a href="#">删除选中商品</a>
</div>
<div class="concluderight fr">
<span class="fl">已选择<strong>1</strong>件商品</span>
<dl class="fl">
<dt></dt>
<dd>总价:¥3096.00</dd>
<dd>优惠:¥200.00</dd>
<dd>合计:<strong>¥2886.00</strong></dd>
</dl>
<div style="clear:both"></div>
</div>
</div>
<div class="continueorsubmit fr">
<button type="button" class="continue">继续购物</button>
<button type="submit" class="submit">提交订单</button>
</div>
</div>
</div>
</main>
CSS:
.fl{
float: left;
}
.fr{
float: right;
}
#shoppingcartinfo thead{
background-color: #f5f5f5;
/* border: 1px solid #dcdcdc; */
}
#shoppingcartinfo tr th{
font: 12px/1 "宋体";
color:#666666;
}
#shoppingcartinfo tr{
border: 1px solid #dcdcdc;
}
#shoppingcartinfo tr:hover{
background-color: #fef9f6;
}
main .container .checkall{
display: none;
}
main .container .checkall[type=checkbox]+span{
display: inline-block;
width:14px;
height: 14px;
border: 1px solid #d7d7d7;
color:#b5b5b5;
vertical-align: bottom;
margin-right: 12px;
}
main .container .checkall[type=checkbox]:checked+span:after{
content:'\2714';
display: inline-block;
font-size: 14px;
width:14px;
height: 14px;
border: 1px solid #F36B10;
color:#F36B10;
text-align: center;
}
main .container .checkallspan{
display: inline-block;
margin: 0px 22px 0 16px;
}
main .container .shoppingitem{
margin: 0px 15px 0 6px;
width: 70px;
height: 70px;
}
main .container .shoppingdesc{
font: 12px/20px "宋体";
}
main .container .shoppingdesc > b{
color:#888888;
}
main .container .price{
font:14px/1 "Arial";
}
main .container .purchasenum > i,
main .container .purchasenum > input{
display: inline-block;
width: 30px;
height:30px;
line-height: 30px;
text-align: center;
color:#bbbbbb;
border: 1px solid #cecece;
}
main .container .purchasenum > input{
width:45px;
box-sizing: content-box;
vertical-align: top;
margin-left: -4px;
border-left-style: none;
}
main .container .purchasenum .plus{
margin-left: -4px;
}
main .container .sumup{
font: 16px/1 "Arial";
color:#F36B10;
}
main .container .operation{
font: 12px/25px "宋体";
cursor: pointer;
}
main .container .operation strong:hover{
color:#F36B10;
text-decoration: underline;
}