console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//jsrun.net/hKVKp.css">
<style>
div{
background-color:#2c65f;
}
</style>
</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/29/Il4qZzv7ubHFahc.jpg" alt="">
<a href="javascript:;" class="close-banner"></a>
</div>
</div>
<div class="search">
<div class="w clearfix">
<div class="search-logo">
<a href="http://www.jd.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/29/9Ply4xuI7r1gGCv.png" alt="">
</span>
<span class="item slogen2">
<img src="https://i.loli.net/2021/05/29/a2yR3soSNfV4XOx.png" alt="">
</span>
<span class="item slogen3">
<img src="https://i.loli.net/2021/05/29/qPADai4NzIGoh2t.png" alt="">
</span>
<span class="item slogen4">
<img src="https://i.loli.net/2021/05/29/EcPZLSnK36fH1gO.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://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=67259607,820788590&fm=26&gp=0.jpg" />京公网安备 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/EI8aqMKoVJb3mAy.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;
}
.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/7CzvwbMkWfjO4XS) no-repeat;
left: 5px;
top: 5px;
}
.tobanner {
background-color: #8A25C6;
}
.close-banner {
position: absolute;
right: 0;
top: 5px;
width: 19px;
height: 19px;
background: url(https://sm.ms/image/MwVyXrLQbU7mS89) 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 {
margin-left: 30px;
width: 270px;
height: 60px;
display: block;
text-indent: -9999px;
background: url(https://i.loli.net/2021/05/29/LFYDE9Hnw2GeVUp.jpg) no-repeat;
}
.search-input {
margin-left: -20px;
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(../images/tel.jpg) 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: #f5f5f5;
position: relative;
margin-bottom: 30px;
}
.slogen img{
width: 340px;
}
.item {
width: 302px;
position: absolute;
top: 20px;
left: 50%;
}
.slogen1 {
margin-left: -608px;
}
.slogen2 {
margin-left: -304px;
}
.slogen3 {
margin-left: 2px;
}
.slogen4 {
margin-left: 304px;
}
.footer-shopping {
margin-top: 32px;
}
.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/05/29/5tJCY76PDKLylU4.jpg) no-repeat left bottom;
}
.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: 20px;
height: 15px;
}
.footer-bottom-img a {
margin: 0 5px;
}
.footer-bottom-img img{
width: 80%;
}