detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- description网站的描述 -->
<meta name="description"
content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<!-- keywords页面关键词 -->
<meta name=" keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<title>品优购-手机详情页</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共的css样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入detail样式 -->
<link rel="stylesheet" href="css/detail.css">
<!-- 引入detail js文件 -->
<script src="js/detail.js"></script>
</head>
<body>
<!-- 快捷导航模块开始 -->
<section class="shortcut">
<div class="w">
<!-- 左边的导航 -->
<div class="fl">
<ul>
<li>品优购欢迎您！ </li>
<li><a href="#">请登录 </a>
<a href="register.html" class="style_red">免费注册</a></li>
</ul>
</div>
<!-- 右边的导航 -->
<div class="fr">
<ul>
<li>我的订单 </li>
<li></li>
<li class="arrow-icon">我的品优购 </li>
<li></li>
<li>品优购会员 </li>
<li></li>
<li>企业采购 </li>
<li></li>
<li class="arrow-icon">关注品优购 </li>
<li></li>
<li class="arrow-icon">客户服务 </li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 快捷导航模块结束 -->
<header class="header w">
<!-- logo模块开始了 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城" target="_blank">品优购商城</a>
</h1>
</div>
<!-- logo模块结束啦 -->
<!-- search模块开始啦 -->
<div class="search">
<input type="search" placeholder="search">
<button>搜索</button>
</div>
<!-- search模块结束了 -->
<!-- 热词模块开始了 -->
<div class="hotwrods">
<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>
<!-- 热词模块结束了 -->
<!-- 购物车模块开始了 -->
<a href="shopcar.html" class="shopcar">
我的购物车
<i class="count">8</i>
</a>
<!-- 购物车模块结束了 -->
</header>
<!-- 头部模块结束啦 -->
<!-- nav模块开始了 -->
<div class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="#">家用电器</a><i></i></li>
<li><a href="list.html">手机</a>、<a href="#">数码</a> 、<a href="#">通信</a> <i></i></li>
<li><a href="#">电脑</a>、<a href="#">办公</a><i></i></li>
<li><a href="#">家居</a>、<a href="#">家具</a> 、<a href="#">家装</a> 、<a href="#">厨具</a> <i></i></li>
<li><a href="#">男装</a>、<a href="#">女装</a> 、<a href="#">童装</a> 、<a href="#">内衣</a> <i></i></li>
<li><a href="#">个户化妆</a>、<a href="#">清洁用品</a> 、<a href="#">宠物</a> <i></i></li>
<li><a href="#">鞋靴</a>、<a href="#">箱包</a> 、<a href="#">珠宝</a> 、<a href="#">奢侈品</a> <i></i></li>
<li><a href="#">运动户外</a>、<a href="#">钟表</a><i></i></li>
<li><a href="#">汽车</a>、<a href="#">汽车用品</a><i></i></li>
<li><a href="#">母婴</a>、<a href="#">玩具乐器</a><i></i></li>
<li><a href="#">食品</a>、<a href="#">酒类</a> 、<a href="#">生鲜</a> 、<a href="#">特产</a><i></i></li>
<li><a href="#">医药保健</a><i></i></li>
<li><a href="#">图书</a>、<a href="#">音像</a> 、<a href="#">电子书</a><i></i></li>
<li><a href="#">彩票</a>、<a href="#">旅行</a> 、<a href="#">充值</a> 、<a href="#">票务</a><i></i></li>
<li><a href="#">理财</a>、<a href="#">众筹</a> 、<a href="#">白条</a> 、<a href="#">保险</a><i></i></li>
</ul>
</div>
</div>
<div class="navitems">
<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模块结束了 -->
<!-- 详情页内容部分start -->
<div class="de_container w">
<!-- 面包屑导航开始了 -->
<div class="crumb_wrap">
<ul>
<li><a href="#">手机、数码、通讯</a>> </li>
<li><a href="#">手机</a>></li>
<li><a href="#">Apple苹果</a>></li>
<li><a href="#">iPhone6S Plus</a></li>
</ul>
</div>
<!-- 面包屑导航结束了 -->
<!-- 产品介绍模块开始了 -->
<div class="product_intro clearfix">
<!-- 预览区域 -->
<div class="preview_wrap fl">
<div class="preview_img">
<div class="small_img"><img src="upload/mobile.jpg" alt="">
<div class="mask"></div>
<div class="big"><img src="./upload/big2.jpg" alt="" class="big_img"></div>
</div>
</div>
<div class="preview_list">
<a href="#" class="arrow_prev"></a><a href="#" class="arrow_next"></a>
<ul>
<li><a href="#"><img src="upload/pre.jpg" alt=""></a></li>
<li class="current"><a href="#"><img src="upload/pre.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/pre.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/pre.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/pre.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/pre.jpg" alt=""></a></li>
</ul>
</div>
</div>
<!-- 产品详细信息区域 -->
<div class="itemInfo_wrap fl">
<div class="sku_name">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div>
<div class="news red">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</div>
<div class="summary">
<dl class="summary_price">
<dt>价格</dt>
<dd>
<i class="price red">￥5299.00</i>
<a href="#" class="red">降价通知</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 <br> 元，即可在购物车换 购热销商品 详情 》
</dd>
</dl>
<div class="summary_support">
<dt>支持</dt>
<dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd>
</div>
<div class="choose_color">
<dt>选择颜色</dt>
<dd>
<a href="#" class="first">玫瑰金</a>
<a href="#">金色</a>
<a href="#">白色</a>
<a href="#">土豪色</a>
</dd>
</div>
<div class="choose_version">
<dt>选择版本</dt>
<dd><a href="#" class="first">公开版</a><a href="#">移动4G</a></dd>
</div>
<div class="choose_type">
<dt>购买方式</dt>
<dd> <a href="#" class="first">官方标配</a>
<a href="#">移动优惠购</a>
<a href="#">电信优惠购</a></dd>
</div>
<div class="choose_btn">
<dt class="choose_amount">
<input type="text" value="1">
<a href="#">+</a><a href="#">-</a>
</dt>
<dd><a href="shopcar.html" class="addcar">加入购物车</a></dd>
</div>
</div>
</div>
</div>
<!-- 产品介绍模块结束了 -->
</div>
<!-- 详情页内容部分end -->
<!-- 产品细节模块start -->
<div class="product_detail clearfix w">
<div class="aside fl">
<div class="tab_list ">
<div class="first_tab red fl">
相关分类
</div>
<div class="second_tab fl">
推荐品牌
</div>
<ul class="classify">
<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>
<li><a href="#">笔记本</a></li>
<li><a href="#">蓝牙耳机</a></li>
</ul>
</div>
<div class="tab_con">
<ul>
<li>
<img src="upload/aside_img.jpg" alt="">
<h5>华为 HUAWEI P20 Pro 全面屏莱卡</h5>
<div class="aside_price">
￥19
</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
<li>
<img src="upload/aside_img.jpg" alt="">
<h5>华为 HUAWEI P20 Pro 全面屏莱卡</h5>
<div class="aside_price">
￥19
</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
<li>
<img src="upload/aside_img.jpg" alt="">
<h5>华为 HUAWEI P20 Pro 全面屏莱卡</h5>
<div class="aside_price">
￥19
</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
<li>
<img src="upload/aside_img.jpg" alt="">
<h5>华为 HUAWEI P20 Pro 全面屏莱卡</h5>
<div class="aside_price">
￥19
</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
<li>
<img src="upload/aside_img.jpg" alt="">
<h5>华为 HUAWEI P20 Pro 全面屏莱卡</h5>
<div class="aside_price">
￥19
</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
</ul>
</div>
</div>
<div class="detail fr">
<div class="detail_tab_list">
<ul>
<li class="current"><a href="#">商品介绍</a></li>
<li><a href="#">规格与包装</a></li>
<li><a href="#">售后保障</a></li>
<li><a href="#">商品评价（50000）</a></li>
<li><a href="#">手机社区</a></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="#">查看更多参数</a></p>
<img src="upload/detail_img1.jpg" alt="">
<img src="upload/detail_img2.jpg" alt="">
<img src="upload/detail_img3.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- 产品细节模块end -->
<!-- 底部区域start -->
<div class="footer">
<div class="w">
<!-- mod_service开始 -->
<div class="mod_service">
<ul>
<li>
<h5 class="one"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="two"></h5>
<div class="service_txt">
<h4>极速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5 class="three"></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<h5 class="four"></h5>
<div class="service_txt">
<h4>特殊服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5 class="five"></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<!-- mod_service结束 -->
<!-- mod_help开始 -->
<div class="mod_help">
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dd>配送费收取标准</dd>
<dd>海外配送</dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
<dd>邮局汇款</dd>
<dd>公司转账</dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd>售后政策</dd>
<dd>价格保护</dd>
<dd>退款说明</dd>
<dd>返修/退换货</dd>
<dd>取消订单</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>夺宝岛</dd>
<dd>DIY装机</dd>
<dd>延保服务</dd>
<dd>品优购E卡</dd>
<dd>品优购通信</dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt="">
品优购客户端
</dd>
</dl>
</div>
<!-- mod_help结束 -->
<div class="mod_copyright">
<div class="links">
<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>
</div>
<div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702</div>
</div>
</div>
</div>
<!-- 底部区域end -->
</body>
</html>detail.css
@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;
font-display:block;
}
.w {
width: 1200px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.style_red {
color: #c81623;
}
.shortcut {
width: 100%;
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.shortcut ul li {
float: left;
}
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 15px 0;
}
.arrow-icon::after {
content: "\e91e";
font-family: 'icomoon';
margin-left: 6px;
}
.header {
position: relative;
height: 105px;
}
.header .logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo h1 a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}
.search {
position: absolute;
left: 347px;
top: 25px;
width: 538px;
height: 37px;
}
.search input {
float: left;
width: 454px;
height: 33px;
padding-left: 10px;
}
.search button {
float: left;
width: 80px;
height: 33px;
background-color :#b1191a ;
color: #fff;
}
.hotwrods {
position: absolute;
top: 69px;
left: 347px;
}
.hotwrods a {
margin: 0 13px;
}
.shopcar {
position: absolute;
top: 25px;
right: 60px;
width: 138px;
height: 37px;
line-height: 37px;
text-align: center;
background-color: #f7f7f7;
border: 1px solid #dfdfdf;
}
.shopcar::before {
content: '\e93a';
font-family: 'icomoon';
margin-right: 5px;
color: #db5858;
}
.shopcar::after {
content: '\e920';
font-family: 'icomoon';
margin-left: 10px;
}
.shopcar .count {
position: absolute;
top: -5px;
left: 105px;
width: 14px;
height: 14px;
line-height: 14px;
font-size: 12px;
background-color: #e60012;
color: #fff;
border-radius: 7px 7px 7px 0;
}
.nav {
height: 47px;
border-bottom: 2px solid #b1191a;
}
.nav .dropdown {
float: left;
width: 210px;
height: 45px;
background-color: #b1191a;
}
.nav .navitems {
float: left;
}
.dropdown .dt {
width: 210px;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 16px;
color: #fff;
}
.dropdown .dd {
display: none;
width: 210px;
height: 465px;
background-color: #c81623;
margin-top: 2px;
}
.dropdown .dd ul li {
position: relative;
height: 30px;
line-height: 30px;
margin-left: 2px;
padding-left: 10px;
color: #fff;
transition: all .5s;
}
.dropdown .dd ul li a {
font-size: 14px;
color: #fff;
}
.dropdown .dd ul li i::after {
position: absolute;
top: 1px;
right: 10px;
content: '\e920';
font-family: 'icomoon';
font-size: 14px;
color: #fff;
}
.dropdown .dd ul li:hover {
background-color: #f7f7f7;
padding-left: 20px;
}
.dropdown .dd ul li:hover a {
color: #c81623;
}
.navitems ul li {
float: left;
margin-left: 15px;
}
.navitems ul li a {
display: block;
height: 45px;
line-height: 45px;
left: 45px;
font-size: 16px;
color: #333333;
padding: 0 25px;
}
.red {
color: #e12228;
}
.crumb_wrap {
height: 50px;
}
.crumb_wrap ul li {
float: left;
margin: 20px 20px 10px 0;
}
.crumb_wrap ul li a {
padding-right: 20px;
}
.product_intro {
height: 580px;
}
.preview_wrap {
height: 400px;
}
.preview_wrap .small_img {
position: relative;
}
.preview_wrap .mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 1px solid #ccc;
cursor: move;
background-color: rgba(234, 209, 126,.5);
}
.preview_wrap .big {
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 415px;
width: 500px;
height: 500px;
z-index: 1;
}
.preview_wrap .big .big_img {
position: absolute;
top: 0;
left: 0;
}
.preview_list ul li {
float: left;
width: 60px;
height: 60px;
}
.preview_list {
position: relative;
margin: 60px 0;
}
.preview_list .arrow_prev,
.preview_list .arrow_next {
position: absolute;
top: 15px;
display: inline-block;
width: 22px;
height: 32px;
}
.preview_list .arrow_prev {
background:url('../images/arrow-prev.png') no-repeat;
}
.preview_list .arrow_next {
right: 0;
background: url('../images/arrow-next.png') no-repeat;
}
.preview_list ul {
margin-left: 20px;
}
.preview_list ul .current {
border: 1px solid #c81623;
}
.itemInfo_wrap {
margin-left: 85px;
}
.itemInfo_wrap .sku_name {
font-size: 16px;
font-weight: 700;
color: #333;
}
.itemInfo_wrap .news {
padding: 10px 0;
}
.summary dt {
float: left;
width: 60px;
height: 35px;
padding-left: 5px;
}
.summary dd {
float: left;
}
.summary dd .first {
border: 1px solid #c81623;
}
.summary_price {
position: relative;
width: 715px;
height: 50px;
line-height: 50px;
background-color: #fee9eb;
}
.summary_price .price {
font-size: 24px;
padding-right: 5px;
}
.summary_price .remark {
position: absolute;
top: 2px;
right: 10px;
}
.summary_promotion {
height: 100px;
line-height: 30px;
padding: 20px 0;
background-color: #fee9eb;
}
.summary_support {
height: 40px;
line-height: 40px;
}
.choose_color,
.choose_version,
.choose_type,
.choose_btn {
height: 50px;
line-height: 50px;
}
.summary dd a {
padding: 10px;
background-color: #f7f7f7;
margin-left: 5px;
}
.choose_color dd a {
display: inline-block;
width: 85px;
height: 40px;
line-height: 20px;
text-align: center;
}
.choose_btn .choose_amount input {
float: left;
width: 35px;
height: 46px;
line-height: 46px;
text-align: center;
border: 1px solid #ccc;
border-right: 0;
}
.choose_btn .choose_amount a {
float: left;
width: 15px;
height: 23px;
line-height: 23px;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.choose_btn .choose_amount:nth-child(1) a{
border-bottom: 0;
}
.choose_btn .addcar {
display: inline-block;
width: 140px;
height: 46px;
line-height: 26px;
text-align: center;
background-color: #c81623;
color: #fff;
font-size: 18px;
}
.aside {
width: 213px;
height: 2180px;
border: 1px solid #ccc;
}
.tab_list .second_tab {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list .second_tab,
.tab_list .first_tab {
width: 105px;
height: 35px;
line-height: 35px;
text-align: center;
}
.tab_list .classify {
padding: 10px;
}
.tab_list .classify li a {
float: left;
width: 95px;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #ccc;
}
.tab_con {
padding: 0 10px;
}
.tab_con ul li {
border-bottom: 1px solid #ccc;
}
.tab_con ul li h5 {
text-overflow: ellipsis;
font-weight: normal;
margin: 10px 0;
}
.tab_con ul li .aside_price {
font-weight: 700;
}
.tab_con ul li .as_addcar {
display: block;
width: 90px;
height: 30px;
line-height: 30px;
background-color: #f7f7f7;
text-align: center;
margin:0 auto 20px;
}
.detail {
width: 970px;
}
.detail .detail_tab_list {
height: 45px;
line-height: 45px;
background-color: #f1f1f1;
}
.detail .detail_tab_list ul li {
float: left;
padding: 0 20px;
text-align: center;
}
.detail .detail_tab_list ul .current {
background-color: #c81623;
}
.detail .detail_tab_list ul .current a {
color: #fff;
}
.detail_tab_con {
height: 2180px;
}
.detail_tab_con .item .item_info {
padding: 25px 0 20px 30px;
}
.detail_tab_con .item .item_info li {
height: 25px;
line-height: 25px;
}
.detail_tab_con .item p a {
float: right;
}
.detail_tab_con .item p a::after {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
transform: rotate(45deg);
margin: 0 0 3px 3px;
}
.footer {
padding-top: 30px;
height: 415px;
background-color: #f5f5f5;
}
.mod_service {
height: 80px;
border-bottom: 1px solid #e5e5e5;
}
.mod_service ul li {
width: 240px;
height: 80px;
float: left;
/* padding-left: 35px; */
}
.mod_service ul li h5 {
float: left;
width: 50px;
height: 50px;
padding-right: 60px;
background:url('../images/icons.png') no-repeat ;
}
.mod_service ul li .one {
background-position: -252px -3px;
}
.mod_service ul li .two {
background-position: -252px -54px;
}
.mod_service ul li .three {
background-position: -252px -105px;
}
.mod_service ul li .four {
background-position: -252px -156px;
}
.mod_service ul li .five {
background-position: -252px -207px;
}
.service_txt {
height: 50px;
line-height: 25px;
}
.service_txt h4 {
font-size: 14px;
}
.service_txt p {
font-size: 12px;
}
.mod_help {
height: 188px;
border-bottom: 1px solid #e5e5e5;
}
.mod_help dl {
float: left;
width: 200px;
height: 188px;
margin-left: 15px;
}
.mod_help dl:last-child {
text-align: center;
width: 90px;
}
.mod_help dl dt {
font-size: 16px;
font-weight: 700;
padding: 20px 0 10px 0;
}
.mod_help dl dd {
font-size: 12px;
padding-bottom: 5px;
}
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.mod_copyright .links {
padding-bottom: 15px;
}
.mod_copyright .links a {
padding: 0 10px;
}
.mod_copyright .copyright {
line-height: 24px;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
