<!DOCTYPE html>
<html>
<head>
<title>京东_曾柯伟</title>
<link rel="stylesheet" type="text/css" href="京东.css">
</head>
<body>
<nav class="nav1">
<p><img src="./静态页面素材/Images/icon_1.png"/>
收藏京东<span id="nav_text1">你好欢迎来到京东!<a href="#">[登录]</a>
<a href="#">[免费注册]</a>   |   <a href="#">我的订单</a>
  |   <a href="#">手机京东</a>   |   客户服务   |  
网站导航
</span></p>
</nav>
<div class="div1">
<div class="div1_pic margin_top_3px">
<a href="http://www.jd.com" target="_blank">
<img src="./静态页面素材/Images/logo.png"></a>
</div>
<div class="div1_input01"><input type="text" name="username" id="input1" placeholder="游戏键鼠"></div>
<!--设置默认内容-->
<div class="div1_p1"><p>热门搜索:  
<span id="div1_p1_span1">校园之星</span>  
<span id="div1_p1_span2">礼品卡   沙发   九阳   洗衣机国庆惠   汽车用品   LG   G2   考研大纲</span></p></div>
<div class="div1_01 img_bigger"><a href="#"><p><img src="./静态页面素材/Images/icon_10.PNG">我的京东  </p></a></div>
<div class="div1_02 img_bigger"><a href="#"><p><img src="./静态页面素材/Images/icon_11.PNG">去购物车结算  </p></a></div>
<div class="clear"></div><!--清除浮动-->
</div>
<div class="div2">
<div class="div2_01"><a href="#">全部商品分类</a></div>
<div class="div2_02"><a href="#">首页</a></div>
<div class="div2_02"><a href="#">服装城</a></div>
<div class="div2_02"><a href="#">京东超市</a></div>
<div class="div2_02"><a href="#">团购</a></div>
<div class="div2_02"><a href="#">拍卖</a></div>
<div class="div2_02"><a href="#">在线游戏</a></div>
<div class="clear"></div><!--清除浮动-->
</div>
<div class="div3">
<div class="div3_01">
<ul class="div3_01_ul">
<li><a href="#">图书、音像、数字商品 <span id="d3ul_li">></span> </a></li>
<li><a href="#">家用电器 <span id="d3ul_li">></span></a></li>
<li><a href="#">手机、数码 <span id="d3ul_li">></span></a></li>
<li><a href="#">电脑、办公<span id="d3ul_li">></span></a></li>
</ul>
</div>
<div class="div3_02 img_bigger"><a href="#"><img src="./静态页面素材/Uploads/advs/banner_1.jpg"></a></div>
<div class="div3_03 div3_1_6 img_bigger"><a href="#">1</a></div>
<div class="div3_04 div3_1_6 img_bigger"><a href="#">2</a></div>
<div class="div3_05 div3_1_6 img_bigger"><a href="#">3</a></div>
<div class="div3_06 div3_1_6 img_bigger"><a href="#">4</a></div>
<div class="div3_07 div3_1_6 img_bigger"><a href="#">5</a></div>
<div class="div3_08 div3_1_6 img_bigger"><a href="#">6</a></div>
<div class="div3_09 img_bigger"><a href="#"><img src="./静态页面素材/Uploads/advs/adv_1.jpg"></a></div>
<div class="div3_10">
<div class="div3_10_01"><strong>京东快报</strong></div>
<div class="div3_10_02"><a href="#">更多快报></a></div>
<div class="div3_10_03"><hr></div>
<div class="div3_10_04">
<div><a href="#">"月光行动"之黄金周</a></div>
<div><a href="#">图书音像全场100减20</a></div>
<div><a href="#">天津东亚运动会影响配送</a></div>
<div><a href="#">汽车用品国庆不打烊</a></div>
</div>
<div class="div3_10_05">
<div><a href="#">雙十季   10月大牌狂飙</a></div>
<div><a href="#">电视家影十一大满减</a></div>
<div><a href="#">国庆期间京东正常配送!</a></div>
<div><a href="#">家装季亿元东券免费领</a></div>
</div>
<div class="div3_10_06">
<a href="#"><div class="div3_10_06_1 hr_hover"><strong>充值</strong></div></a>
<a href="#"><div class="div3_10_06_2 hr_hover"><strong>旅行</strong></div></a>
<a href="#"><div class="div3_10_06_3 hr_hover"><strong>彩票</strong></div></a>
<a href="#"><div class="div3_10_06_4 hr_hover"><strong>游戏</strong></div></a>
</div>
<div class="div3_10_07">
<form action="#" method="post">
<p><span class="div3_10_07p1">
手机号: <input type="tel" name="usertel" placeholder="请输入手机号" class="div3_10_07in"></span>
</p>
<p ><span class="div3_10_07p2">支持移动、联通、电信</span></p>
<p>
<span class="div3_10_07p3">面值:
<span class="div3_10_07se">
<select style="border:1px solid #e3e4e5;">
<option>100</option>
<option>150</option>
<option>200</option>
<option>250</option>
<option>300</option>
</select>
</span>
<span class="d3_10_07_sep">98.60-99.60</span>
</span>
</p>
<p><span class="div3_10_07p4">
<input type="submit" name="充值" value="点击充值" id="d3_10_07_btn">
<a href="#" class="d3_10_07_btnp">两元博千万,双色球6+1</a>
</span></p>
</form>
</div>
</div>
<div class="div3_11">
<div class="div3_11_01 img_bigger">
<a href="#"><img src="./静态页面素材/Uploads/goods/goods_1.jpg"></a>
</div>
<div class="div3_11_02 img_bigger">
<a href="#"><img src="./静态页面素材/Uploads/goods/goods_2.jpg"></a>
</div>
<div class="div3_11_03 img_bigger">
<a href="#"><img src="./静态页面素材/Uploads/goods/goods_3.jpg"></a>
</div>
<div class="div3_11_04 d3_11_lr">
<a href="#"><</a>
</div>
<div class="div3_11_05 d3_11_lr">
<a href="#">></a>
</div>
</div>
</div>
<div class="div4">
<div class="div4_01">
<a href="#"><div class="div4_01_1 hr_hover"><strong>疯狂抢购</strong></div></a>
<a href="#"><div class="div4_01_2 hr_hover"><strong>猜您喜欢</strong></div></a>
<a href="#"><div class="div4_01_3 hr_hover"><strong>热卖商品</strong></div></a>
<a href="#"><div class="div4_01_4 hr_hover"><strong>热评商品</strong></div></a>
<a href="#"><div class="div4_01_5 hr_hover"><strong>新品上架</strong></div></a>
<a href="#"><div class="div4_01_6"><strong>京东首发</strong></div></a>
</div>
<div class="div4_02">
<a href="#"><div class="div4_02_1 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_4.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
<a href="#"><div class="div4_02_2 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_5.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
<a href="#"><div class="div4_02_3 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_6.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
<a href="#"><div class="div4_02_4 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_7.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
<a href="#"><div class="div4_02_5 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_8.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
</div>
<div class="div4_03">
<a href="#"><div class="div4_03_">
<div class="div4_03_1 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_9.jpg">
</div>
<div class="div4_03_2"><p>
<strong><span style="color: red;">首发</span>   德赛便携式移动DVD</strong><br>
<span class="div4_03_2p">灵动的外观!灵巧的身体!全区解码,支持RMVB网络格式,17英寸大壳!
</span>
</div></p>
</div></a>
<a href="#"><div class="div4_03_3">
<strong><span style="color: red;">首发</span>  
康佳42寸安卓4D电视</strong><br>
<span class="div4_03_3p">最新一代网络智能电视康佳52AD系列,极致超窄边框设计,配置Android4.0操作系统,不闪式3D技术,全通道2D转4D,内置wifi。</span>
<div class="div4_03_4 img_bigger">
<img src="./静态页面素材/Uploads/goods/goods_10.jpg">
</div>
</div></a>
</div>
</div>
<div class="div5">
<div class="div5_01">
<a href="#"><div class="div5_01_1"><strong>限时抢购</strong></div></a>
</div>
<div class="div5_02">
<div class="div5_01_2">
<a href="#"><strong>今日限购</strong></a>
<a href="#" class="div5_01_2p">更多团购></a>
</div>
</div>
<div class="div5_03">
<a href="#"><div class="div5_03_1 img_bigger">
<div class="d5_3_1p1">
剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
</div>
<div class="d5_3_1pic1">
<img src="./静态页面素材/Uploads/goods/goods_11.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
</div>
<a href="#"><div class="div5_03_2 img_bigger">
<div class="d5_3_1p1">
剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
</div>
<div class="d5_3_1pic1">
<img src="./静态页面素材/Uploads/goods/goods_12.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
</div>
<a href="#"><div class="div5_03_3 img_bigger">
<div class="d5_3_1p1">
剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
</div>
<div class="d5_3_1pic1">
<img src="./静态页面素材/Uploads/goods/goods_13.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
</div>
<a href="#"><div class="div5_03_4 img_bigger">
<div class="d5_3_1p1">
剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
</div>
<div class="d5_3_1pic1">
<img src="./静态页面素材/Uploads/goods/goods_14.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
</div>
<a href="#"><div class="div5_03_5 img_bigger">
<div class="d5_3_1p1">
剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
</div>
<div class="d5_3_1pic1">
<img src="./静态页面素材/Uploads/goods/goods_15.jpg">
<p>京东自营211,简约百搭!防水帆布单肩斜挎包,三</p>
<p>京东价: <strong><span id="payying">¥3399.00</span></p></strong>
</div></a>
</div>
</div>
<div class="div5_04">
<a href="#"><div class="div5_04_pic1 img_bigger">
<img src="./静态页面素材/Uploads/goods/group_1.jpg">
</div></a>
<a href="#"><div class="div5_04_pic2 img_bigger">
<img src="./静态页面素材/Uploads/advs/adv_2.jpg">
</div></a>
</div>
</div>
<div class="div6">
<div class="div6_01">
<div class="div6_01_pic">
<img src="./静态页面素材/Images/icon_12.PNG">
</div>
<div class="div6_01_ul">
<ul>
<a href="#"><h2><strong>购物指南</strong></h2></a>
<a href="#"><li>购物流程</li></a>
<a href="#"><li>会员介绍</li></a>
<a href="#"><li>团购机票</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>大家电</li></a>
<a href="#"><li>联系客服</li></a>
</ul>
</div>
</div>
<div class="div6_02">
<div class="div6_01_pic">
<img src="./静态页面素材/Images/icon_13.PNG">
</div>
<div class="div6_01_ul">
<ul>
<a href="#"><h2><strong>配送方式</strong></h2></a>
<a href="#"><li>购物流程</li></a>
<a href="#"><li>团购机票</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>大家电</li></a>
<a href="#"><li>联系客服</li></a>
</ul>
</div>
</div>
<div class="div6_03">
<div class="div6_01_pic">
<img src="./静态页面素材/Images/icon_14.PNG">
</div>
<div class="div6_01_ul">
<ul>
<a href="#"><h2><strong>支付方式</strong></h2></a>
<a href="#"><li>购物流程</li></a>
<a href="#"><li>会员介绍</li></a>
<a href="#"><li>团购机票</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>大家电</li></a>
</ul>
</div>
</div>
<div class="div6_04">
<div class="div6_01_pic">
<img src="./静态页面素材/Images/icon_15.PNG">
</div>
<div class="div6_01_ul">
<ul>
<a href="#"><h2><strong>售后服务</strong></h2></a>
<a href="#"><li>购物流程</li></a>
<a href="#"><li>会员介绍</li></a>
<a href="#"><li>团购机票</li></a>
<a href="#"><li>联系客服</li></a>
</ul>
</div>
</div>
<div class="div6_05">
<div class="div6_01_pic">
<img src="./静态页面素材/Images/icon_16.PNG">
</div>
<div class="div6_01_ul">
<ul>
<a href="#"><h2><strong>特色服务</strong></h2></a>
<a href="#"><li>购物流程</li></a>
<a href="#"><li>会员介绍</li></a>
<a href="#"><li>团购机票</li></a>
<a href="#"><li>大家电</li></a>
<a href="#"><li>联系客服</li></a>
</ul>
</div>
</div>
<div class="div6_06">
<div>
<img src="./静态页面素材/Images/icon_17.PNG">
</div>
<div class="div6_06p"><a href="#">
<p><strong>京东自营覆盖区县</strong></p>
<p>京东已向全国1232个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务。</p>
</a></div>
<div class="div6_06a">
<a href="#">查看详情</a>
</div>
</div>
</div>
<div class="div7">
<div class="div7_01">
<p>
<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>
</p>
</div>
<div class="div7_02">
<p>北京市公安分局备案编号110105014669   |   京ICP证070359号   |   互联网药品信息服务资格证编号(京)-非经营性-2011-0034   |   新出发京零 字第大120007号</p>
<p>
音像制品经营许可证苏宿批005号   |   出版物经营许可证编号新出发(苏)批字第N-012号   |   互联网出版许可证编号新出网证(京)字150号
</p>
<p>
网络文化经营许可证京网文[2011]0168-061号 Copyright @ 2004-2013
京东JD.com版权所有
</p>
<p>
京东旗下网站:360TOP   迷你挑   English Site
</p>
</div>
<div class="div7_03">
<a href="#"><img src="./静态页面素材/Images/validate_1.gif"></a>
<a href="#"><img src="./静态页面素材/Images/validate_2.gif"></a>
<a href="#"><img src="./静态页面素材/Images/validate_3.PNG"></a>
<a href="#"><img src="./静态页面素材/Images/validate_4.PNG"></a>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: 0;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: red;
}
.img_bigger:hover{
transform: scale(1.05,1.05);
box-shadow: 0 0 10px #0000ff;
cursor: pointer;
z-index: 500;
}/*图片划过放大加阴影*/
.hr_hover:hover{
color: red;
border-bottom: 1.5px solid red;
}/*下划线改色*/
.nav1{
height: 19px;/*没按比例放大缩小*/
font-family: "Microsoft YaHei";
font-size: 15px;
background-color: #F8F8F8;
border: 3px #696969;
padding: 8px;
padding-left: 170px;
padding-right: 152px;
/*text-indent: 5em;/*缩进*/
overflow: hidden;/*超出盒子会被隐藏*/
white-space:nowrap;
text-decoration: none;
box-shadow: 0.5px 0.5px 0.5px #F8F8F8;
}
.nav1 a{
color: black;
}
.nav1 a:hover{
color: red;
text-decoration: underline;
}
.margin_top_3px{
margin-top: 3px;/*两个盒子间的间距*/
}
#nav_text1{
float:right;/*全部元素右对齐*/
text-decoration: none;
}
.div1{
margin-right: 152px;
margin-left: 170px;
font-size: 15px;
height: 70px;
font-family: "微软雅黑";
position: relative;/*父盒子要设置为相对定位,子盒子才能绝对定位*/
}
.div1_pic{
width: 320px;
height: 60px;
}
.div1_input01{
position: absolute;
left: -90px;
top: 3px;
}
#input1{
position: absolute;
top: 2px;
left: 420px;
width: 550px;
height: 30px;
border:5px solid red;
padding-left: 8px;
font-size: 15px;
}
.clear{
clear: both;
}
.div1_p1{
position: absolute;/*绝对定位,前提父窗口已经是相对定位*/
top: 50px;
left: 330px;
font-size: 12px;
}
#div1_p1_span1{
color: red;
}
#div1_p1_span2{
color: #A0A0A0;
}
.div1_01{
position: absolute;
top: 30px;
left: 1010px;
padding: 2px;
padding-left: 5px;
text-align: center;
box-shadow: 0.5px -0.5px 0.5px #F8F8F8;
border: 1px solid #e3e4e5;
background-color: #fff;
}
.div1_02{
position: absolute;
top: 30px;
left: 1130px;
padding: 2px;
padding-left: 5px;
text-align: center;
box-shadow: 0.5px -0.5px 0.5px #F8F8F8;
border: 1px solid #e3e4e5;
background-color: #fff;
}
.div2{
margin-right: 152px;
margin-left: 170px;
margin-top: 14px;
height: 39px;
background-color: red;
padding:13px;
font-size: 20px;
text-align: center;
}
.div2_01 a{
margin: 5px;
margin-top: 0px;
margin-right: 20px;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
color: white;
float: left;
}
.div2_01 a:hover{
background-color: #A00000;
}
.div2_02 a{
margin-left: 5px;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
color: white;
float: left;
}/*div2_02类下的a*/
.div2_02 a:hover{
background-color: #A00000;
}
.div3{
text-align: center;
height: 416px;
margin-right: 170px;
margin-left: 170px;
position: relative;/*父盒子要设置为相对定位,子盒子才能绝对定位*/
}
.div3_01{
width: 257px;
height: 397px;
border:2px solid red;
border-top: 0px;
}
.div3_01_ul{
padding: 8px;
padding-left: 55px;
line-height: 25pt;
text-align: left;
list-style-type: square;
}
#d3ul_li{
color:#909090;
}
.div3_02{
position: absolute;
top:10px;
left: 272px;
}
.div3_1_6{
background-color: #989898;
height: 21px;
width: 21px;
border-radius: 50%;/*化成圆*/
opacity: 0.7;/*透明度*/
z-index: 600;
}
.div3_03{
position: absolute;
top: 220px;
left: 760px;
}
.div3_04{
position: absolute;
top: 220px;
left: 790px;
}
.div3_05{
position: absolute;
top: 220px;
left: 820px;
}
.div3_06{
position: absolute;
top: 220px;
left: 850px;
}
.div3_07{
position: absolute;
top: 220px;
left: 880px;
}
.div3_08{
position: absolute;
top: 220px;
left: 910px;
}
.div3_09{
position: absolute;
top: 10px;
left: 950px;
}
.div3_10{
position: absolute;
top: 90px;
left: 950px;
width: 310px;
height: 307px;
border:1px solid #e3e4e5;
}
.div3_10_01{
position: absolute;
top:0px;
left: 3px;
width: 70px;
}
.div3_10_02{
position: absolute;
top: 0px;
right: 5px;
}
.div3_10_02 a{
color: blue;
}
.div3_10_02 a:hover{
color: red;
}
.div3_10_03{
position: absolute;
top:25px;
}
.div3_10_03 hr{
border: 1.5px solid #A8A8A8;
width: 310px;
}
.div3_10_04{
position: absolute;
top: 30px;
left: 2px;
height: 82px;
width: 133px;
padding:10px;
text-align: left;
font-size: 13px;
line-height: 13pt;
border-bottom:1px solid #e3e4e5;
}
.div3_10_05{
position: absolute;
top: 30px;
left: 155px;
height: 82px;
width: 133px;
padding:10px;
text-align: left;
font-size: 13px;
line-height: 13pt;
border-bottom:1px solid #e3e4e5;
}
.div3_10_06{
width: 310px;
height: 40px;
position: absolute;
top:133px;
}
.div3_10_06_1{
height: 24px;
width: 35px;
padding-top:8px;
padding-bottom: 8px;
padding-left: 21px;
padding-right: 21px;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 0px;
top: 0px;
}
.div3_10_06_2{
height: 24px;
width: 35px;
padding-top:8px;
padding-bottom: 8px;
padding-left: 21px;
padding-right: 21px;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 77px;
top: 0px;
}
.div3_10_06_3{
height: 24px;
width: 35px;
padding-top:8px;
padding-bottom: 8px;
padding-left: 21px;
padding-right: 21px;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 154px;
top: 0px;
}
.div3_10_06_4{
height: 24px;
width: 35px;
padding-top:8px;
padding-bottom: 8px;
padding-left: 21px;
padding-right: 21px;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 231px;
top: 0px;
}
.div3_10_07{
position: absolute;
top: 177px;
width: 310px;
height: 135px;
line-height: 23pt;
text-align: left;
}
.div3_10_07p1{
padding-left: 20px;
}
.div3_10_07p2{
font-size: 13px;
padding-left: 90px;
}
.div3_10_07p3{
padding-left: 20px;
}
.div3_10_07p4{
padding-left: 90px;
}
.div3_10_07se{
padding-left: 18px;
}
.d3_10_07_sep{
font-size: 10px;
}
.div3_10_07in{
width: 100px;
height: 20px;
border:1px solid #e3e4e5;
}
#d3_10_07_btn{
width: 71px;
height: 23px;
border-radius: 10%;
background-color: red;
color: white;
}
#d3_10_07_btn:hover{
background-color: #A00000;
}
.d3_10_07_btnp{
color: blue;
font-size: 9px;
}
.d3_10_07_btnp a:hover{
color: red;
}
.div3_11{
position: absolute;
top:250px;
left: 272px;
width: 670px;
height: 149px;
}
.div3_11_01{
position: absolute;
left: 37px;
height: 149px;
width: 202px;
}
.div3_11_02{
position: absolute;
left: 229px;
}
.div3_11_03{
position: absolute;
left:431px;
}
.d3_11_lr a{
color: #888888;
}
.d3_11_lr:hover{
background-color: #E0E0E0;
opacity: 0.7;/*透明*/
}
.div3_11_04{
height: 149px;
width: 38px;
position: absolute;
left: 0px;
font-size: 40px;
line-height: 140px;
border-radius: 10%;
}
.div3_11_05{
height: 149px;
width: 38px;
position: absolute;
right: 0px;
font-size: 40px;
line-height: 140px;
border-radius: 10%;
}
.div4{
height: 272px;
margin-right: 152px;
margin-left: 170px;
position: relative;
}
.div4_01{
height: 40px;
}
.div4_01_1{
height: 24px;
width: 188px;
padding-top:8px;
padding-bottom: 8px;
text-align: center;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 0px;
top: 0px;
}
.div4_01_2{
height: 24px;
width: 189px;
padding-top:8px;
padding-bottom: 8px;
text-align: center;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 188px;
top: 0px;
}
.div4_01_3{
height: 24px;
width: 189px;
padding-top:8px;
padding-bottom: 8px;
text-align: center;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 377px;
top: 0px;
}
.div4_01_4{
height: 24px;
width: 189px;
padding-top:8px;
padding-bottom: 8px;
text-align: center;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 566px;
top: 0px;
}
.div4_01_5{
height: 24px;
width: 189px;
padding-top:8px;
padding-bottom: 8px;
text-align: center;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
left: 755px;
top: 0px;
}
.div4_01_6{
height: 24px;
width: 309px;
padding-top:8px;
padding-bottom: 8px;
text-align: left;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
right: 0px;
top: 0px;
}
.div4_02{
width: 944px;
height: 231px;
border-bottom:1px solid #e3e4e5;
}
.div4_02 a:hover{
color: black;
}
#payying{
font-size: 15px;
color: red;
}
.div4_02_1{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
font-size: 10px;
}
.div4_02_2{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 127px;
font-size: 10px;
position: absolute;
top: 40px;
left: 188px;
}
.div4_02_3{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 127px;
font-size: 10px;
position: absolute;
top: 40px;
left: 377px;
}
.div4_02_4{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 127px;
font-size: 10px;
position: absolute;
top: 40px;
left: 566px;
}
.div4_02_5{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 127px;
font-size: 10px;
position: absolute;
top: 40px;
left: 755px;
}
.div4_03{
width: 312px;
height: 231px;
position: absolute;
top: 40px;
right: 0px;
border:1px solid #e3e4e5;
border-top: 0px;
}
.div4_03_{
height: 120px;
border-bottom: 1px dashed #e3e4e5;
}
.div4_03_1{
position: absolute;
top: 5px;
left: 5px;
width: 100px;
height: 100px;
}
.div4_03_2{
position: absolute;
top: 5px;
left: 110px;
font-size: 15px;
}
.div4_03_2p{
color: #909090;
font-size:10px;
}
.div4_03_2p:hover{
color: red;
}
.div4_03_3{
width: 200px;
font-size: 15px;
}
.div4_03_3p{
color: #909090;
font-size:10px;
}
.div4_03_3p:hover{
color: red;
}
.div4_03_4{
position: absolute;
right: 5px;
top:125px;
width: 100px;
height: 100px;
}
.div5{
height: 306px;
margin-right: 152px;
margin-left: 170px;
position: relative;
}
.div5_01{
height: 40px;
}
.div5_01_1{
height: 24px;
width: 944px;
padding-top:8px;
padding-bottom: 8px;
text-align: left;
border-bottom: 1.5px solid #A8A8A8;
}
.div5_02{
height: 40px;
}
.div5_01_2{
height: 24px;
width: 309px;
padding-top:8px;
padding-bottom: 8px;
text-align: left;
border-bottom: 1.5px solid #A8A8A8;
position: absolute;
right: 0px;
top: 0px;
}
.div5_01_2p{
color: blue;
margin-left: 150px;
}
.div5_03{
width: 944px;
height: 262px;
border-bottom:1px solid #e3e4e5;
position: absolute;
top: 42px;
}
.div5_03_1{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 211px;
font-size: 10px;
position: relative;
}
.d5_3_1p1{
color: #909090;
font-size:12px;
position: absolute;
top: 5px;
left: 15px;
}
.d5_3_1p1 span{
font-size: 25px;
}
.d5_3_1pic1{
position: absolute;
top: 40px;
left: 30px;
}
.div5_03_2{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 211px;
font-size: 10px;
position: absolute;
top: -232px;
left: 188px;
position: relative;
}
.div5_03_3{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 211px;
font-size: 10px;
position: absolute;
top: -464px;
left: 377px;
position: relative;
}
.div5_03_4{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 211px;
font-size: 10px;
position: absolute;
top: -696px;
left: 566px;
position: relative;
}
.div5_03_5{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 211px;
font-size: 10px;
position: absolute;
top: -928px;
left: 755px;
position: relative;
}
.div5_04{
width: 312px;
height: 262px;
position: absolute;
top: 40px;
right: 0px;
border:1px solid #e3e4e5;
border-top: 0px;
}
.div5_04_pic1{
position: absolute;
top: 5px;
right: 10px;
}
.div5_04_pic2{
position: absolute;
top: 165px;
right: 0px;
}
.div6{
margin-top: 5px;
border-top: 1px solid #e3e4e5;
border-bottom: 1px solid #e3e4e5;
height: 190px;
margin-right: 152px;
margin-left: 170px;
position: relative;
}
.div6_01{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 170px;
font-size: 10px;
position: relative;
}
.div6_02{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 170px;
font-size: 10px;
position: absolute;
top: 0px;
left: 188px;
}
.div6_03{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 170px;
font-size: 10px;
position: absolute;
top: 0px;
left: 377px;
}
.div6_04{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 170px;
font-size: 10px;
position: absolute;
top: 0px;
left: 566px;
}
.div6_05{
padding:31px;
padding-top: 20px;
padding-bottom: 0px;
width: 126px;
height: 170px;
font-size: 10px;
position: absolute;
top: 0px;
left: 755px;
}
.div6_01_ul ul{
list-style-type: none;
position: relative;
left: 45px;
top: -45px;
}
.div6_06{
position: absolute;
top: 10px;
right: 10px;
width: 202px;
height: 169px;
}
.div6_06p{
position: relative;
top: -169px;
font-size: 13px;
line-height:15pt;
}
.div6_06a{
position: relative;
top: -120px;
left: 149px;
font-size: 13px;
}
.div7{
margin-top: 5px;
height: 190px;
margin-right: 152px;
margin-left: 170px;
position: relative;
}
.div7_01{
height: 32px;
text-align: center;
padding-top: 10px;
font-size: 13px;
}
.div7_02{
text-align: center;
height: 75px;
font-size: 13px;
}
.div7_03{
height: 64px;
text-align: center;
}
具体程序及素材:链接:https://pan.baidu.com/s/1BN0MG8FkAb0ekzjhHCP8BQ 密码:i9g6