代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购物车页面实现</title>
<style>
.Tbsl{
background-color: #FFFFFF;
height: 80px;
margin: 0px 0px 24px;
}
.box{
text-align: center;
overflow: hidden;
}
button{
height: 18px;
width: 22px;
text-align: center;
border: #F5F5F5;
}
</style>
</head>
<body>
<table>
<tr>
<td width="68%"><img src="TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" /> </td>
<td>
<div id="Tbsl">
<select style=" outline: none; width:50px;height:32px;border: 3px solid orangered;border-right: none;color: gainsboro;">
<option selected="selected" disabled="disabled">宝贝</option>
<optgroup label="鞋靴">
<option value="1">单鞋</option>
<option value="2" >运动鞋</option>
<option value="3">皮鞋</option>
</optgroup>
<optgroup label="服装">
<option value="4">毛衣</option>
<option value="5">衬衫</option>
<option value="6">休闲裤</option>
</select><input type="search" style="outline: none; border: 3px solid orangered; border-left: none; border-right: none; height: 31px; width:250px;"/><button style="color: #F5F5F5; width: 50px; height: 32px;background-color: red;border-color: red;">搜索</button>
</div>
</td>
</tr>
</table>
<table border="0" width="1300px"height="500px">
<thead style="height: 30px;">
<th align="right"><input type="checkbox" name="全选"/></th>
<th align="left">全选</th>
<th colspan="2">商品信息</th>
<th>单价</th>
<th width="5%">数量</th>
<th>金额</th>
<th>操作</th>
</thead>
<tr height="30px">
<td align="right"><input type="checkbox" name="勾选"/></td>
<td colspan="10">店铺:hallner夏利奴旗舰<img src="O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png"height="15px"width="23px" /> </td>
</tr>
<tr height="30px">
<td align="right"><input type="checkbox" name="勾选"/></td>
<td><img src="xie.jpg"width="150px"height="150px"/></td>
<td width="35%"> <a href="https://www.taobao.com">2018春季新款韩版小白鞋女学生百搭懒人——脚踝平底单鞋休闲帆布鞋</a>
<br/>
<img src="zhengpin.jpg"width="15px"height="15px"/>
<img src="shouhou.jpg"width="15px"height="15px"/>
<img src="yunfei.jpg"width="15px"height="15px"/>
</td>
<td><font color="gainsboro">颜色分类：白色，<br/>尺码：39</font> </td>
<td>
<del><font color="grey">¥132.00</font></p></del>
<p>¥19.99</p>
</td>
<td align="center" width="10%">
<div class="box">
<button>+</button><input type="number" value="1" style="border: none; height: 16px;width:30px;text-align: center;"/><button>-</button>
</div>
</td>
<td>
<font color="red">¥19.99</font></td>
<td>
<a href="#">移入收藏夹</a>
</br>
<a href="#">删除</a>
</td>
</tr>
<tr height="30px">
<td align="right"><input type="checkbox" name="勾选"/></td>
<td colspan="10">店铺:warrior回力万成专卖店<img src= O1CN016b1mMM1FxJlsXfWhU_!!6000000000553-2-tps-96-30.png height="15px"width="32px" /> </td>
</tr>
<tr height="30px">
<td align="right">
<input type="checkbox" name="勾选"/></td>
<td>
<img src="xuezi.jpg"width="150px"height="150px" />
</td>
<td>
<a href="https://www.taobao.com">2017新款平底复古系带马丁靴女冬——加绒高帮英伦风机动车靴低跟短靴潮</a>
<br/>
<img src="zhengpin.jpg"width="15px"height="15px"/>
<img src="shouhou.jpg"width="15px"height="15px"/>
<img src="yunfei.jpg"width="15px"height="15px"/>
</td>
<td><font color="gainsboro">颜色分类：白色，<br/>尺码：39</font> </td>
<td>
<del><font color="grey">¥179.00</font></p></del>
<p>¥59.99</p>
</td>
<td>
<div class="box">
<button>+</button><input type="number" value="1" style=" border: none; height: 16px;width: 30px;text-align: center;"/><button>-</button>
</td>
<td><font color="red">¥59.99</font> </td>
<td><a href="#">移入收藏夹</a>
</br>
<a href="#">删除</a> </td>
</tr>
<tfoot align="right" style="background-color: gainsboro;">
<tr>
<td colspan="8">合计（不含运费）：0元<span> </span>
<input type="button" value="结算"style="background-color: red; width: 34px;height: 25px;color: #F5F5F5;border: none;"/>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果图：
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
