-HTML&CSS- 之京东首页学习

最新推荐文章于 2022-04-23 14:19:19 发布

DragonWar%

最新推荐文章于 2022-04-23 14:19:19 发布

阅读量419 python

原文链接：https://my.oschina.net/u/3805464/blog/1806359

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

转载于:https://my.oschina.net/u/3805464/blog/1806359