品优购项目--列表页 list.

效果图

HTML部分 list.html

	
	
	
	
	   
	
	
	


	
	

		

			

				

					
品优购欢迎您！
					

						请登录
						免费注册
					
				
			
			

				

					
我的订单
					


					
我的品优购
					


					
品优购会员
					


					
企业采购
					


					
关注品优购
					


					
客户服务
					


					
网站导航
				
			
		
	

	
	

		

			
			

				

					品优购
				
			
			
			
			

				
			

			
			

				
				搜索

				
				

					优惠购首发
					亿元优惠
					9.9元团购
					美满99减30 
					办公用品
					电脑
					通信
				
			
			
			
			

				 我的购物车  
				8
			
		
	
	
	
	

		

			

				

					
品优秒杀
					
即将售罄
					
超值低价
				
			
			

				

					
女装
					
女鞋
					
男装
					
男鞋
					
母婴童装
					
食品
					
智能数码
					
运动户外
					
更多分类
				
			
		
	

	
	

		

			
		

		

			

				

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
				

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
		  	 	

		  	 	 	
		  	 	 		
		  	 	 		
Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
		  	 	 	
		  	 		 
¥6088 ￥6988
		  	 		 

		  	 	 		已售87%
  						

  							

  						
  						剩余29件
		  	 	 	
		  	 	 	立即抢购
		  	 	
			
		

		
		

			
				<<上一页 
				1
				2
				3
				4
				5
				...
				下一页>>
			
			
				共10页 到第
				
				页
				确定
			
		
	

	
	

		

			
			

				

					

						
						

							
正品保障
							
正品保障,提供发票
						
					
					

						
						

							
极速物流
							
极速物流,极速送达
						
					
					

						
						

							
无忧售后
							
7天无理由退换货
						
					
					

						
						

							
特色服务
							
私人订制家电套餐
						
					
					

						
						

							
帮助中心
							
您的购物指南
						
					
				
			

			

				

					
购物指南
					
购物流程
					
会员介绍
					
生活旅行/团购
					
常见问题
					
大家电
					
联系客服
				
				

					
配送方式
					
上门自提
					
211限时达
					
配送服务查询
					
配送费收取标准
					
海外配送
				
				

					
支付方式
					
货到付款
					
在线支付
					
分期付款
					
邮局汇款
					
公司转账
				
				

					
售后服务
					
售后政策
					
价格保护
					
退款说明
					
返修/退换货
					
取消订单
				
				

					
特色服务
					
夺宝岛
					
DIY装机
					
延保服务
					
品优购E卡
					
品优购通信
				

				

					

						
帮助中心
						

							
							
品优购客户端 
						
					
				
			

			

				

			 		关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U
			 	
			 	

			 		地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn  

          			京ICP备08001421号京公网安备110108007702
			 	
			
		
	
	

css部分 list.css

.sk {
	position: absolute;
	left: 260px;
	top: 38px;
	height: 30px;
	width: 55px;
	padding: 5px 0 5px 15px;
	border-left: 1px solid #B1191A;
}
.header {
	position: relative;
}
.sk_list li {
	float: left;
	height: 45px;
	line-height: 45px;
}
.sk_list a {
	padding: 0 30px;
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.sk_list a:hover {
	color: #CF151A;
}
.sk_con li {
	float: left;
	height: 45px;
	line-height: 45px;
}
.sk_con a {
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
}
.sk_con i {
	font-family: 'icomoon';
}

/*-------------------------------列表页的内容区域*/
.sk_bd {
	width: 1200px;
	padding-top: 25px;
}
.sk_goods {
	position: relative;
	float: left;
	width: 288px;
	height: 458px;
	border: 1px solid transparent;
	margin: 0  12px 15px 0;
}
.sk_goods:hover {
	border: 1px solid #e12228;
}
.sk_goods_title {
	font-size: 14px;
	color: #666;
	font-weight: normal;
	padding: 10px;
}
.sk_goods_price {
	padding: 0 10px;
}
.sk_goods_price em {
	font-size: 22px;
	color: #e60012;
}
.sk_goods_price del {
	font-size: 14px;
	font-weight: 700;
	color: #a4a4a4;
}
.sk_goods_progress {
	padding: 0 10px;
}
.bar {
	display: inline-block;
	width: 130px;
	height: 10px;
	border: 1px solid #b1191a;
	vertical-align: middle;
	margin: 0 5px;
	border-radius: 5px;
}
.bar_in {
	width: 87%;
	height: 10px;
	background-color: #f24349;
}
.sk_goods_progress em,
.sk_goods_progress i {
	color: #f24349;
}
.sk_goods_buy {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: #b1191a;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
}
.sk_bd ul {
	width: 1212px;
}
/*-----------------------------page*/
.page {
	margin: 40px 0;
	text-align: center;
}
.page_num a {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 1px solid #CCC;
	line-height: 36px;
	background-color: #F7F7F7;
}
.page_num .pn_prev {
	width: 83px;
}
.page_num .current {
	border-color: transparent;
}
.page_skip input {
	width: 48px;
	height: 36px;
}
.page_skip button {
	width: 50px;
	height: 36px;
	border: 1px solid #CCC;
	background-color: #F7F7F7;
}