品优购项目实战

最新推荐文章于 2021-06-23 15:11:48 发布
最新推荐文章于 2021-06-23 15:11:48 发布
阅读量286 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45872012/article/details/116671005
版权

detail.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>手机详情页！</title>
		<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居
		百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
		<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,
		手表,存储卡,品优购" />
		<!--引入favicon.ico网页图标-->
		<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>  
		<!--引入css 初始化的css文件-->
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<!--引入公共样式的的css文件-->
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!--引入详情页面的css文件-->
		<link rel="stylesheet" type="text/css" href="css/detail.css"/>
	</head>
	<body>
		<!--顶部快捷导航栏  开始-->
		<div class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎您！</li>
						<li>
							<a href="#">请登录</a> 
							<a href="#" class="style-red">免费注册</a>
						</li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li><a href="#">我的订单</a></li>
						<li class="spacer"></li>
						<li>
							<a href="#">我的品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li><a href="#">品优购会员</a></li>
						<li class="spacer"></li>
						<li><a href="#">企业采购</a></li>
						<li class="spacer"></li>
						<li>
							<a href="#">关注品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li>
							<a href="#">客户服务</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li>
							<a href="#">网站导航</a>
							<i class="icomoon"></i>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--顶部快捷导航栏  结束-->
		<!--header开始-->
		<div class="header w">
			<!--logo-->
			<div class="logo">
				<h1>
					<a href="index.html" title="品优购">品优购</a>
				</h1>
			</div>
			<!--search-->
			<div class="search">
				<input type="text" class="text" value="请搜索内容"/>
				<button class="btn">搜索</button>
			</div>
			<!--hotwords-->
		    <div class="hotwords">
		    	<a href="#" class="style-red">优惠购首发</a>
		    	<a href="#">亿元优惠</a>
		    	<a href="#">9.9元团购</a>
		    	<a href="#">美满99减30</a>
		    	<a href="#">办公用品</a>
		    	<a href="#">电脑</a>
		    	<a href="#">通信</a>
		    </div>	
		<!--shopcar-->
		<div class="shopcar">
			<i class="car"></i>我的购物车<i class="arrow"></i>
			<i class="count">8</i>
		</div>
		</div>
		<!--header结束-->
		<!--nav开始-->
		<div class="nav">
			<div class="w">
				<div class="dorpdown fl">
					<div class="dt">全部商品分类</div>
					<div class="dd" style="display: none;">
						<ul>
							<li class="menu_item"><a href="#">家用电器</a>
								<i></i>
							</li>
							<li class="menu_item">
								<a href="list.html">手机 </a>  、
								<a href="#">数码</a>  、
								<a href="#">通信</a>    
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">电脑</a>  、
								<a href="#">办公</a>      
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">家居</a>  、
								<a href="#">家具 </a>  、 
								<a href="#">家装 </a>   、 
								<a href="#">厨具 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">男装</a>  、
								<a href="#">女装</a>  、  
								<a href="#">童装 </a>  、  
								<a href="#">内衣 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">个户化妆</a>  、
								<a href="#">清洁用品 </a>  、
								<a href="#">宠物 </a>
								<i></i>  
							</li>
							<li class="menu_item">
								<a href="#">鞋靴</a>  、
								<a href="#">箱包 </a>  、
								<a href="#">珠宝 </a>  、
								<a href="#">奢侈品 </a>
								<i></i>
							</li>
							</li>
							<li class="menu_item">
								<a href="#">运动户外</a>  、
								<a href="#">钟表 </a>      
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">汽车</a>  、
								<a href="#">汽车用品 </a>   
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">母婴</a>  、
								<a href="#">玩具乐器 </a>      
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">食品</a>  、
								<a href="#">酒类 </a>  、 
								<a href="#">生鲜 </a>  、
								<a href="#">特产 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">医药保健 </a>   
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">图书</a>  、
								<a href="#">音像 </a>  、
								<a href="#">电子书</a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">彩票</a>  、
								<a href="#">旅行 </a>  、 
								<a href="#">充值 </a>  、 
								<a href="#">票务 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">理财 </a>  、
								<a href="#">众筹 </a>  、 
								<a href="#">白条</a>  、
								<a href="#">保险 </a>     
								<i></i>
							</li>
						</ul>
					</div>
				</div>
				<!--右侧导航-->
				<div class="navitems fl">
					<ul>
						<li><a href="#">服装城</a></li>
						<li><a href="#">美妆馆</a></li>
						<li><a href="#">传智超市</a></li>
						<li><a href="#">全球购</a></li>
						<li><a href="#">闪购</a></li>
						<li><a href="#">团购</a></li>
						<li><a href="#">拍卖</a></li>
						<li><a href="#">有趣</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--nav结束-->
		
		<!--详情页内容部分  开始-->
		<div class="de_container w">
			<!--面包屑导航-->
			<div class="crumb_wrap">
				<a href="#">手机、数码、通讯</a>
				〉    <a href="#"> 手机</a>
				〉    <a href="#">Apple苹果 </a> 
				〉    <a href="#">iphone 6S Plus系类</a>
			</div>
			<!--产品介绍模块-->
			<div class="product_intro clearfix">   <!--因为父亲不方便给高度,两个孩子浮动,
			                                                                                底下的会升上来,所以需要给父亲清除浮动-->
				 <!--预览区域-->
				<div class="preview_wrap fl">
					<!--图片预览--> 
					<div class="preview_img">
						<img src="upload/s3.png"/>
					</div>
					<!--预览列表--> 
					<div class="preview_list">
						<a href="#" class="arrow_prev"></a>
						<a href="#" class="arrow_next"></a>
						<ul class="list-item">
							<li>
								<img src="upload/pre.jpg"/>
							</li>
							<li class="current">
								<img src="upload/pre.jpg"/>
							</li>
							<li>
								<img src="upload/pre.jpg"/>
							</li>
							<li>
								<img src="upload/pre.jpg"/>
							</li>
							<li>
								<img src="upload/pre.jpg"/>
							</li>
						</ul>
					</div>
				</div>
				<!--产品详细信息区域-->
				<div class="itemInfo_wrap fr">
					<div class="itemInfo">
						<div class="sku_name">
							Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机
						</div>
						<div class="news">
							推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返
						</div>
						<div class="summary">
							<dl class="summary_price">
								<dt>价格</dt>
								<dd>
									<i class="price">￥5299.00</i>
									<a href="#">降价通知</a> 
									<div class="remark"> 累计评价612188 </div>
								</dd>
							</dl>
							<dl class="summary_promotion">
								<dt>促销</dt>
								<dd>
									<em>加购价</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00
									元，即可在购物车换 购热销商品 详情 》
								</dd>
							</dl>
							<dl class="summary_support">
								<dt>支持</dt>
								<dd>
									以旧换新，闲置手机回收 4G套餐超值抢 礼品购
								</dd>
							</dl>
							<dl class="choose_color">
								<dt>选择颜色</dt>
								<dd>
									<a href="javascript:;">金色</a>
									<a href="javascript:;">银色</a>
									<a href="javascript:;">黑色</a>
									<a href="javascript:;" class="current">玫瑰金</a>
								</dd>
							</dl>
							<dl class="choose_version">
								<dt>选择版本</dt>
								<dd>
									<a href="javascript:;">公开版</a>
									<a href="javascript:;" class="current">移动4G</a>
								</dd>
							</dl>
							<dl class="choose_type">
								<dt>购买方式</dt>
								<dd>
									<a href="javascript:;" class="current">官方标配</a>
									<a href="javascript:;">移动优惠购</a>
									<a href="javascript:;">电信优惠购</a>
								</dd>
							</dl>
							<div class="choose_btns">
								<div class="choose_amount">
									<input type="text" value="1"/>
									<a href="javascript:;" class="add">+</a>
									<a href="javascript:;" class="reduce">-</a>
								</div>
								<a href="#" class="addshopcar">加入购物车</a>
							</div>
						</div>
					</div>
				</div>
			</div>
            <!--产品细节模块-->
            <div class="product_detail clearfix">
            	<!--aside模块-->
            	<div class="aside fl">
            		<div class="tab_list">
            			<ul>
            				<li class="first_table current">相关分类</li>
            				<li class="second_table">推荐品牌</li>
            			</ul>
            		</div>
            		<div class="tab_con">
            			<ul>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            				<li>
            					<img src="upload/aside_img.jpg"/>
            					<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
            					<div class="aside_price">¥19</div>
            					<a href="#" class="aside_addshopcar">加入购物车</a>
            				</li>
            			</ul>
            		</div>
            	</div>
            	<!--detail模块-->
            	<div class="detail fr">
            		<div class="detail_tab_list">
            			<ul>
            				<li class="current">商品介绍</li>
            				<li>规格与包装</li>
            				<li>售后保障</li>
            				<li>商品评价（50000）</li>
            				<li>手机社区</li>
            			</ul>
            		</div>
            		<div class="detail_tab_con">
            			<div class="item">
            				<ul class="item_info">
            					<li>分辨率：1920*1080(FHD)</li>  
            					<li>后置摄像头：1200万像素</li>
            					<li>前置摄像头：500万像素</li>
            					<li>核 数：其他</li>
            					<li>频 率：以官网信息为准</li>
            					<li>品牌： Apple ♥关注</li>
            					<li>商品名称：APPLEiPhone 6s Plus</li>
            					<li>商品编号：1861098</li>
            					<li>商品毛重：0.51kg</li>
            					<li>商品产地：中国大陆</li>
            					<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
            					<li>系统：苹果（IOS）</li>
            					<li>像素：1000-1600万</li>
            					<li>机身内存：64GB</li>
            				</ul>
            				<p> 
            					<a href="#" class="more">查看更多参数</a>
            				</p>
            				<img src="upload/detail_img1.jpg"/>
            				<img src="upload/detail_img2.jpg"/>
            				<img src="upload/detail_img3.jpg"/>
            			</div>
            		</div>
            	</div>
            </div>
		</div>
		<!--详情页内容部分  结束-->
		
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<!--服务模块--> 
				<div class="mod_service">
					<ul>
						<li>
							<i class="mod_service_icon mod_service_zheng"></i>
							<div class="mod_service_zheng_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_kuai"></i>
							<div class="mod_service_kuai_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_bao"></i>
							<div class="mod_service_bao_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_fu"></i>
							<div class="mod_service_fu_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_bang"></i>
							<div class="mod_service_bang_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
					</ul>
				</div>
				<!--帮助模块-->
				<div class="mod_help">
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item mod_help_app">
						<dt>帮助中心</dt>
						<dd>
							<img src="upload/erweima.png"/>
							<p>品优购客户端</p>
						</dd>
					</dl>
				</div>
				<!--版权模块--> 
				<div class="mod_copyright ">
					<p class="mod_copyright_link">
						<a href="#">关于我们 </a>  |
						<a href="#">联系我们 </a>  |
						<a href="#">联系客服 </a>  |
						<a href="#">商家入驻</a>  |
						<a href="#"> 营销中心 </a>  |
						<a href="#">手机品优购</a>  |
						<a href="#">友情链接 </a>  |
						<a href="#">销售联盟 </a>  |
						<a href="#">品优购社区 </a>  |
						<a href="#">品优购公益 </a>  |
						<a href="#">English Site  </a>  |
						<a href="#">Contact U </a>
					</p>
					<p class="mod_copyright_info">
						地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 
						传真：010-82935100 邮箱: zhanghj+itcast.cn   <br/>  
                                               京ICP备08001421号京公网安备110108007702 
					</p>
				</div>
			</div>
		</div>
		<!--footer结束-->
	</body>
</html>

bsae.css

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消轮廓线 蓝色的*/
    outline: none;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}

.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

common.css

```/*公共样式*/
.fl {
	float: left;
}
.fr {
	float: right;
}
@font-face {
	font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fr .icomoon {
	font-family: 'icomoon';
	font-size: 16px;
	line-height: 26px;
}
/*版心*/
.w {
	width: 1200px;
	margin: 0 auto;
}
.style-red {
	color: #c81623;
}
.spacer {
	width: 1px;
	height: 12px;
	background-color: #666;
	margin: 9px 12px 0;
}
/*顶部快捷导航栏*/
.shortcut {
	height: 31px;
	background-color: #f1f1f1;
	line-height: 31px;
}
.shortcut li {
	float: left;
}
/*header制作*/
.header {
	position: relative;
	height: 105px;
	/*background-color: pink;*/
}
.logo {
	position: absolute;
	top: 25px;
	left: 0;
	height: 56px;
	width: 175px;
/*	background-color: purple;*/
}
.logo a {
	display: block;
	height: 56px;
	width: 175px;
	background: url(../img/logo.png) no-repeat;
	/*隐藏文字
	text-indent: -999px;
	overflow: hidden;*/
	/*隐藏文字*/
	font-size: 0;
}
.search {
	position: absolute;
	top: 25px;
	left: 348px;
}
.text {
	float: left;
	height: 32px;
	/*盒子有宽度,再给一个padding值会撑开盒子,所以需要减去 455-10=445*/
	width: 445px;
	border: 2px solid #b1191a;
	padding-left: 10px;
	color: #ccc;
}
.btn {
	float: left;
	width: 82px;
	height: 36px;
	background-color: #b1191a;
	border: 0;
	font-size: 16px;
	color: #fff;
}	
.hotwords {
	position: absolute;
	top: 65px;
	left: 348px;
}
.hotwords a {
	margin: 0 10px;
}
.shopcar {
	position: absolute;
	top: 25px;
	right: 64px;
	width: 138px;
	height: 34px;
	border: 1px solid #dfdfdf; 
	background-color: #f7f7f7; 
	line-height: 34px;
	text-align: center;
}
.car {
	font-family: 'icomoon';
    color: #da5555;
    margin-right: 5px;
}
.arrow {
	font-family: 'icomoon';
	margin-left: 5px;
}
.count {
	position: absolute;
	top: -5px;
	/*应该是左侧对齐,文字才能往右显示*/
	left: 100px;
	background-color: #e60012;
	height: 14px;
	padding: 0 3px;
	line-height: 14px;
	color: #fff;
	/*border-radius: 左上角  右上角  右下角  左下角;  （高度的一半  14/2=7）*/
	border-radius: 7px 7px 7px 0;
}
/*nav开始*/
.nav {
	height: 45px;
	border-bottom: 2px solid #b1191a;
}
.dorpdown {
	height: 45px;
	width: 209px;
	background-color: pink;
}
.dorpdown .dt {
	height: 45px;
	width: 209px;
	background-color: #b1191a;
	color: #fff;
	font-size: 16px;
	line-height: 45px;
	text-align: center;
}
.dorpdown .dd {
	height: 465px;
	background-color: #c81623;
	margin-top: 2px;
}
.menu_item {
	height: 31px;
	line-height: 31px;
	margin-left: 1px;
	/*浮动的盒子顶不过padding值,一个盒子如果有边框和内边距,浮动的盒子只能贴着内边距里面来显示*/
	padding: 0 10px;
	transition: all 0.5s;
}
.menu_item:hover {
	padding-left: 20px;
}
.menu_item:hover {
	background-color: #fff;
}
/*鼠标经过li里面的a时,a变颜色*/
.menu_item:hover a{
	color: #c81623;
}
.menu_item a {
	font-size: 12px;
	color: #fff;
}	
.menu_item i{
	float: right;
	font-family: 'icomoon';
	font-size: 10px;
	color: #fff;
}
.navitems {
	margin-left: 10px;
}
.navitems li {
	float: left;
}
.navitems li a {
	display: block;
	height: 45px;
	padding: 0 25px;
	line-height: 45px;
	font-size: 16px;
	color: #333;
}
/*footer部分*/
.footer {
	/*有高有padding值,需要减去416-30=386*/
	height: 386px;
	background-color: #f5f5f5;
	padding-top: 30px;
}
.mod_service {
	height: 79px;
	/*background-color: pink;*/
	border-bottom: 1px solid #ccc;
}
.mod_service li {
	float: left;
	width: 240px;
	height: 79px;
}
.mod_service_icon {
	/*浮动的盒子可以直接给大小,不需要转换*/
	float: left;
	width: 50px;
	height: 50px;
	margin-left: 35px;
	background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
	background-position: -253px -3px;
}
.mod_service_zheng_tit {
	float: left;
	margin-left: 10px;
}
.mod_service_zheng_tit h5 {
	margin: 5px 0;
}
.mod_service_kuai {
	background-position: -255px -54px;
}
.mod_service_kuai_tit {
	float: left;
	margin-left: 10px;
}
.mod_service_kuai_tit h5 {
	margin: 5px 0;
}
.mod_service_bao {
	background-position: -256px -105px;
}
.mod_service_bao_tit {
	float: left;
	margin-left: 10px;
}
.mod_service_bao_tit h5 {
	margin: 5px 0;
}
.mod_service_fu {
	background-position: -257px -157px;
}
.mod_service_fu {
	float: left;
	margin-left: 10px;
}
.mod_service_fu h5 {
	margin: 5px 0;
}
.mod_service_bang {
	background-position: -257px -208px;
}
.mod_service_bang {
	float: left;
	margin-left: 10px;
}
.mod_service_bang h5 {
	margin: 5px 0;
}
/*帮助模块*/
.mod_help {
	height: 187px;
	/*background-color: pink;*/
	border-bottom: 1px solid #ccc;
}
.mod_help_item {
	float: left;
	width: 150px;
	padding: 20px 0 0 50px;
}
.mod_help_item dt {
	height: 25px;
	font-size: 16px;
}
.mod_help_item dd {
	height: 22px;
}
.mod_help_app dt,
.mod_help_app p{
	padding-left: 15px;
}
.mod_help_app img {
	margin: 7px 0;
}
.mod_copyright {
	text-align: center;
}
.mod_copyright_link {
	margin: 20px 0 15px 0;
}
.mod_copyright_link a {
	margin: 0 10px;
}
.mod_copyright_info {
	line-height: 25px;
}

dedail.css

/*详情页的样式文件*/
.de_container {
	margin-top: 20px;
}
.crumb_wrap {
	height: 25px;
}
.crumb_wrap a {
	margin-right: 10px ;
}
.preview_wrap {
	width: 400px;
	height: 590px;
}
.preview_img {
	height: 398px;
	border: 1px solid #ccc;
}
.preview_list {
	position: relative;
	height: 60px;
	margin-top: 60px;
}
.list-item {
	width: 320px;
	height: 60px;
	margin:  0 auto;
	/*background-color: purple;*/
}
.list-item li {
	float: left;
	width: 56px;
	height: 56px;
	background-color: skyblue;
	border: 2px solid transparent;
	margin: 0 2px;
}
.list-item li.current {
	border-color: #c81623;
}
.arrow_prev,
.arrow_next {
	position: absolute;
	top: 15px;
	width: 22px;
	height: 32px;
}
.arrow_prev {
	left: 0;
	background: url(../img/arrow-prev.png) no-repeat;
}
.arrow_next {
	right: 0;
	background: url(../img/arrow-next.png) no-repeat;
}
.itemInfo_wrap {
	width: 718px;
}
.sku_name {
	height: 30px;
	font-size: 16px;
	font-weight: 700;
}
.news {
	height: 32px;
	color: #e12228;
}
.summary dl {
	/*清除浮动*/
	overflow: hidden;
}
.summary dt,
.summary dd {
	float: left;
}
.summary dt {
	width: 60px;
	line-height: 36px;
	padding-left: 10px ;
}
.summary_price,
.summary_promotion {
	position: relative;
	padding: 10px 0;
	background-color: #fee9eb;
}
.summary_price a {
	color: #c81623;
}
.price {
	font-size: 24px;
	color: #e12228;
}
.remark {
	position: absolute;
	right: 10px;
	top: 20px;
}
.summary_promotion {
	padding-top: 0;
}
.summary_promotion dd {
	width: 460px;
	line-height: 36px;
}
.summary_promotion em {
	display: inline-block;
	width: 40px;
	height: 22px;
	text-align: center;
	line-height: 22px;
	color: #fff;
	background-color: #c81623 ;
}
.summary_support dd {
	line-height: 36px;
}
.choose_color a {
	display: inline-block;
	width: 80px;
	height: 40px;
	border: 1px solid #ededed;
	background-color: #f7f7f7;
	text-align: center;
	line-height: 40px;
}
.summary a.current {
	border-color: #c81623;
}
/*.choose_color a.current {
	border-color: #c81623;
}*/
.choose_version {
	margin: 10px 0;
}
.choose_version a,
.choose_type a  {
	display: inline-block;
	height: 32px;
	padding: 0 12px;
	border: 1px solid #ededed;
	background-color: #f7f7f7;
	text-align: center;
	line-height: 32px;
}
/*.choose_version a.current {
	border-color: #c81623;
}
.choose_type a.current {
	border-color: #c81623;
}*/
.choose_btns {
	margin-top: 20px;
}
.choose_amount {
	position:relative;
	float: left;
	width: 50px;
	height: 46px;
	background-color: pink;
}
.choose_amount input {
	width: 33px;
	height: 44px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 44px;
}
.add,
.reduce {
	position: absolute;
	right: 0;
	width: 15px;
	height: 22px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	text-align: center;
	line-height: 22px;
}
.add {
	top: 0;
}
.reduce {
	bottom: 0;
	/*禁止鼠标样式*/
	cursor: not-allowed;      /*pointer 小手    move移动*/
}
.addshopcar {
	float: left;
	width: 142px;
	height: 46px;
	background-color: #c91423;
	text-align: center;
	line-height: 46px;
	font-size: 18px;
	color: #fff3e8;
	margin-left: 10px;
	font-weight: 700;
}
.product_detail {
	margin-bottom: 50px;
}
.aside {
	width: 208px;
	border: 1px solid #ccc;
}
.tab_list {
	height: 34px;
}
/*把背景颜色和底边框都给了li*/
.tab_list li {
	float: left;
	height: 33px;
	background-color: #f1f1f1;
	border-bottom: 1px solid #ccc;
	text-align: center;
	line-height: 33px;
}
/*鼠标点击li,变换样式：背景变为白色，去掉下边框，文字变颜色*/
.tab_list .current {
	background-color: white;
	border-bottom: 0;
	color: red;
}
.first_table {
	width: 104px;
}
.second_table {
	width: 103px;
	border-left: 1px solid #ccc;
}
.tab_con {
	padding: 0 10px;
}
.tab_con li {
	border-bottom: 1px solid #ccc;
}
.tab_con li h5 {
	/*超出的文字省略号显示*/
	/*1.强制一行内显示*/
	white-space: nowrap;
	/*2.溢出隐藏*/
	overflow: hidden;
	/*3.溢出的文字用省略号显示*/
	text-overflow: ellipsis;
	font-weight: 400;
}
.aside_price {
	font-weight: 700;
	margin: 10px 0;
}
.aside_addshopcar {
	display: block;
	width: 88px;
	height: 26px;
	border: 1px solid #ccc;
	background-color: #f8f8f8;
	margin: 10px auto;
	text-align: center;
	line-height: 26px;
}
.detail {
	width: 978px;
}
.detail_tab_list {
	height: 39px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}
.detail_tab_list li {
	/*浮动的盒子和内容一样大*/
	float: left;
	height: 39px;
	line-height: 39px;
	text-align: center;
	padding: 0 20px;
	cursor: pointer;
}
.detail_tab_list .current {
	background-color: #C81623;
	color: #fff;
}
.item_info {
	padding: 20px 0 0 20px;
}
.item_info li {
	line-height: 22px;
}
.more {
	float: right;
	font-family: 'icomoon';
	font-weight: 700;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
		<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居
		百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
		<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,
		手表,存储卡,品优购" />
		<!--引入favicon.ico网页图标-->
		<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>  
		<!--引入css 初始化的css文件-->
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<!--引入公共样式的的css文件-->
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!--引入首页的css文件-->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--顶部快捷导航栏  开始-->
		<div class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎您！</li>
						<li>
							<a href="#">请登录</a> 
							<a href="#" class="style-red">免费注册</a>
						</li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li><a href="#">我的订单</a></li>
						<li class="spacer"></li>
						<li>
							<a href="#">我的品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li><a href="#">品优购会员</a></li>
						<li class="spacer"></li>
						<li><a href="#">企业采购</a></li>
						<li class="spacer"></li>
						<li>
							<a href="#">关注品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li>
							<a href="#">客户服务</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li>
							<a href="#">网站导航</a>
							<i class="icomoon"></i>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--顶部快捷导航栏  结束-->
		<!--header开始-->
		<div class="header w">
			<!--logo-->
			<div class="logo">
				<h1>
					<a href="index.html" title="品优购">品优购</a>
				</h1>
			</div>
			<!--search-->
			<div class="search">
				<input type="text" class="text" value="请搜索内容"/>
				<button class="btn">搜索</button>
			</div>
			<!--hotwords-->
		    <div class="hotwords">
		    	<a href="#" class="style-red">优惠购首发</a>
		    	<a href="#">亿元优惠</a>
		    	<a href="#">9.9元团购</a>
		    	<a href="#">美满99减30</a>
		    	<a href="#">办公用品</a>
		    	<a href="#">电脑</a>
		    	<a href="#">通信</a>
		    </div>	
		<!--shopcar-->
		<div class="shopcar">
			<i class="car"></i>我的购物车<i class="arrow"></i>
			<i class="count">8</i>
		</div>
		</div>
		<!--header结束-->
		<!--nav开始-->
		<div class="nav">
			<div class="w">
				<div class="dorpdown fl">
					<div class="dt">全部商品分类</div>
					<div class="dd">
						<ul>
							<li class="menu_item"><a href="#">家用电器</a>
								<i></i>
							</li>
							<li class="menu_item">
								<a href="list.html">手机 </a>  、
								<a href="#">数码</a>  、
								<a href="#">通信</a>    
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">电脑</a>  、
								<a href="#">办公</a>      
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">家居</a>  、
								<a href="#">家具 </a>  、 
								<a href="#">家装 </a>   、 
								<a href="#">厨具 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">男装</a>  、
								<a href="#">女装</a>  、  
								<a href="#">童装 </a>  、  
								<a href="#">内衣 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">个户化妆</a>  、
								<a href="#">清洁用品 </a>  、
								<a href="#">宠物 </a>
								<i></i>  
							</li>
							<li class="menu_item">
								<a href="#">鞋靴</a>  、
								<a href="#">箱包 </a>  、
								<a href="#">珠宝 </a>  、
								<a href="#">奢侈品 </a>
								<i></i>
							</li>
							</li>
							<li class="menu_item">
								<a href="#">运动户外</a>  、
								<a href="#">钟表 </a>      
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">汽车</a>  、
								<a href="#">汽车用品 </a>   
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">母婴</a>  、
								<a href="#">玩具乐器 </a>      
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">食品</a>  、
								<a href="#">酒类 </a>  、 
								<a href="#">生鲜 </a>  、
								<a href="#">特产 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">医药保健 </a>   
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">图书</a>  、
								<a href="#">音像 </a>  、
								<a href="#">电子书</a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">彩票</a>  、
								<a href="#">旅行 </a>  、 
								<a href="#">充值 </a>  、 
								<a href="#">票务 </a>     
								<i></i>
							</li>
							<li class="menu_item">
								<a href="#">理财 </a>  、
								<a href="#">众筹 </a>  、 
								<a href="#">白条</a>  、
								<a href="#">保险 </a>     
								<i></i>
							</li>
						</ul>
					</div>
				</div>
				<!--右侧导航-->
				<div class="navitems fl">
					<ul>
						<li><a href="#">服装城</a></li>
						<li><a href="#">美妆馆</a></li>
						<li><a href="#">传智超市</a></li>
						<li><a href="#">全球购</a></li>
						<li><a href="#">闪购</a></li>
						<li><a href="#">团购</a></li>
						<li><a href="#">拍卖</a></li>
						<li><a href="#">有趣</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--nav结束-->
		<!--main开始-->
		<div class="w">
			<div class="main">
				<div class="focus fl">
					<!--左、右按钮-->
					<a href="#" class="arrow-l"></a>
					<a href="#" class="arrow-r"></a>
					<ul>
						<li>
							<a href="#"><img src="upload/focus.jpg"/></a>
						</li>
					</ul>
					<ol class="circle">
						<li></li>
						<li class="current"></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ol>
				</div>
				<div class="newsflash fr">
					<div class="news">
						<div class="news-hd">
							品优购快报
							<a href="#">更多 </a>
						</div>
						<div class="news-bd">
							<ul>
								<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
								<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
								<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
								<li><a href="#">【特惠】9.9元洗100张照片！</a></li>
								<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
							</ul>
						</div>
					</div>
					<div class="lifeservice">
						<ul>
							<li>
								<a href="#">
									<i class="service_ico service_ico_huafei"></i>
									<p>话费</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_feiji"></i>
									<p>飞机</p>
								</a>
								<span class="hot"></span>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_dianyingpiao"></i>
									<p>电影票</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_youxi"></i>
									<p>游戏</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_caipiao"></i>
									<p>彩票</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_jiayouka"></i>
									<p>加油卡</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_jiudian"></i>
									<p>酒店</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_huochepiao"></i>
									<p>火车票</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_zhongchou"></i>
									<p>众筹</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_licai"></i>
									<p>理财</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_lipin"></i>
									<p>礼品</p>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="service_ico service_ico_baitiao"></i>
									<p>白条</p>
								</a>
							</li>
						</ul>
					</div>
					<div class="bargain">
						<img src="upload/bargain.jpg"/>
					</div>
				</div>
			</div>
		</div>
		<!--main结束-->
		<!--推荐服务模块 开始-->
		<div class="recommend w">
			<div class="recom-hd fl">
				<img src="img/clock.png"/>
				<h3>今日推荐</h3>
			</div>
			<div class="recom-bd fr">
				<ul>
					<li>
						<a href="#">
							<img src="upload/pic.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="upload/pic.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="upload/pic.jpg"/>
						</a>
					</li>
					<li class="last">
						<a href="#">
							<img src="upload/pic.jpg"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!--推荐服务模块 结束-->
		<!--楼层区开始-->
		<div class="floor">
			<div class="jiadian w">
				<div class="box-hd">
					<h3>家用电器</h3>
					<div class="tab-list fr">
						<ul>
							<li><a href="#" class="style-red">热门</a>|</li>  
							<li><a href="#">大家电</a>|</li>  
							<li><a href="#">生活电器</a>|</li>  
							<li><a href="#">厨房电器</a>|</li>  
							<li><a href="#">个护健康</a>|</li>  
							<li><a href="#">应季电器</a>|</li>  
							<li><a href="#">空气/净水</a>|</li>  
							<li><a href="#">新奇特</a>|</li>  
							<li><a href="#">高端电器</a></li>  
						</ul>
					</div>
				</div>
			    <div class="box-bd ">
			    	<ul class="tab-con">
			    		<li class="w209">
			    			<ul class="tab-con-list">
			    				<li>
			    					<a href="#">节能补贴</a>
			    				</li>
			    				<li>
			    					<a href="#">4K电视</a>
			    				</li>
			    				<li>
			    					<a href="#">空气净化器 </a>
			    				</li>
			    				<li>
			    					<a href="#">IH电饭煲 </a>
			    				</li>
			    				<li>
			    					<a href="#">滚筒洗衣机 </a>
			    				</li>
			    				<li>
			    					<a href="#">电热水器 </a>
			    				</li>
			    			</ul>
			    			<img src="upload/floor-1-1.png"/>
			    		</li>
			    		<li class="w329">
			    			<img src="upload/pic1.jpg"/>
			    		</li>
			    		<li class="w219">
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-2.png"/>
			    				</a>
			    			</div>
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-3.png"/>
			    				</a>
			    			</div>
			    		</li>
			    		<li class="w220">
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-4.png"/>
			    				</a>
			    			</div>
			    		</li>
			    		<li class="w220">
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-5.png"/>
			    				</a>
			    			</div>
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-6.png"/>
			    				</a>
			    			</div>
			    		</li>
			    	</ul>
			    </div>
			</div>
			<div class="shouji w">
				<div class="box-hd">
					<h3>手机通讯</h3>
					<div class="tab-list fr">
						<ul>
							<li><a href="#" class="style-red">热门</a>|</li>  
							<li><a href="#">大家电</a>|</li>  
							<li><a href="#">生活电器</a>|</li>  
							<li><a href="#">厨房电器</a>|</li>  
							<li><a href="#">个护健康</a>|</li>  
							<li><a href="#">应季电器</a>|</li>  
							<li><a href="#">空气/净水</a>|</li>  
							<li><a href="#">新奇特</a>|</li>  
							<li><a href="#">高端电器</a></li>  
						</ul>
					</div>
				</div>
			    <div class="box-bd ">
			    	<ul class="tab-con">
			    		<li class="w209">
			    			<ul class="tab-con-list">
			    				<li>
			    					<a href="#">节能补贴</a>
			    				</li>
			    				<li>
			    					<a href="#">4K电视</a>
			    				</li>
			    				<li>
			    					<a href="#">空气净化器 </a>
			    				</li>
			    				<li>
			    					<a href="#">IH电饭煲 </a>
			    				</li>
			    				<li>
			    					<a href="#">滚筒洗衣机 </a>
			    				</li>
			    				<li>
			    					<a href="#">电热水器 </a>
			    				</li>
			    			</ul>
			    			<img src="upload/floor-1-1.png"/>
			    		</li>
			    		<li class="w329">
			    			<img src="upload/pic1.jpg"/>
			    		</li>
			    		<li class="w219">
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-2.png"/>
			    				</a>
			    			</div>
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-3.png"/>
			    				</a>
			    			</div>
			    		</li>
			    		<li class="w220">
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-4.png"/>
			    				</a>
			    			</div>
			    		</li>
			    		<li class="w220">
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-5.png"/>
			    				</a>
			    			</div>
			    			<div class="tab-con-item">
			    				<a href="#">
			    					<img src="upload/floor-1-6.png"/>
			    				</a>
			    			</div>
			    		</li>
			    	</ul>
			    </div>
			</div>
		</div>
		<!--楼层区结束-->
		<!--固定电梯导航开始-->
		<div class="fixedtool">
			<ul>
				<li class="current">家用电器</li>
				<li>手机通讯</li>
				<li>电脑办公</li>
				<li>家具家居</li>
				<li>生活用品</li>
				<li>运动户外</li>
				<li>汽车用品</li>
				<li>食品酒类</li>
				<li>医药保健</li>
				<li>图书音像</li>
				<li>金融彩票</li>
			</ul>
		</div>
		<!--固定电梯导航结束-->
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<!--服务模块--> 
				<div class="mod_service">
					<ul>
						<li>
							<i class="mod_service_icon mod_service_zheng"></i>
							<div class="mod_service_zheng_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_kuai"></i>
							<div class="mod_service_kuai_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_bao"></i>
							<div class="mod_service_bao_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_fu"></i>
							<div class="mod_service_fu_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_bang"></i>
							<div class="mod_service_bang_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
					</ul>
				</div>
				<!--帮助模块-->
				<div class="mod_help">
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item mod_help_app">
						<dt>帮助中心</dt>
						<dd>
							<img src="upload/erweima.png"/>
							<p>品优购客户端</p>
						</dd>
					</dl>
				</div>
				<!--版权模块--> 
				<div class="mod_copyright ">
					<p class="mod_copyright_link">
						<a href="#">关于我们 </a>  |
						<a href="#">联系我们 </a>  |
						<a href="#">联系客服 </a>  |
						<a href="#">商家入驻</a>  |
						<a href="#"> 营销中心 </a>  |
						<a href="#">手机品优购</a>  |
						<a href="#">友情链接 </a>  |
						<a href="#">销售联盟 </a>  |
						<a href="#">品优购社区 </a>  |
						<a href="#">品优购公益 </a>  |
						<a href="#">English Site  </a>  |
						<a href="#">Contact U </a>
					</p>
					<p class="mod_copyright_info">
						地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 
						传真：010-82935100 邮箱: zhanghj+itcast.cn   <br/>  
                                               京ICP备08001421号京公网安备110108007702 
					</p>
				</div>
			</div>
		</div>
		<!--footer结束-->
	</body>
</html>

index.css

/*这个文件里放的是首页的样式*/
.main {
	width: 980px;
	height: 455px;
	/*background-color: pink;*/
	margin: 10px 0 0 219px;
}
.focus {
	position: relative;
	width: 720px;
	height: 455px;
	background-color: purple;
}
.arrow-l,
.arrow-r {
	position: absolute;
	/*垂直居中:top：50%,再往上走自己高度的一半*/
	top: 50%;
	margin-top: -20px;
	width: 24px;
	height: 40px;
	background: rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-family: 'icomoon';
	font-size: 18px;
}
.arrow-r {
	right: 0;
}
.circle {
	position: absolute;
	bottom: 10px;
	left: 50px;
}
.circle li {
	float: left;
	width: 8px;
	height: 8px;
	/*background-color: #fff;*/
	border: 2px solid rgba(255, 255, 255, .5);
	margin: 0 3px;
	border-radius: 50%;
	/*鼠标经过显示小手*/
	cursor: pointer;
}
.current {
	background-color: #fff;
}
.newsflash {
	width: 250px;
	height: 455px;
	/*background-color: skyblue;*/
}
.news {
	height: 163px;
	border: 1px solid #ccc;
	/*background-color: pink;*/
}
.news-hd {
	height: 32px;
	/*dotted点线  dashed虚线*/
	border-bottom: 1px dotted #ccc;
	font-size: 14px;
	line-height: 32px;
	padding-left: 15px;
}
.news-hd a {
	float: right;
	padding: 0 15px;
	font-size: 12px;
	font-family: 'icomoon';
}
.news-bd {
	padding: 10px 0 0 15px; 
}
.news-bd li {
	height: 23px;
}
.lifeservice {
	/*溢出隐藏*/
	overflow: hidden;
	height: 208px;
	/*background-color: purple;*/
	border: 1px solid #ccc;
	border-top: none;
}
.lifeservice ul {
	width: 252px;
}
.lifeservice li {
	position: relative;
	float: left;
	width: 62px;
	height: 70px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.lifeservice li a {
	display: block;
	/*因为a是块级元素，i也是块级元素，i有margin值，所以把大盒子给带下来了
	     所以overflow：hidden  解决i引起的外边距塌陷合并的问题*/
	overflow: hidden;
	height: 100%;
}
.service_ico {
	display: block;
	width: 24px;
	height: 24px;
	/*background-color: pink;*/
	background: url(../img/icons.png);
	margin: 10px auto;
}
.service_ico_huafei {
	background-position: -17px -16px;
}
.service_ico_feiji {
	background-position: -78px -16px;
}
.service_ico_dianyingpiao {
	background-position: -140px -16px;
}
.service_ico_youxi {
	background-position: -206px -16px;
}
.service_ico_caipiao {
	background-position: -17px -89px;
}
.service_ico_jiayouka {
	background-position: -79px -89px;
}
.service_ico_jiudian {
	background-position: -140px -89px;
}
.service_ico_huochepiao {
	background-position: -206px -89px;
}
.service_ico_zhongchou {
	background-position: -17px -159px;
}
.service_ico_licai {
	background-position: -78px -159px;
}
.service_ico_lipin {
	background-position: -140px -159px;
}
.service_ico_baitiao {
	background-position: -206px -159px;
}
.lifeservice li p {
	text-align: center;
}
.hot {
	position: absolute;
	right: 0;
	top: 0;
	width: 12px;
	height: 15px;
	background: url(../img/jian.jpg) no-repeat;
}
.bargain {
	height: 75px;
	margin-top: 5px;
}
/*推荐服务模块*/
.recommend {
	height: 163px;
	/*background-color: pink;*/
	margin-top: 10px;
}
.recom-hd {
	width: 180px;
	height: 163px;
	background-color: #5c5251;
	text-align: center;
}
.recom-hd img {
	margin: 30px 0 10px 0;
}
.recom-hd h3 {
	font-size: 18px;
	color: #fff;
	/*字体不加粗,font-weight:normal*/
	font-weight: 400;
}
.recom-bd {
	width: 1020px;
	height: 163px;
	background-color: #ebebeb;
}
.recom-bd li {
	float: left;
	width: 249px;
	height: 145px;
	border-right: 1px solid #ccc;
/*	background-color: pink;*/
	margin-top: 10px;
}
.recom-bd .last {
	border-right: 0;
}
/*floor楼层区*/
.box-hd {
	height: 30px;
	/*background-color: pink;*/
	border-bottom: 2px solid #c81623;
	margin-top: 25px;
}
.box-hd h3 {
	float: left;
	color: #c81623;
	font-size: 18px;
}	
.tab-list {
	float: right;
	line-height: 30px;
}
.tab-list li {
	float: left;
}
.tab-list li a {
	margin: 0 15px;
}
.box-bd {
	height: 360px;
	/*background-color: pink;*/
}
.w209 {
	width: 209px;
	background-color: #f9f9f9 ;
}
.w329 {
	width: 329px;
}
.w219 {
	width: 219px;
	border-right: 1px solid #ccc;
}
.w220 {
	width: 220px;
	border-right: 1px solid #ccc;
}
.tab-con li {
	float: left;
	height: 360px;
}
.tab-con-item {
	border-bottom: 1px solid #ccc;
}
.tab-con-list {
	/*父亲没有高度,孩子又浮动了,所以需要清除浮动*/
	overflow: hidden;
	margin-bottom: 15px;
}
.tab-con-list  li{
	width: 86px;
	height: 32px;
	line-height: 32px;
	border-bottom: 1px solid #CCC;
	margin-left: 10px;
	text-align: center;
}
/*电梯导航*/
.box-bd  li {
	overflow: hidden;
}
.box-bd  img {
	/*过渡写在本身上,谁做动画,给谁加*/
	transition: all 0.2s;
}
/*鼠标经过图片往右走8px*/
.box-bd  img:hover {
	margin-left: 8px;
}
.fixedtool {
	position: fixed;
	top: 100px;
	/*要紧贴版心:先走整个浏览器的一半,再走版心的一半,再走自己宽度 1200/2+66=666*/
	left: 50%;
	margin-left: -676px;
	width: 66px;
	background-color: #fff;
}
.fixedtool li {
	height: 32px;
	text-align: center;
	line-height: 32px;
	font-size: 12px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
.fixedtool .current {
	background-color: #C81623;
	color: #fff;
}

list.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表页-手机页面！</title>
		<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居
		百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
		<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,
		手表,存储卡,品优购" />
		<!--引入favicon.ico网页图标-->
		<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>  
		<!--引入css 初始化的css文件-->
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<!--引入公共样式的的css文件-->
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!--引入列表页面的css文件-->
		<link rel="stylesheet" type="text/css" href="css/list.css"/>
	</head>
	<body>
		<!--顶部快捷导航栏  开始-->
		<div class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎您！</li>
						<li>
							<a href="#">请登录</a> 
							<a href="#" class="style-red">免费注册</a>
						</li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li><a href="#">我的订单</a></li>
						<li class="spacer"></li>
						<li>
							<a href="#">我的品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li><a href="#">品优购会员</a></li>
						<li class="spacer"></li>
						<li><a href="#">企业采购</a></li>
						<li class="spacer"></li>
						<li>
							<a href="#">关注品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li>
							<a href="#">客户服务</a>
							<i class="icomoon"></i>
						</li>
						<li class="spacer"></li>
						<li>
							<a href="#">网站导航</a>
							<i class="icomoon"></i>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--顶部快捷导航栏  结束-->
		<!--header开始-->
		<div class="header w">
			<!--logo-->
			<div class="logo">
				<h1>
					<a href="index.html" title="品优购">品优购</a>
				</h1>
			</div>
			<!--sk-->
			<div class="sk">
				<img src="upload/sk.png"/>
			</div>
			<!--search-->
			<div class="search">
				<input type="text" class="text" value="请搜索内容"/>
				<button class="btn">搜索</button>
			</div>
			<!--hotwords-->
		    <div class="hotwords">
		    	<a href="#" class="style-red">优惠购首发</a>
		    	<a href="#">亿元优惠</a>
		    	<a href="#">9.9元团购</a>
		    	<a href="#">美满99减30</a>
		    	<a href="#">办公用品</a>
		    	<a href="#">电脑</a>
		    	<a href="#">通信</a>
		    </div>	
		<!--shopcar-->
		<div class="shopcar">
			<i class="car"></i>我的购物车<i class="arrow"></i>
			<i class="count">8</i>
		</div>
		</div>
		<!--header结束-->
		<!--nav开始-->
		<div class="nav">
			<div class="w">
				<div class="sk_list fl">
					<ul>
						<li><a href="#">品优秒杀</a></li>
						<li><a href="#">即将售罄</a></li>
						<li><a href="#">超值低价</a></li>
					</ul>
			    </div>
			    <div class="sk_con fl">
			    	<ul>
			    		<li><a href="#">女装</a></li>
					    <li><a href="#" class="style-red">女鞋</a></li>
					    <li><a href="#">男装</a></li>
					    <li><a href="#">男鞋</a></li>
					    <li><a href="#">母婴童装</a></li>
					    <li><a href="#">食品</a></li>
					    <li><a href="#">智能数码</a></li>
					    <li><a href="#">运动户外</a></li>
					    <li><a href="#">更多分类</a></li>
				    </ul>
				</div>
			</div>
		</div>
		<!--nav结束-->
		<!--列表页的内容区域 开始-->
		<div class="sk_container w">
			<div class="sk_hd">
				<img src="upload/bg_03.png"/>
			</div>
			<!--li的父亲叫sk_bd，没有高度，又有孩子，所以肯定有浮动问题，所以清除浮动-->
			<div class="sk_bd clearfix">
				<ul>
					<li class="sk_goods">
						<a href="detail.html">
							<img src="upload/mobile.jpg"/>
							<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						</a>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
					<li class="sk_goods">
						<img src="upload/mobile.jpg"/>
						<h5 class="sk_goods_title ">Apple苹果iPhone 6s Plus（A1699）32G 金色 
							移动联通电信4G手机</h5>
						<p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p>
						<div class="sk_goods_progress">
							已售<i>87%</i>
							<div class="bar">
								<div class="bar_in"></div>
							</div>
							剩余<em>29</em>件
						</div>
						<a href="#" class="sk_goods_buy">立即抢购</a>
					</li>
				</ul>
			</div>
			<!--分页制作 开始-->
		    <div class="page">
		    	<span class="page_num">
		    		<a href="#" class="pn_prev">&lt; &lt;上一页</a>
		    		<a href="#">1</a>
		    		<a href="#" class="current">2</a>
		    		<a href="#">3</a>
		    		<a href="#">4</a>
		    		<a href="#">5</a>
		    		<a href="#" class="dotted">...</a>
		    		<a href="#" class="pn_next">下一页&gt;&gt;</a>
		    	</span>
			    <span class="page_skip">
			    	共10页 到第
			    	<input type="text"/>
			    	页
			    	<button>确定</button>
			    </span>
		    </div>
		    <!--分页制作 结束-->
		</div>
		<!--列表页的内容区域 结束-->
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<!--服务模块--> 
				<div class="mod_service">
					<ul>
						<li>
							<i class="mod_service_icon mod_service_zheng"></i>
							<div class="mod_service_zheng_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_kuai"></i>
							<div class="mod_service_kuai_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_bao"></i>
							<div class="mod_service_bao_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_fu"></i>
							<div class="mod_service_fu_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod_service_icon mod_service_bang"></i>
							<div class="mod_service_bang_tit">
								<h5>正品保障</h5>
								<p>正品保障，提供发票</p>
							</div>
						</li>
					</ul>
				</div>
				<!--帮助模块-->
				<div class="mod_help">
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍  </a></dd>
						<dd><a href="#">生活旅行/团购 </a></dd>
						<dd><a href="#">常见问题 </a></dd>
						<dd><a href="#">大家电 </a></dd>
						<dd><a href="#">联系客服 </a></dd>
					</dl>
					<dl class="mod_help_item mod_help_app">
						<dt>帮助中心</dt>
						<dd>
							<img src="upload/erweima.png"/>
							<p>品优购客户端</p>
						</dd>
					</dl>
				</div>
				<!--版权模块--> 
				<div class="mod_copyright ">
					<p class="mod_copyright_link">
						<a href="#">关于我们 </a>  |
						<a href="#">联系我们 </a>  |
						<a href="#">联系客服 </a>  |
						<a href="#">商家入驻</a>  |
						<a href="#"> 营销中心 </a>  |
						<a href="#">手机品优购</a>  |
						<a href="#">友情链接 </a>  |
						<a href="#">销售联盟 </a>  |
						<a href="#">品优购社区 </a>  |
						<a href="#">品优购公益 </a>  |
						<a href="#">English Site  </a>  |
						<a href="#">Contact U </a>
					</p>
					<p class="mod_copyright_info">
						地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 
						传真：010-82935100 邮箱: zhanghj+itcast.cn   <br/>  
                                               京ICP备08001421号京公网安备110108007702 
					</p>
				</div>
			</div>
		</div>
		<!--footer结束-->
	</body>
</html>

list.css

/*列表页面的css*/
.sk {
	position: absolute;
	top: 40px;
	left: 185px;
	height: 32px;
	border-left: 2px solid #b1191a;
	padding: 5px 0 0 15px;
}
.sk_list li {
	float: left;
	height: 45px;
	line-height: 45px;
	margin: 0 30px;
}
.sk_list li a {
	font-size: 16px;
	color: #000000;
	font-weight: 700;
}
.sk_list li a:hover {
	color: #c81523;
}
.sk_con li {
	float: left;
	height: 45px;
	line-height: 45px;
	margin: 0 20px;
}
.sk_con li a {
	font-size: 14px;
	font-weight: 700;
	font-family: 'icomoon';
}
/*列表页的内容区域*/
.sk_bd {
	margin-top: 25px;
}
.sk_bd ul {
	/*给父盒子加足够宽*/
	width: 1212px;
}
.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;
	font-weight: normal;
	color: #666;
	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 10px;
	border-radius: 5px;
}
.bar_in {
	width: 87%;
	height: 10px;
	background-color: #ed282e;
}
.sk_goods_progress i,
.sk_goods_progress em {
	color: #ed282e;
}
.sk_goods_buy {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	font-size: 20px;
	background-color: #b1191a;
	text-align: center;
	line-height: 50px;
	
}
.page {
	/*里面的文字、行内块、 行内元素  都可以居中对齐*/
	text-align: center;
	margin: 40px 0;
}
.page_num a {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 1px solid #ccc; 
	background-color: #f7f7f7;
	line-height: 36px;
}
.page_num .pn_prev,
.page_num .pn_next {
	width: 83px;
}
.page_num .dotted,
.page_num .current {
	border: 1px solid transparent;
	background-color: transparent;
}
.page_skip input {
	width: 46px;
	height: 36px;
	border: 1px solid #ccc; 
	text-align: center;
	/*过渡写在本身上，谁做动画给谁加*/
	transition: all 0.3s;
}
/*表单获得焦点后*/
.page_skip input:focus {
	width: 88px;
	border: 1px solid skyblue;
}
.page_skip button {
	width: 54px;
	height: 36px;
	border: 1px solid #ccc; 
	background-color: #f7f7f7;
}

register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<!--引入css 初始化的css文件-->
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<!--引入register文件-->
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<div class="w">
			<!--header-->
			<div class="header">
				<div class="logo">
					<a href="index.html">
						<img src="img/logo.png"/>
					</a>
				</div>
			</div>
			<!--registerarea-->
			<div class="registerarea">
				<h3>
					注册新用户
					<em>
						我有账号，去<a href="login.html">登陆</a>
				    </em>
				</h3>
				<div class="reg-form">
					<form action="demo.php">
						<ul>
						<li>
							<label for="tel">手机号：</label>
							<input type="text" class="inp" id="tel"/>
							<span class="error">
								<i class="error_icon"></i>
								手机号码格式不正确，请从新输入
							</span>
						</li>
						<li>
							<label for="duanxin">短信验证码:</label>
							<input type="text" class="inp" id="duanxin"/>
						</li>
						<li>
							<label for="mima">登录密码: </label>
							<input type="text" class="inp" id="mima"/>
							<span class="success">
								<i class="success_icon"></i>
								恭喜您，输入正确
							</span>
						</li>
						<li class="safe">
							安全程度  
							<em class="ruo">弱</em>
							<em class="zhong">中</em>
							<em class="qiang">强</em>
						</li>
						<li>
							<label for="querenmima">确认密码:</label>
							<input type="text" class="inp" id="querenmima"/>
							<span class="error">
								<i class="error_icon"></i>
								手机号码格式不正确，请从新输入
							</span>
						</li>
						<li class="agree">
							<input type="checkbox" />
							同意协议并注册 
							<a href="#">《知果果用户协议》</a>
						</li>
						<li>
							<input type="submit" value="完成注册"  class="over"/>
						</li>
					</ul>
					</form>
				</div>
			</div>
		    <!--footer-->
		    <div class="footer">
		    	<p class="links">
		    		关于我们 | 联系我们 | 联系客服 | 商家入驻 | 
		    	        营销中心 | 手机品优购 | 友情链接 | 销售联盟 |
		    	        品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p class="copyright">
                	地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 
                	传真：010-82935100 邮箱: zhanghj+itcast.cn   <br />
                                        京ICP备08001421号京公网安备110108007702
                </p>
		    </div>
		</div>
	</body>
</html>

register.css

.w {
	width: 1200px;
	margin: 0 auto;
}
.header {
	height: 82px;
	border-bottom: 2px solid #b1191a;
}
.logo {
	/*header盒子下面又有一个logo盒子,如果用margin-top会引起外边距合并*/
	padding-top: 15px;
}
.registerarea {
	height: 520px;
	border: 1px solid #ccc;
	margin-top: 20px ;
}
.registerarea h3 {
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	font-weight: 400;
	border-bottom: 1px solid #ccc;
	background-color: #ececec;
	padding: 0 10px;
}
.registerarea h3 em {
	float: right;
	font-size: 14px;
}
.registerarea a {
	color: #c81623;
}
.reg-form {
	width: 600px;
	height: 400px;
	margin: 40px auto 0;
}
.reg-form label {
	display: inline-block;
	width: 100px;
	height: 36px;
	line-height: 36px;
	/*文字右对齐*/
	text-align: right;
}
.inp {
	width: 238px;
	height: 34px;
	border: 1px solid #ccc;
	margin-left: 10px;
}
.reg-form li {
	margin-bottom: 15px ;
}
.error {
	color: #df3033;
	margin-left: 10px;
}
.error_icon {
	/*因为i是行内元素,没有大小,需转化为行内块*/
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/error.png) no-repeat;
	/*行内块和文字居中对齐,出现行内块的地方,一般都会出现vertical-align: middle;*/
	vertical-align: middle;
	margin-top: -2px;
}
.success {
	color: #40b83f;
	margin-left: 10px;
}
.success_icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/success.png) no-repeat;
	vertical-align: middle;
	margin-top: -2px;
}
.safe {
	padding-left: 187px;
	color: #d3d3d3;
}
.safe em {
	padding: 0 12px;
	color: #fff;
}
.ruo {
	background-color: #de1111;
}
.zhong {
	background-color: #40b83f;
}
.qiang {
	background-color: #f79100;
}
.agree {
	padding-top: 20px;
	padding-left: 100px;
}
.agree input {
	/*因为input本身是行内块元素*/
	vertical-align: middle;
	margin-right: 5px;
}
.agree a {
	color: #1ba1e6;
}
.over {
	width: 200px;
	height: 34px;
	background-color: #c81623;
	border: 0;
	color: #fff;
	font-size: 14px;
	margin: 30px 0 0 130px ;
}
.footer {
	height: 120px;
	text-align: center;
}
.links {
	margin-top: 20px;
	height: 30px;
}
.copyright {
	line-height: 20px;
}

upload文件夹
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
img文件夹
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

艺术就是派大星＿
关注
2017品优购项目实战视频百度网盘
06-20
2017品优购项目实战视频，百度网盘下载，Java互联网技术视频资料
32.项目实战-品优购
虽然但是
12-14 1014
品优购
前端与移动开发----购物商城案例（品优购PC项目上）
東三城的博客
10-26 3687
品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划 网站制作流程 原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容 效果图：告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等 品优购项目介绍 项目名称：品优购 项目描述：品优购是一个电商网站，我
2018最新大型B2B2C电子商务综合平台品优购项目实战
qq_43668963的博客
11-12 1193
1.分布式框架Dubbox、 3 使用select2多选下拉框组件、  5 使用《黑马程序员代码生成器2.4》生成代码、 7 采用BCrypt加密算法、  9 使用Spring Data Solr框架操作solr 、 11 新增SPU和SKU的讲解、  13 新增阿里大于短信发送功能、  15 使用CORS实现跨域、  17 新增微信扫码支付、  19 使用SpringTask实现任务调度、 ...
黑马49期（完整版） 品优购分布式电商项目全套视频及源码
09-26
黑马49期 品优购分布式电商项目全套视频及源码 、
java品优购项目实战视频教程
09-18
品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后...
pinyougou:品优购项目实战
04-28
品优购项目学习笔记 一个综合性的 B2B2C 的电商网站系统。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。 ...
HTML+CSS+JavaScript进行的品优购项目实战.zip
最新发布
08-24
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，...
pinyougou:HTML+CSS+JavaScript进行的品优购项目实战
05-29
品优购项目总结本次项目一共实现了7个界面，包括首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页、商品详情页等界面。项目展示首页登录页注册页商品秒杀页商品推文页商品抢购页商品详情页项目技术...
大型B2B2C电子商务综合平台品优购项目实战
友讯IT社区
07-09 1666
课程知识点：1.分布式框架Dubbox、2.采用angularJS作为前端框架，所有工程均采用ajax方式异步获取数据、3 使用select2多选下拉框组件、 4.电商模式由原来的B2C升级为B2B2C、 5 使用《黑马程序员代码生成器2.4》生成代码、6 使用Spring Security作为安全框架、 7 采用BCrypt加密算法、 8 使用SpringDataRedis框架操作Redis、 ...
品优购项目实战第一天打卡
ygtwn的博客
07-01 3479
黑马小毛毛今天开始品优购电商开发实战，会把自己遇到的问题记录下来，每一个问题都是一次成长。1 关于电商我们先来了解主要的几种电商模式。1.1 B2B--企业对企业B2B （ Business to Business）是指进行电子商务交易的供需双方都是商家（或企业、公司），她（他）们使用了互联网的技术或各种商务网络平台，完成商务交易的过程。电子商务是现代 B2B marketing的一种具体主要的表...
TP使用jwt(简单)
m0_50593634的博客
06-23 840
TP使用jwt(简单) 安装tp 安装jwt composer require lcobucci/jwt 3.3 接下来封装一个jwt 规则 最好加在 <?php namespace tools\jwt; use Lcobucci\JWT\Builder; use Lcobucci\JWT\Parser; use Lcobucci\JWT\Signer\Hmac\Sha256; use Lcobucci\JWT\ValidationData; /** * Created by PhpStor
品优购项目记录：day12
Bbb的博客
07-21 1957
今日目标： （1）掌握 Freemarker常用的指令与内建函数 （2）完成商品详细页的数据显示 （3）完成商品详细页的动态显示 （4）完成商品详细页读取SKU信息的业务逻辑 （5）完成商品审核调用功能   目录 1、商品详细页-数据显示 1.1 配置 1.2 服务层 1.3 基本测试 1.4 替换模板基本信息为插值 1.5 替换模板图片列表 1.6 生成扩展属性列...
使用idea实现品优购项目搭建
看不懂的人的博客
08-19 4524
使用idea搭建maven项目工程详细步骤： 创建pinyougou-parent父工程 点击File -&gt;New-&gt;Module…，创建maven项目   点击Next 点击Next 点击Next ♦点击Finish，完成 添加pom文件内容如下: &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;pr...
品优购项目前端实战
qq_39579087的博客
09-04 2912
大致要做这么几个页面： 学习目的： 项目搭建 favicon 这个就是打开网页时标签所显示的图标，例如： 上图左侧的图标就是favicon SEO优化 首页制作 下图是约定好的命名模块： 先做这个玩意： <section class="shortcut"> <div class="w"> <div class="fl"> <ul>
品优购电商系统开发项目 源码 视频 文档 工具 合集百度云下载地址(链接已更新)
热门推荐
kai46385076的专栏
03-07 1万+
百度云下载地址 链接: https://pan.baidu.com/s/1QT4b9pV1ucLGfK-D1Oz_5w 提取码: qgjt 品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。 品优购网上商城主要分为网站前台、运营商后台、...
品优购项目记录：day05
Bbb的博客
07-13 3773
今日目标：         （1）完成商品分类功能         （2）了解电商概念：SPU、SKU         （3）掌握富文本编辑器的使用         （4）掌握分布式文件服务器：FastDFS         （5）掌握 angular js 图片上传   目录 1、商品分类 1.1 商品分类列表展示 1.2 商品分类面包屑导航 1.3 新增分类 1.4...
vue项目实战品优购
09-16
品优购电商项目是一个B2C电商平台，类似于京东商城和淘宝。在这个项目中，使用Vue.js进行前端开发。项目涵盖了商品分类、商品列表、商品详情、购物车、订单、支付等核心模块。通过HTML和CSS/CSS3进行页面的布局和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值