页面导航模块

a{
color:#1965b3;
text-decoration: none;
} 

a:hover{
color:#CD590C;
text-decoration:underline;
}

购物车模块

• 店铺信息就是1列，所以需要使用“colspan”合并单元格，蓝色文本为超链接，所以使用a标签实现，图片部分使用img标签实现

<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>

 CSS

.shopInfo{
  padding-left:10px;
  height:35px;
  vertical-align:bottom;
}

• 商品信息由8列构成，第1列是复选框，第2列是商品图片，第3列是商品介绍，第4列是商品积分，第5列是商品单价，第6列是商品数量，第7列是商品小计，第8列是删除。每一列内容不一样，布局时选取对应的标签实现即可

• HTML代码：

<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
颜色：棕色 尺码：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7">138</td>
<td class="cart_td_8"><a href="#">删除</a></td>
</tr>

• 编写样式时，注意相同或可复用的样式取一样的class类，然后根据效果图给页面添加文本样式、背景样式、外边距和内边距等

.num_input{
	border:solid 1px #666;
	width:25px;
	height:15px;
	text-align:center;
}
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
	background-color:#e2f2ff;
	border-bottom:solid 1px #d1ecff;
	border-top:solid 1px #d1ecff;
	text-align:center;
	padding:5px;
}
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
	border-right:solid 1px #FFF;
}
.cart_td_3{
	text-align:left;
}
.cart_td_4{
	font-weight:bold;
}
.cart_td_7{
	font-weight:bold;
	color:#fe6400;
	font-size:14px;
}
.hand{
	cursor:pointer;
}

 猜你喜欢模块

• 猜你喜欢主要包含两小块内容，分别是“猜你喜欢、最近浏览和找相似”列表和商品

• 列表部分使用无序列表和超链接标签实现，并添加浮动使其列表横排显示在一行。商品部分使用四个自定义列表实现，同时设置浮动使四个自定义列表横排显示在一行

<div id="tab_cont">
	   <ul>
	     <li><a href="#">猜你喜欢</a></li>
	     <li><a href="#">最近浏览</a></li>
	     <li><a href="#">找相似</a></li>
	   </ul>
	   <div id="cont1">
	     <dl>
	       <dt><img src="images/tab1.jpg" alt="" /></dt>
	       <dd>
	         <b>￥99</b>
	         <span>单鞋女2019春款绑带小白鞋</span>
	       </dd>
	     </dl>
	    <!-- 省略部分代码 -->
	   </div>
	</div>

页面底部模块

• 页面底部主要包含三小块内容，分别是“阿里巴巴集团、 淘宝网、天猫……”等超链接导航、“关于淘宝、合作伙伴、 营销中心……”等超链接导航和四张版权图片

• 超链接导航部分直接使用a标签实现即可，文本间的空格使用字符实体“ ”实现，四张版权图片通过img标签引入

<div class="footer">
	  <div class="down_top">
	    <a href="">阿里巴巴集团 &nbsp;<span>|</span> &nbsp;</a>
	    <a href="">淘宝网 &nbsp;<span>|</span> &nbsp; </a>
	    <a href="">天猫 &nbsp;<span>|</span> &nbsp;</a>
	    <!-- 省略部分代码 -->
	    <hr />
	  </div>
	  <div class="down_center">
	    <a href="">关于淘宝&nbsp;</a>
	    <a href="">合作伙伴&nbsp;</a>
	    <a href="">营销中心&nbsp;</a>
	    <!-- 省略部分代码 -->
	  </div>
	  <div class="down_bot">
	    <img src="images/bot1.gif" alt="" />
	    <img src="images/bot2.gif" alt="" />
	    <img src="images/bot3.png" alt="" />
	    <img src="images/bot4.png" alt="" />
	  </div>
	</div>

• 分别设置文本颜色、间距等样式

.footer{
	width: 800px;
	height: 140px;
	margin: 0 auto;
}
.down_top a{
	color: #333;
}
.down_top a span{
	color: #ccc;
}
.down_center a{
	color: #333;
}
.down_bot{
	margin-top: 10px;
	width: 800px;
	height: 40px;
	float: left;
	text-align: center;
}
.down_bot img{
	margin-left: 10px;
}