console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//jsrun.net/9gVKp.css">
<title>仿京东</title>
</head>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<div class="dt">送至：北京 <i><s>◇</s></i></div>
</div>
<div class="fr">
<ul>
<li><a href="#">你好，请登录</a>
<a href="#" class="col-red">免费注册</a></li>
<li class="line"></li>
<li>我的订单</li>
<li class="line"></li>
<li class="fore">我的京东 <i><s>◇</s></i></li>
<li class="line"></li>
<li>京东会员</li>
<li class="line"></li>
<li>企业采购</li>
<li class="line"></li>
<li class="fore tel-jd"><em class="tel"></em>手机京东 <i><s>◇</s></i></li>
<li class="line"></li>
<li class="fore">关注京东 <i><s>◇</s></i></li>
<li class="line"></li>
<li class="fore">客户服务 <i><s>◇</s></i></li>
<li class="line"></li>
<li class="fore">网站导航 <i><s>◇</s></i></li>
</ul>
</div>
</div>
</div>
<div class="topbanner">
<div class="w tb"><img src="https://i.loli.net/2021/05/30/gEbWKOB5lYPnDIQ.jpg" alt="" />
<a href="javascript:;" class="close-banner"></a>
</div>
</div>
<div class="serach">
<div class="w clearfix">
<div class="search-logo"><a href="http://www.jx.com" title="京西" target="_blank">京东官网</a></div>
<div class="search-input"><input type="text" value="运动相机" /><button>搜索</button></div>
<div class="search-car"><a href="#">我的购物车</a><i class="icon1"></i><i class="icon2">>
</i><i class="icon3">8</i></div>
<div class="search-moreAlink"><a href="#" class="col-red">出境999</a><a href="#">沸腾厨卫</a><a href="#">249减100</a><a href="#">手机节</a><a href="#">每150减50</a><a href="#">男靴</a><a href="#">巧克力</a><a href="#">cool1手机</a><a href="#">男士卫衣</a></div>
</div>
</div>
<div class="slogen"><span class="item slogen1"><img src="https://i.loli.net/2021/05/30/AKEvnt1kIoXUzCp.png" alt=""/></span><span class="item slogen2"><img src="https://i.loli.net/2021/05/30/536ArBftI1WxE4p.png" alt=""/></span><span class="item slogen3"><img src="https://i.loli.net/2021/05/30/ezNyJjX2MblPxit.png" alt=""/></span>
<span class="item slogen4"><img src="https://i.loli.net/2021/05/30/PEOth5A8xFBIZWv.png" alt="" /></span>
</div>
<div class="w footer-shopping clearfix">
<dl><dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl><dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">211限时达</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</a></dd>
</dl>
<dl><dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl><dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="last-dl"><dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<div class="coverage">
<h3>京东自营覆盖区县</h3>
<p>京东已向全国2654个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p><a href="#">查看详情></a></div>
</div>
<div class="w footer-bottom">
<div class="footer-about"><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 Us</a></div>
<div class="footer-copyright"><img src="https://i.loli.net/2021/05/31/vQ9hWYqpKa4sJ1u.png"></a>京公网安备 11000002000088号 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号<br>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155<br>Copyright
© 2004 - 2016 JX.com 版权所有 | 消费者维权热线：4006067733<br>京东旗下网站：京东钱包 </div>
<div class="footer-bottom-img">
<a href="#"><img src="https://i.loli.net/2021/05/31/ywTNA1dKsEQjrmG.png"></a>
<a href="#"><img src="https://i.loli.net/2021/05/31/wNoqhO9zW7kLnxD.png"></a>
<a href="#"><img src="https://i.loli.net/2021/05/31/rmcXi7xLkyVNAb9.png"></a>
<a href="#"><img src="https://i.loli.net/2021/05/31/DSrFsTpLnU8eckO.png"></a>
<a href="#"><img src="https://i.loli.net/2021/05/31/nFfXgxLVWcjBMIK.png"></a>
<a href="#"><img src="https://i.loli.net/2021/05/31/7jGFlaRQ4OdELV9.png"></a>
</div>
</div>
</body>
</html>
@charset "UTF-8";
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin: 0;
padding: 0;
}
fieldset,
img,
input,
button {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul,
ol {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋体";
}
select,
input {
vertical-align: middle;
}
select,
input,
textarea {
font-size: 12px;
margin: 0;
}
textarea {
resize: none;
}
img {
border: 0;
vertical-align: middle;
}
table {
border-collapse: collapse;
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53";
color: #666;
background: #fff
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #C81623;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s,
i,
em {
font-style: normal;
text-decoration: none;
}
.col-red {
color: #C81623!important;
}
.w {
width: 1210px;
margin: 0 auto;
}
.fl {
float: left
}
.fr {
float: right
}
.al {
text-align: left
}
.ac {
text-align: center
}
.ar {
text-align: right
}
.hide {
display: none
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.shortcut {
height: 30px;
line-height: 30px;
background-color: #f1f1f1;
}
.dt,
.shortcut .fore {
padding: 0 20px 0 10px;
position: relative;
}
.dt i,
.fore i {
font: 400 15px/15px "宋体";
position: absolute;
top: 13px;
right: 3px;
height: 7px;
overflow: hidden;
width: 15px;
}
.dt s,
.fore s {
position: absolute;
top: -8px;
left: 0;
}
.fr li {
float: left;
padding: 0 10px;
}
.fr .line {
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px;
padding: 0;
}
.shortcut .tel-jd {
padding: 0 20px 0 25px;
}
.tel {
position: absolute;
width: 15px;
height: 20px;
background: url(https://sm.ms/image/pe8Wj3KSULqkhOY.png) no-repeat;
left: 5px;
top: 5px;
}
.shortcut {
height: 30px;
line-height: 30px;
background-color: #f1f1f1;
}
.topbanner {
background-color: white;
}
.close-banner {
position: absolute;
right: 0;
top: 5px;
width: 19px;
height: 19px;
background: url(https://sm.ms/image/IVc2hWiK19BC4b5) no-repeat;
}
.close-banner:hover {
background-position: bottom;
}
.tp {
position: relative;
}
.search-logo {
float: left;
width: 362px;
height: 60px;
padding: 20px 0;
}
.search-logo a {
width: 270px;
height: 60px;
display: block;
text-indent: -9999px;
background: url(https://i.loli.net/2021/05/30/PyZva9eB672GMHI.jpg) no-repeat;
}
.search-input {
float: left;
height: 36px;
padding-top: 25px;
}
.search-input input {
float: left;
width: 450px;
height: 32px;
padding-left: 4px;
font: 400 14px/32px "microsoft yahei";
color: rgb(153, 153, 153);
border: 2px solid #B61D1D;
border-right: 0;
}
.search-input button {
width: 82px;
height: 36px;
color: #fff;
float: left;
font: 400 16px/36px "微软雅黑";
background-color: #B61D1D;
cursor: pointer;
}
.search-car {
float: right;
width: 96px;
height: 34px;
line-height: 34px;
padding-left: 43px;
position: relative;
margin: 25px 65px 0 0;
border: 1px solid #DFDFDF;
background-color: #F9F9F9;
}
.icon1 {
position: absolute;
top: 9px;
left: 18px;
width: 18px;
height: 16px;
background: url(https://sm.ms/image/pe8Wj3KSULqkhOY) no-repeat 0 -58px;
}
.icon2 {
position: absolute;
right: 10px;
color: #999;
font: 13px/34px "SimSun";
}
.icon3 {
position: absolute;
top: -5px;
width: 16px;
height: 14px;
background-color: #C81623;
line-height: 14px;
text-align: center;
color: #fff;
border-radius: 7px 7px 7px 0;
}
.search-moreAlink {
float: left;
width: 530px;
height: 28px;
line-height: 28px;
}
.search-moreAlink a {
margin-right: 8px;
}
.slogen {
height: 54px;
padding: 20px 0;
background-color: white;
position: relative;
margin-bottom: 15px;
}
.slogen img {
width: 340px;
}
.item {
width: 302px;
position: absolute;
top: 10px;
left: 50%;
}
.slogen1 {
margin-left: -608px;
}
.slogen2 {
margin-left: -304px;
}
.slogen3 {
margin-left: 2px;
}
.slogen4 {
margin-left: 304px;
}
.footer-shopping {
margin-top: 16px;
}
.footer-shopping dl {
float: left;
width: 200px;
}
dl.last-dl {
width: 100px;
}
.footer-shopping dt {
height: 34px;
font: 400 16px/34px "microsoft yahei";
}
.footer-shopping dd {
line-height: 20px;
}
.coverage {
float: left;
width: 186px;
height: 169px;
margin-right: 60px;
padding-left: 17px;
background: url(https://i.loli.net/2021/06/01/yTGb8EXD6m1gu2t.jpg) no-repeat center;
}
.coverage h3 {
height: 34px;
font: 400 16px/34px "microsoft yahei";
}
.coverage p {
padding-top: 8px;
}
.coverage a {
float: right;
}
.footer-bottom {
margin-top: 20px;
text-align: center;
padding: 20px 0 30px;
border-top: 1px solid #E5E5E5;
}
.footer-bottom .footer-about a {
margin: 0 10px;
}
.footer-copyright {
padding: 10px 0;
}
.footer-copyright img {
width: 18px;
height: 18px;
}
.footer-bottom {
display: inline;
}
.footer-bottom-img a {
margin: 0 5px;
width: 200px center;
}
.footer-bottom-img a img {
width: 150px;
height: auto;
}