2019独角兽企业重金招聘Python工程师标准>>> 
京东原首页效果：
模仿效果图：
小结：
只是用了几个小时，从不了解京东首页的小白，到模仿作出80%左右近似度的一部分(注，图片在京东上下载的),其中重要的是学习规范，学习样式，总体感觉还是很棒的！
自己的代码如下(有些长)：
index.html为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东(JD.COM)-正品低价、品质保障、。。。</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="index">
<div class="page_top">
<div class="page_top_in">
<a href="#" class="page_top_in_lk"></a>
</div>
</div>
<h1 class="logo_title">
<a href="#" class="logo_tit_lk">京东</a>
</h1>
<div class="container" id="app">
<div id="shortcut">
<div class="mid">
<ul class="floatleft">
<div class="location">
<div class="if1"></div>
<div class="place"><a href="#" class="pl">北京</a></div>
</div>
</ul>
<ul class="floatright">
<li class="ll login"><a href="#">你好，请登录</a></li>
<li class="spacer"></li>
<li class="ll regist"><a href="#">免费注册</a></li>
<li class="spacer"></li>
<li class="ll orders"><div><a href="#">我的订单</a></div></li>
<li class="spacer"></li>
<li class="ll mineJD">
<div><a href="#" class="lll">我的京东</a></div>
<div class="select"></div>
<li class="spacer"></li>
<li class="ll JDmember"><div><a href="#">京东会员</a></div></li>
<li class="spacer"></li>
<li class="ll enterprisePurchase"><div><a href="#">企业采购</a></div></li>
<li class="spacer"></li>
<li class="ll clientService">
<div><a href="#" class="lll">客户服务</a></div>
<div class="select"></div>
</li>
<li class="spacer"></li>
<li class="ll webGuidance">
<div><a href="#" class="lll">网站导航</a></div>
<div class="select"></div>
</li>
<li class="spacer"></li>
<li class="ll mobileJD"><div><a href="#">手机京东</a></div></li>
</ul>
</div>
</div>
<div id="header">
<div class="hdmid">
<div id="search">
<div class="form">
<input type="text" class="search_input" placeholder="快来给自己买点好东西吧...">
<span class="search_pic_btn"></span>
<a href="#" class="click_a"><button class="search_click"></button></a>
</div>
<div id="shoppingchart">
<div class="charticon"></div>
<a href="#" class="mychart">我的购物车</a>
<div class="chartnum"></div>
</div>
<div id="appqrcode"></div>
</div>
<div id="hotwords">
<a href="#" class="colorred">周末专享价</a>
<a href="#">欧莱雅</a>
<a href="#">沸腾五一</a>
<a href="#">预约有礼</a>
<a href="#">每100-50</a>
<a href="#">跨店4免1</a>
<a href="#">VANS</a>
<a href="#">牧畜招商</a>
</div>
<div id="navitems">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">PLUS会员</a></li>
<li><a href="#">闪购</a></li>
</ul>
<ul>
<li class="lspacer"></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">京东服饰</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
</ul>
<ul>
<li class="lspacer"></li>
<li><a href="#">全球购</a></li>
<li><a href="#">京东金融</a></li>
</ul>
</div>
<div id="treasure"></div>
</div>
</div>
<div id="bd_mid">
<a href="#" class="side_pic"><img class="side_pic_lk" src="F:/HtmlTest/京东首页/images/side_pic_lk.png" alt="加载中"></a>
<div class="bd_mid_cen">
<div class="mid_cen_cate_menu">
<ul>
<li>
<a href="#">家用电器</a>
</li>
<li>
<a href="#">手机</a><span>/</span>
<a href="#">运营商</a><span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a><span>/</span>
<a href="#">办公</a>
</li>
<li><a href="#">家居</a><span>/</span>
<a href="#">家具</a><span>/</span>
<a href="#">家装</a><span>/</span>
<a href="#厨具"></a>
</li>
<li>
<a href="#">男装</a><span>/</span>
<a href="#">女装</a><span>/</span>
<a href="#">童装</a><span>/</span>
<a href="#">内衣</a>
</li>
<li>
<a href="#">美妆个护</a><span>/</span>
<a href="#">宠物</a>
</li>
<li>
<a href="#">女鞋</a><span>/</span>
<a href="#">箱包</a><span>/</span>
<a href="#">钟表</a><span>/</span>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">男鞋</a><span>/</span>
<a href="#">运动</a><span>/</span>
<a href="#">户外</a>
</li>
<li>
<a href="#">房产</a><span>/</span>
<a href="#">汽车</a><span>/</span>
<a href="#">汽车用品</a>
</li>
<li>
<a href="#">母婴</a><span>/</span>
<a href="#">玩具乐器</a>
</li>
<li>
<a href="#">食品</a><span>/</span>
<a href="#">酒类</a><span>/</span>
<a href="#">生鲜</a><span>/</span>
<a href="#">特产</a>
</li>
<li>
<a href="#">艺术</a><span>/</span>
<a href="#">礼品鲜花</a><span>/</span>
<a href="#">农资绿植</a>
</li>
<li>
<a href="#">医药保健</a><span>/</span>
<a href="#">计生情趣</a>
</li>
<li>
<a href="#">图书</a><span>/</span>
<a href="#">音像</a><span>/</span>
<a href="#">电子书</a>
</li>
<li>
<a href="#">机票</a><span>/</span>
<a href="#">酒店</a><span>/</span>
<a href="#">旅游</a><span>/</span>
<a href="#">生活</a>
</li>
<li>
<a href="#">理财</a><span>/</span>
<a href="#">众筹</a><span>/</span>
<a href="#">白条</a><span>/</span>
<a href="#">保险</a>
</li>
</ul>
</div>
<div class="mid_cen_pic_show">
<a href="#"><img src="images/mid_cen_pic_show.jpg" alt="图片加载中..."></a>
</div>
<div class="mid_cen_pic_show_dr">
<div class="mid_cen_pic_show_dr_t"><a href="#"><img src="F:/HtmlTest/京东首页/images/mid_cen_pic_show_dr_t.jpg" alt="图片加载中..."></a></div>
<div class="mid_cen_pic_show_dr_m"><a href="#"><img src="F:/HtmlTest/京东首页/images/mid_cen_pic_show_dr_m.jpg" alt="图片加载中..."></a></div>
<div class="mid_cen_pic_show_dr_b"><a href="#"><img src="F:/HtmlTest/京东首页/images/mid_cen_pic_show_dr_b.jpg" alt="图片加载中..."></a></div>
</div>
<div class="bd_mid_cen_col4">
<a href="#"><div class="user_avatar"></div></a>
<div class="bd_mid_cen_col4_user">
<div class="user_show">
<p class="user_tip">Hi~欢迎来到京东！</p>
<p class="login_regist">
<a href="#" class="login_regist_login">登录</a><a href="#" class="login_regist_regist">注册</a>
</p>
</div>
<div class="user_profit">
<a href="#" class="user_profit_newer">新人福利</a><a href="#" class="user_profit_VIP">PLUS会员</a>
</div>
</div>
<div class="bd_mid_cen_col4_news">
<div class="news_title">
<a href="#" class="title1">促销</a>
<a href="#" class="title2">公告</a>
<a href="#" class="title3">更多</a>
</div>
<div class="news_list">
<ul>
<li class="list1">家具建材自营每200减50</li>
<li class="list2">满5千送1999电动牙刷</li>
<li class="list3">MEIZU 15新品上市</li>
<li class="list4">抢1000元空调神券！</li>
</ul>
</div>
</div>
<div class="bd_mid_cen_col4_service">
<div class="service_inside">
<ul class="service_list">
<li>
<a href="#" class="phonefee">
<div></div>
<span>话费</span>
</a>
</li>
<li>
<a href="#" class="airticket">
<div></div>
<span>机票</span>
</a>
</li>
<li>
<a href="#" class="hotel">
<div></div>
<span>酒店</span>
</a>
</li>
<li>
<a href="#" class="game">
<div></div>
<span>游戏</span>
</a>
</li>
<li>
<a href="#" class="enterprisebuy">
<div></div>
<span>企业购</span>
</a>
</li>
<li>
<a href="#" class="gascard">
<div></div>
<span>加油卡</span>
</a>
</li>
<li>
<a href="#" class="movieticket">
<div></div>
<span>电影票</span>
</a>
</li>
<li>
<a href="#" class="trainticket">
<div></div>
<span>火车票</span>
</a>
</li>
<li>
<a href="#" class="crowdfunding">
<div></div>
<span>众筹</span>
</a>
</li>
<li>
<a href="#" class="finacing">
<div></div>
<span>理财</span>
</a>
</li>
<li>
<a href="#" class="giftcard">
<div></div>
<span>礼品卡</span>
</a>
</li>
<li>
<a href="#" class="loanreceipt">
<div></div>
<span>白条</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="secondkill">
<div class="seckil_mid">
<a class="sk_mid_lk">
<div class="sk_title">京东秒杀</div>
<div class="sk_subtit">FLASH DEALS</div>
<div class="sk_icon"></div>
<div class="sk_comment">本场距离结束还剩</div>
<div class="sk_cd">
<div class="cd">
<div class="cd_item cd_hour">
<span class="cd_item_txt">01</span>
</div>
<div class="cd_item cd_minute">
<span class="cd_item_txt">05</span>
</div>
<div class="cd_item cd_second">
<span class="cd_item_txt">17</span>
</div>
</div>
</div>
</a>
<div class="seckil_mid_bd">
<div class="seckil_mid_cen">
<button class="seckil_mid_former">
<i><</i>
</button>
<button class="seckil_mid_next">
<i>></i>
</button>
<div class="seckil_mid_1">
<a href="#" class="sk_mid1_lk">
<div class="sk_mid1_lk_pic"><img src="F:/HtmlTest/京东首页/images/sk_mid1_lk_pic.webp" alt="加载中"></div>
<p class="sk_mid1_lk_nm">诺基亚 7(Nokia 7)4GB+6...</p>
<div class="sk_mid1_lk_prc">
<span class="sk_mid1_lk_prc_now">
<i>¥</i>
<span>1299.00</span>
</span>
<span class="sk_mid1_lk_prc_old">
<i>¥</i>
<span>1699.00</span>
</span>
</div>
</a>
</div>
<div class="seckil_mid_2">
<a href="#" class="sk_mid2_lk">
<div class="sk_mid2_lk_pic"><img src="F:/HtmlTest/京东首页/images/sk_mid2_lk_pic.webp" alt="加载中"></div>
<p class="sk_mid2_lk_nm">硕扬 i5 8400/GTX1050Ti/1...</p>
<div class="sk_mid2_lk_prc">
<span class="sk_mid2_lk_prc_now">
<i>¥</i>
<span>3577.00</span>
</span>
<span class="sk_mid2_lk_prc_old">
<i>¥</i>
<span>3999.00</span>
</span>
</div>
</a>
</div>
<div class="seckil_mid_3">
<a href="#" class="sk_mid3_lk">
<div class="sk_mid3_lk_pic"><img src="F:/HtmlTest/京东首页/images/sk_mid3_lk_pic.webp" alt="加载中"></div>
<p class="sk_mid3_lk_nm">顺清柔 卫生纸 共享本色金...</p>
<div class="sk_mid3_lk_prc">
<span class="sk_mid3_lk_prc_now">
<i>¥</i>
<span>49.80</span>
</span>
<span class="sk_mid3_lk_prc_old">
<i>¥</i>
<span>145.00</span>
</span>
</div>
</a>
</div>
<div class="seckil_mid_4">
<a href="#" class="sk_mid4_lk">
<div class="sk_mid4_lk_pic"><img src="F:/HtmlTest/京东首页/images/sk_mid4_lk_pic.webp" alt="加载中"></div>
<p class="sk_mid4_lk_nm">机械师游戏本 (MACHIENI...</p>
<div class="sk_mid4_lk_prc">
<span class="sk_mid4_lk_prc_now">
<i>¥</i>
<span>5699.00</span>
</span>
<span class="sk_mid4_lk_prc_old">
<i>¥</i>
<span>6499.00</span>
</span>
</div>
</a>
</div>
</div>
<div class="seckil_mid_r">
<img class="seckil_mid_r_pic" src="F:/HtmlTest/京东首页/images/seckil_mid_r_pic.jpg!q90!cc_180x260" alt="加载中">
<div class="seckil_mid_r_indicators">
<i class="seckil_mid_r_indicators_l"></i>
<i class="seckil_mid_r_indicators_r"></i>
</div>
</div>
</div>
</div>
</div>
<div id="corebd1">
<div class="corebd1_cen">
<div class="corebd1_cen_l"></div>
<div class="corebd1_cen_m"></div>
<div class="corebd1_cen_r"></div>
</div>
</div>
<div id="corebd2">
<div class="corebd2_cen">
<div class="corebd2_cen_l"></div>
<div class="corebd2_cen_m"></div>
<div class="corebd2_cen_r"></div>
</div>
</div>
<div class="floors">
</div>
</div>
<div id="camera_button"></div>
<div id="global_toolbar"></div>
</body>
</html>style.css为：
/*
* @Author: lenovo
* @Date: 2018-04-21 10:00:17
* @Last Modified by: lenovo
* @Last Modified time: 2018-04-29 14:46:15
*/
i{
font-style:normal;
}
.page_top{
height:80px;
width:100%;
background-color:#000;
}
.page_top_in_lk{
display:block;
width:1190px;
height:80px;
margin:0 auto;
background:url("F:/HtmlTest/京东首页/images/page_top.jpg");
}
ul li{
list-style:none;
}
.index{
background-color:#f0f3ef;
}
.floatright li a{
text-decoration:none;
font-size:12px;
color:#aaa;
}
ul li a:hover{
color:#f10215;
}
#shortcut{
width:100%;
height:31px;
background-color:#e3e4e5;
border-bottom:1px solid #ddd;
}
#shortcut .mid{
margin:0 auto;
padding:0px;
width:1200px;
height:30px;
}
.floatleft{
float:left;
width:258px;
height:30px;
}
.floatright{
float:right;
width:705px;
height:30px;
}
.floatright li{
float:left;
line-height:30px;
text-align:center;
}
.floatright .ll{
height:30px;
width:62px;
}
.floatright .mineJD{
height:30px;
width:70px;
}
.floatright .clientService{
height:30px;
width:70px;
}
.floatright .webGuidance{
height:30px;
width:70px;
}
.floatright .login{
height:30px;
width:80px;
}
.floatright .regist a{
color:#f10215;
}
.floatright .spacer{
height:10px;
width:1px;
background-color:#aaf;
margin:11px 5px 0;
}
.select{
margin-top:10px;
margin-left:2px;
float:left;
width:12px;
height:12px;
}
.select:hover{
background-color:#f10215;
}
.lll{
float:left;
margin-left:5px;
}
.location{
float:right;
width:58px;
height:30px;
}
.if1{
margin-top:8px;
margin-right:4px;
float:left;
width:14px;
height:14px;
}
.place{
font-size:12px;
line-height:30px;
float:left;
height:30px;
}
.pl{
font-size:12px;
color:#aaa;
text-decoration:none;
}
.pl:hover{
color:#f10215;
}
.logo_title{
position:absolute;
display:block;
margin-left:82px;
}
.logo_tit_lk{
background-position:0 0;
overflow:hidden;
display:block;
width:190px;
height:170px;
background-image:url("F:/HtmlTest/京东首页/images/sprite.head.png");
font-size:0;
text-decoration:none;
color:#666;
border-bottom:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
#header{
width:100%;
height:140px;
background-color:#f0f3ef;
}
#header .hdmid{
width:1200px;
height:100%;
margin:0 auto;
}
#search{
width:100%;
height:35px;
padding-top:25px;
}
.form{
width:550px;
height:35px;
margin-left:320px;
float:left;
}
.form .search_input{
float:left;
width:450px;
height:25px;
padding:4px 44px 4px 4px;
border:1px solid transparent;
line-height:25px;
}
.click_a{
text-decoration:none;
}
.search_click{
width:50px;
height:35px;
line-height:35px;
border:none;
background-color:#f10215;
//差搜索的放大镜
}
#shoppingchart{
width:190px;
height:35px;
float:left;
border:1px solid #e3e4e5;
margin-left:30px;
line-height:35px;
}
.charticon{
float:left;
width:16px;
height:16px;
margin-top:9px;
margin-bottom:10px;
margin-left:40px;
margin-right:3px;
background-color:green;
}
.mychart{
font-size:12px;
float:left;
color:#f10215;
text-decoration:none;
}
.chartnum{
float:left;
width:16px;
height:16px;
margin-top:9px;
margin-bottom:10px;
margin-left:3px;
background-color:green;
}
#appqrcode{
width:60px;
height:60px;
float:right;
border:1px solid #e3e4e5;
background:url("F:/HtmlTest/京东首页/images/appqrcode.png") center no-repeat;
}
#hotwords{
height:20px;
width:550px;
margin:0 auto;
//background-color:red;
}
#hotwords a{
font-size:12px;
color:#aaa;
text-decoration:none;
float:left;
line-height:20px;
margin-right:10px;
}
#hotwords a:hover{
color:#f10215;
}
#hotwords .colorred{
color:#f10215;
}
#navitems{
width:790px;
height:40px;
margin-left:220px;
padding-top:20px;
float:left;
}
#navitems ul{
height:40px;
float:left;
}
#navitems ul li{
list-style:none;
float:left;
margin-right:25px;
}
#navitems ul li a{
height:40px;
line-height:40px;
font-size:14px;
color:#333;
text-decoration:none;
}
#navitems ul li a:hover{
color:#f10215;
}
.lspacer{
height:15px;
line-height:40px;
margin-top:13px;
width:1px;
background-color:#aaa;
text-align:center;
}
#treasure{
float:left;
width:190px;
height:40px;
margin-top:14px;
background:url("F:/HtmlTest/京东首页/images/treasure.jpg") center no-repeat;
background-color:red;
}
#bd_mid{
height:500px;
width:100%;
margin-top:20px;
background-color:#f0f3ef;
}
.side_pic .side_pic_lk{
position:absolute;
left:-80px;
top:280px;
}
.side_pic{
float:left;
width:82px;
height:470px;
}
.bd_mid_cen{
width:1190px;
height:500px;
//margin:0 auto;
float:left;
}
.mid_cen_cate_menu{
height:460px;
width:180px;
float:left;
margin-left:2px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
background-color:#fff;
}
.mid_cen_cate_menu ul{
//padding-left:10px;
}
.mid_cen_cate_menu ul li{
list-style:none;
height:28px;
width:180px;
}
.mid_cen_cate_menu ul li a{
text-decoration:none;
line-height:28px;
font-size:14px;
color:#626262;
}
.mid_cen_cate_menu ul li a:hover{
color:#f10215;
}
.mid_cen_cate_menu ul li span{
font-size:12px;
color:#626262;
margin-left:4px;
/*margin-right:2px;*/
}
.mid_cen_pic_show{
float:left;
width:590px;
height:470px;
padding:0 0;
margin-left:10px;
margin-top:10px;
}
.mid_cen_pic_show_dr{
float:left;
height:480px;
width:190px;
margin-left:10px;
}
.mid_cen_pic_show_dr_t{
height:150px;
width:190px;
margin-top:10px;
}
.mid_cen_pic_show_dr_m{
height:150px;
width:190px;
margin-top:10px;
}
.mid_cen_pic_show_dr_b{
height:150px;
width:190px;
margin-top:10px;
}
.bd_mid_cen_col4{
float:left;
height:480px;
width:188px;
background-color:#fff;
margin-left:10px;
}
.bd_mid_cen_col4_user{
height:78px;
width:188px;
margin-top:5px;
//background-color:green;//#fff
}
.bd_mid_cen_col4_user a:hover{
color:#f10215;
}
.user_avatar{
border:5px solid #e1e3ef;
border-radius:50%;
margin:0 auto;
width: 55px;
height: 55px;
text-align:center;
background:url("F:/HtmlTest/京东首页/images/no_login.jpg") no-repeat;
background-size:100% 100%;
box-shadow:3px 6px 25px #c3c3c3;
}
.user_show{
width:190px;
height:40px;
margin:0 auto;
text-align:center;
}
.user_show p{
width:190px;
height:20px;
line-height:20px;
font-size:12px;
color:#888;
}
.login_regist a{
text-decoration:none;
color:#888;
}
.login_regist .login_regist_regist{
color:#f10215;
margin-left:5px;
}
.user_profit{
margin-top:15px;
height:25px;
width:100%;
text-align:center;
}
.user_profit a{
display:inline-block;
width:68px;
height:23px;
line-height:25px;
text-align:center;
text-decoration:none;
font-size:12px;
border-radius:13px;
box-shadow:6px 8px 20px #ccc;
}
.user_profit .user_profit_newer{
border:1px solid #fff;
color:#f10215;
background-color:#fff;
}
.user_profit .user_profit_VIP{
margin-left:8px;
border:1px solid #000;
color:#e5d790;
background-color:#000;
}
.bd_mid_cen_col4_news{
height:125px;
width:100%;
margin-top:18px;
//background-color:green;
border-bottom:1px solid #e1e3ef;
}
.news_title{
width:100%;
height:20px;
}
.news_title a{
text-decoration:none;
font-size:13px;
height:20px;
line-height:20px;
width:24px;
color:#333;
}
.news_title a:hover{
color:#f10215;
}
.title1{
margin-left:12px;
margin-right:24px;
border-bottom:2px solid #f10215;
}
.title2{
height:20px;
width:24px;
margin-right:38px;
}
.news_list{
margin-top:7px;
margin-left:7px;
}
.news_list ul li{
margin-left:6px;
height:22px;
width:160px;
line-height:22px;
font-size:12px;
color:#333;
}
.bd_mid_cen_col4_service{
margin-top:10px;
width:100%;
height:180px;
//background-color:green;
}
.service_inside{
margin-top:10px;
margin-left:10px;
margin-right:10px;
width:168px;
height:180px;
}
.service_list li{
float:left;
}
.service_list li a{
padding-top:5px;
width:42px;
height:55px;
text-decoration:none;
color:#bea68d;
}
.service_list li a div{
width:42px;
height:28px;
background-color:red;
}
.service_list li a span{
display:block;
width:42px;
height:27px;
line-height:27px;
text-align:center;
font-size:13px;
}
#secondkill{
height:275px;
width:100%;
margin-top:10px;
margin-bottom:30px;
background-color:#f0f3ef;
}
.seckil_mid{
height:275px;
width:1190px;
background-color:#fff;
margin:0 auto;
}
.sk_mid_lk{
display:block;
float:left;
height:275px;
width:190px;
background-color:#e83632;
}
.sk_title{
width:100%;
height:51px;
margin-top:45px;
text-align:center;
font-size:34px;
color:#fff;
}
.sk_subtit{
width:100%;
height:30px;
text-align:center;
font-size:20px;
color:rgba(255,255,255,0.5);
}
.sk_icon{
width:22px;
height:33px;
margin:5px auto;
background-color:rgba(255,255,255,0.5);
}
.sk_comment{
width:100%;
height:24px;
text-align:center;
font-size:16px;
color:#fff;
}
.sk_cd{
width:135px;
height:40px;
margin:16px auto;
//background-color:#fff;
}
.cd_item{
float:left;
width:40px;
height:40px;
text-align:center;
background-color:#2f3430;
}
.cd_item:before{
content: '';
display:block;
width:100%;
margin-top:50%;
height:1px;
background:#e83632;
}
.cd_hour{
margin-right:5px;
}
.cd_minute{
margin-right:5px;
}
.cd_item_txt{
display:block;
margin-top:-21px;
line-height:40px;
font-weight:bold;
font-size:20px;
color:#fff;
}
.seckil_mid_cen{
position:relative;
}
.seckil_mid_1{
height:275px;
width:200px;
float:left;
//background-color:#8082d5;
border-right:1px solid #f0f3ef;
}
.sk_mid1_lk{
display:block;
height:275px;
width:190px;
margin-left:5px;
margin-right:5px;
background-color:#fff;
text-align:center;
position:relative;
}
.sk_mid1_lk_pic{
background-color:#8082d5;
position: absolute;
width: 140px;
height: 140px;
left: 50%;
margin-left: -70px;
top: 40px;
}
.sk_mid1_lk_nm{
width:190px;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
font-size:12px;
position: absolute;
top: 190px;
left: 0;
color:#666;
}
.sk_mid1_lk_nm:hover{
color:#f10215;
}
.sk_mid1_lk_prc{
position: absolute;
left: 15px;
top: 230px;
width: 160px;
height: 20px;
padding: 1px;
background: #e6382f;
line-height: 20px;
text-align:center;
}
.sk_mid1_lk_prc_now{
float: left;
width: 80px;
height: 20px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.sk_mid1_lk_prc_now i{
margin-right:-2px;
font-family: arial;
font-weight: 400;
font-weight:bold;
font-size: 12px;
}
.sk_mid1_lk_prc_old{
float: left;
width: 80px;
height: 20px;
background: #fff;
text-align: center;
color: #b7bcb8;
font-size: 12px;
text-decoration: line-through;
}
.sk_mid1_lk_prc_old i{
margin-right: 3px;
font-family: arial;
font-weight: 400;
font-weight:bold;
font-size: 12px;
}
.seckil_mid_2{
height:275px;
width:200px;
float:left;
text-align:center;
//background-color:#239723;
border-right:1px solid #f0f3ef;
}
.sk_mid2_lk{
display:block;
height:275px;
width:190px;
margin-left:5px;
margin-right:5px;
background-color:#fff;
text-align:center;
position:relative;
}
.sk_mid2_lk_pic{
background-color:#8082d5;
position: absolute;
width: 140px;
height: 140px;
left: 50%;
margin-left: -70px;
top: 40px;
}
.sk_mid2_lk_nm{
width:190px;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
font-size:12px;
position: absolute;
top: 190px;
left: 0;
color:#666;
}
.sk_mid2_lk_nm:hover{
color:#f10215;
}
.sk_mid2_lk_prc{
position: absolute;
left: 15px;
top: 230px;
width: 160px;
height: 20px;
padding: 1px;
background: #e6382f;
line-height: 20px;
text-align:center;
}
.sk_mid2_lk_prc_now{
float: left;
width: 80px;
height: 20px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.sk_mid2_lk_prc_now i{
margin-right:-2px;
font-family: arial;
font-weight: 400;
font-weight:bold;
font-size: 12px;
}
.sk_mid2_lk_prc_old{
float: left;
width: 80px;
height: 20px;
background: #fff;
text-align: center;
color: #b7bcb8;
font-size: 12px;
text-decoration: line-through;
}
.sk_mid2_lk_prc_old i{
margin-right: 3px;
font-family: arial;
font-weight: 400;
font-weight:bold;
font-size: 12px;
}
.seckil_mid_3{
height:275px;
width:200px;
float:left;
text-align:center;
//background-color:#234234;
border-right:1px solid #f0f3ef;
}
.sk_mid3_lk{
display:block;
height:275px;
width:190px;
margin-left:5px;
margin-right:5px;
background-color:#fff;
text-align:center;
position:relative;
}
.sk_mid3_lk_pic{
background-color:#8082d5;
position: absolute;
width: 140px;
height: 140px;
left: 50%;
margin-left: -70px;
top: 40px;
}
.sk_mid3_lk_nm{
width:190px;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
font-size:12px;
position: absolute;
top: 190px;
left: 0;
color:#666;
}
.sk_mid3_lk_nm:hover{
color:#f10215;
}
.sk_mid3_lk_prc{
position: absolute;
left: 15px;
top: 230px;
width: 160px;
height: 20px;
padding: 1px;
background: #e6382f;
line-height: 20px;
text-align:center;
}
.sk_mid3_lk_prc_now{
float: left;
width: 80px;
height: 20px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.sk_mid3_lk_prc_now i{
margin-right:-2px;
font-family: arial;
font-weight: 400;
font-weight:bold;
font-size: 12px;
}
.sk_mid3_lk_prc_old{
float: left;
width: 80px;
height: 20px;
background: #fff;
text-align: center;
color: #b7bcb8;
font-size: 12px;
text-decoration: line-through;
}
.sk_mid3_lk_prc_old i{
margin-right: 3px;
font-family: arial;
font-weight: 400;
font-weight:bold;
font-size: 12px;
}
.seckil_mid_4{
height:275px;
width:200px;
float:left;
text-align:center;
//background-color:#230988;
border-right:1px solid #f0f3ef;
}
.sk_mid4_lk{
display:block;
height:275px;
width:190px;
margin-left:5px;
margin-right:5px;
background-color:#fff;
text-align:center;
position:relative;
}
.sk_mid4_lk_pic{
background-color:#8082d5;
position: absolute;
width: 140px;
height: 140px;
left: 50%;
margin-left: -70px;
top: 40px;
}
.sk_mid4_lk_nm{
width:190px;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
font-size:12px;
position: absolute;
top: 190px;
left: 0;
color:#666;
}
.sk_mid4_lk_nm:hover{
color:#f10215;
}
.sk_mid4_lk_prc{
position: absolute;
left: 15px;
top: 230px;
width: 160px;
height: 20px;
padding: 1px;
background: #e6382f;
line-height: 20px;
text-align:center;
}
.sk_mid4_lk_prc_now{
float: left;
width: 80px;
height: 20px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.sk_mid4_lk_prc_now i{
margin-right:-2px;
font-family: arial;
font-weight: 400;
font-size: 12px;
font-weight:bold;
}
.sk_mid4_lk_prc_old{
float: left;
width: 80px;
height: 20px;
background: #fff;
text-align: center;
color: #b7bcb8;
font-size: 12px;
text-decoration: line-through;
}
.sk_mid4_lk_prc_old i{
margin-right: 3px;
font-family: arial;
font-weight: 400;
font-size: 12px;
}
.seckil_mid_r{
height:275px;
width:196px;
float:left;
text-align:center;
position:relative;
//background-color:#347583;
}
.seckil_mid_r_pic{
width:180px;
height:260px;
text-align:center;
margin-top:8px;
}
.seckil_mid_r_indicators{
width:28px;
height:14px;
display:block;
position: absolute;
left: 50%;
bottom:16px;
font-size: 0;
margin-left:-14px;
text-align: center;
//background-color:#234554;
}
.seckil_mid_r_indicators i{
float:left;
text-align:center;
line-height:14px;
margin:4px;
width:6px;
height:6px;
border-radius:50%;
}
.seckil_mid_r_indicators_l{
background-color:#e6382f;
}
.seckil_mid_r_indicators_r{
background-color:#b7bcb8;
}
.seckil_mid_former{
position: absolute;
top: 110px;
width: 20px;
height: 40px;
line-height: 40px;
background-color: #ddd;
margin-top: -20px;
font-size: 20px;
z-index: 2;
border:none;
}
.seckil_mid_former i{
line-height:40px;
text-align:center;
font-size:25px;
color:#fff;
}
.seckil_mid_former:hover{
background-color: #bbb;
}
.seckil_mid_next{
position: absolute;
top: 110px;
left:973px;
width: 20px;
height: 40px;
line-height: 40px;
background-color: #ddd;
margin-top: -20px;
font-size: 20px;
z-index: 2;
border:none;
}
.seckil_mid_next i{
line-height:40px;
text-align:center;
font-size:25px;
color:#fff;
}
.seckil_mid_next:hover{
background-color: #bbb;
}
#corebd1{
width:100%;
height:450px;
color:#666;
}
.corebd1_cen{
width:1190px;
height:450px;
margin:0px auto 30px;
//background-color:#237248;
}
.corebd1_cen_l{
float:left;
width:390px;
height:450px;
background-color:#479543;
margin:0 10px 0 0;
}
.corebd1_cen_m{
float:left;
width:390px;
height:450px;
background-color:#979875;
margin:0 10px 0 0;
}
.corebd1_cen_r{
float:left;
width:390px;
height:450px;
background-color:#257886;
margin:0 0 0 0;
}
#corebd2{
margin:30px auto;
width:100%;
height:450px;
color:#666;
}
.corebd2_cen{
width:1190px;
height:450px;
margin:0px auto 30px;
//background-color:#237248;
}
.corebd2_cen_l{
float:left;
width:390px;
height:450px;
background-color:#347;
margin:0 10px 0 0;
}
.corebd2_cen_m{
float:left;
width:390px;
height:450px;
background-color:#732;
margin:0 10px 0 0;
}
.corebd2_cen_r{
float:left;
width:390px;
height:450px;
background-color:#876;
margin:0 0 0 0;
}您看完了吗？希望您对我写的不妥之处不吝指出 :-D