万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

仿淘宝产品页样式HTML+CSS

luping 2015-12-31 技术

HTML+CSS仿淘宝商品样式,使用div+table样式,table内含ul+li创建表格。


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
a{text-decoration:none; color:#333; font-size: 14px; font-family:"微软雅黑";}
img{ border:0;}
.main{ width:1000px; height:auto; margin:0 auto;}
.clear {clear:both;height:0; font-size:0; line-height:0;  }
.im_detail{ padding: 10px 0; }
.im_detail .im_detail_a{width: 800px; float: left;}
.im_detail .im_detail_a .im_detail_r{width: 350px;float: left;}
.im_detail .im_detail_a .im_detail_r .r1 a{ color: #333; text-decoration: none; font-size: 14px;}
.im_detail .im_detail_a .im_detail_r .r1 a:hover{ text-decoration: underline; }
.im_detail .im_detail_a .im_detail_r .r2{ background: #FFF2E8; padding:15px 0; margin: 10px 0;font-size: 12px; height: 30px; }
.im_detail .im_detail_a .im_detail_r .r2 .s1{ width: 60px;  display: block; float: left; margin-top: 8px; color: #838383; padding-left: 10px;}
.im_detail .im_detail_a .im_detail_r .r2 .s2{ font-size: 24px; color: #C40000; display: block; float: left;}
.im_detail .im_detail_a .im_detail_r .td1{ font-size: 12px; color: #838383; width: 60px; padding-left: 10px;}
.im_detail .im_detail_a .im_detail_r .td2 li{ border: 1px solid #B8B7BD; float: left; margin: 5px 5px; padding: 0px 6px; }
.im_detail .im_detail_a .im_detail_r .td2 a{ color: #333; font-size: 12px; }
.im_detail .im_detail_a .im_detail_r .r3{margin: 10px 0; text-align: center; padding-left: 10px; }
.im_detail .im_detail_a .im_detail_r .r3 .a1{ width: 160px; height: 30px; border: 1px solid #C40000; display: block; color: #C40000; background: #FFEDED; float: left; padding-top: 10px; }
.im_detail .im_detail_a .im_detail_r .r3 .a2{ width: 160px; height: 30px; border: 1px solid #C40000; display: block; color: #fff; background: #C40000; float: right; padding-top: 10px;}
.im_detail .im_detail_a .im_detail_r table ul .li_a{background: #EDEDED; }
.im_detail .im_detail_a .im_detail_r table ul .li_a a{padding: 0 5px;}
.im_detail .im_detail_a .im_detail_r table ul .li_a input{ width: 40px; height: 30px; border: 1px solid #ccc;  border-top: 0 none !important; border-bottom: 0 none !important ; text-align: center; }
.im_detail .im_detail_a .im_detail_r table ul .li_b{ border: 0; margin: 10px 0;}
.im_detail .im_detail_a .im_detail_r table ul .li_b a{margin: 0 5px; padding: 5px 8px;}
.im_detail .im_detail_a .im_detail_r table ul .li_b a:hover{ font-size:14px;   color: #f00;}
</style>


<div class="im_detail main">
	<div class="im_detail_a">
	    <div class="im_detail_r">
			<p class="r1"><b><a href="#">【荣耀品质】Huawei/华为 荣耀5X 移动电信全网通4G智能手机</a></b></p>
			<p class="r2"><span class="s1">价格 </span>  <span class="s2">¥1500.00</span></p>	    	
			<table>
				<!--循环-->
				<tr>
					<td class="td1">网络类型</td>
					<td class="td2">
						<ul>
							<li><a href="#"><span>移动4G/联通4G/电信4G</span></a></li>
							<li><a href="#"><span>移动4G</span></a></li>
							
							<li><a href="#"><span>移动4G</span></a></li>
							<li><a href="#"><span>移动4G/联通4G/电信4G</span></a></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="td1">套餐类型</td>
					<td class="td2">
						<ul>
							<li><a href="#"><span>套餐五</span></a></li>
							<li><a href="#"><span>套餐六</span></a></li><li><a href="#"><span>套餐七</span></a></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="td1">机身内存</td>
					<td class="td2">
						<ul>
							<li><a href="#"><span>8GB</span></a></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="td1">机身内存</td>
					<td class="td2">
						<ul>
							<li class="li_a"><a href="#" class=""> - </a><input type="text" title="请输入购买量" maxlength="5" value="1"><a href="#" class=""> + </a></li><span style="font-size: 12px; color: #333; display: block; padding-top: 12px; ">件 (库存17770件)</span>
						</ul>
					</td>
				</tr>
				<!--循环   end-->
			</table>
			<p class="r3"><a href="#" class="a1">立即购买</a><a href="#" class="a2">☞ 加入购物车</a></p><div class="clear"></div>
            <table>
			    <tr>
					<td class="td1">支付</td>
					<td class="td2">
						<ul>
							<li class="li_b"><a href="#"><span>快捷支付</span></a>
							<a href="#"><span>余额宝支付</span></a>
							<a href="#"><span>集分宝</span></a>
							</li>
						</ul>
					</td>
				</tr>
	        </table>
	    </div>
	</div>
</div>


实现效果如图:

QQ图片20151231172620.png


--597.

文章关键词
HTML+CSS仿淘宝
div+table
table表格
qq qq tel
服务热线:

134-1954-9128