console
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
京东(JD.COM)-综合网购首选-正品低价、品质保证、配送及时、轻松购物！
</title>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<header>
<div class="w">
<a href="#">
<img src="images/Advertisment.jpg" alt="头广告">
</a>
</div>
</header>
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li>
<i class="f10">
</i>
北京
</li>
</ul>
<ul class="fr ">
<li>
<a href="#">
你好，请登录
</a>
<a href="#" class="f10">
免费注册
</a>
</li>
<li class="space">
</li>
<li>
<a href="#">
我的订单
</a>
</li>
<li class="space">
</li>
<li>
<a href="#">
我的京东
</a>
<i>
</i>
</li>
<li class="space">
</li>
<li>
<a href="#">
京东会员
</a>
</li>
<li class="space">
</li>
<li>
<a href="#">
企业采购
</a>
</li>
<li class="space">
</li>
<li>
<a href="#">
客户服务
</a>
<i>
</i>
</li>
<li class="space">
</li>
<li>
<a href="#">
网站导航
</a>
<i>
</i>
</li>
<li class="space">
</li>
<li>
<a href="#">
手机京东
<div class="qrcode">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="w middle">
<div class="logo">
<h1>
<a href="#">
</a>
</h1>
</div>
<div class="form">
<input type="text" name="search" placeholder="手机">
<div class="camera">
<i>
</i>
</div>
<button type="button">
<i>
</i>
</button>
</div>
<div class="shopCar">
<a href="#">
<i class="f10">
</i>
我的购物车
<span>
0
</span>
</a>
</div>
<div class="hotwords">
<a href="#" class="f10">
阿胶滋补节
</a>
<a href="#">
玩所未玩
</a>
<a href="#">
圣诞礼物
</a>
<a href="#">
每100-30
</a>
<a href="#">
养殖取暖
</a>
<a href="#">
圣诞狂欢
</a>
<a href="#">
OPPO
</a>
<a href="#">
满千减百
</a>
</div>
<div class="navitems">
<ul>
<li>
<a href="#">
秒杀
</a>
</li>
<li>
<a href="#">
优惠券
</a>
</li>
<li>
<a href="#">
PLUS会员
</a>
</li>
<li>
<a href="#">
闪购
</a>
</li>
<li class="space1">
</li>
<li>
<a href="#">
拍卖
</a>
</li>
<li>
<a href="#">
京东时尚
</a>
</li>
<li>
<a href="#">
京东超市
</a>
</li>
<li>
<a href="#">
京东生鲜
</a>
</li>
<li class="space1">
</li>
<li>
<a href="#">
海囤全球
</a>
</li>
<li>
<a href="#">
京东金融
</a>
</li>
</ul>
</div>
<div class="advertisement">
<a href="#">
</a>
</div>
</div>
<footer>
<div class="service">
<div class="w">
<ul>
<li>
<h5>
</h5>
<p>
品类齐全，轻松购物
</p>
</li>
<li>
<h5>
</h5>
<p>
多仓直发，急速配送
</p>
</li>
<li>
<h5>
</h5>
<p>
正品行货，精致服务
</p>
</li>
<li>
<h5>
</h5>
<p>
天天低价，畅选无忧
</p>
</li>
</ul>
</div>
</div>
<div class="w help">
<div class="fl">
<ul>
<li>
<dl>
<dt>
<h5>
购物指南
</h5>
</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>
</li>
<li>
<dl>
<dt>
<h5>
配送方式
</h5>
</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>
</li>
<li>
<dl>
<dt>
<h5>
支付方式
</h5>
</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>
</dl>
</li>
<li>
<dl>
<dt>
<h5>
售后服务
</h5>
</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>
</dl>
</li>
<li>
<dl>
<dt>
<h5>
特色服务
</h5>
</dt>
<dd>
<a href="#">
夺宝岛
</a>
</dd>
<dd>
<a href="#">
DIY装机
</a>
</dd>
<dd>
<a href="#">
延保服务
</a>
</dd>
<dd>
<a href="#">
京东E卡
</a>
</dd>
<dd>
<a href="#">
京东通信
</a>
</dd>
<dd>
<a href="#">
京东JD+
</a>
</dd>
</dl>
</li>
</ul>
</div>
<div class="fr">
<div class="content">
<h5>
京东自营覆盖区县
</h5>
<div class="contentP">
<p>
京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
</p>
<p>
<a href="#">
查看详情
<i>
</i>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="w copyright">
<p>
<a href="#">
关于我们
</a>
<span>
|
</span>
<a href="#">
联系我们
</a>
<span>
|
</span>
<a href="#">
联系客服
</a>
<span>
|
</span>
<a href="#">
合作招商
</a>
<span>
|
</span>
<a href="#">
商家帮助
</a>
<span>
|
</span>
<a href="#">
营销中心
</a>
<span>
|
</span>
<a href="#">
手机京东
</a>
<span>
|
</span>
<a href="#">
友情链接
</a>
<span>
|
</span>
<a href="#">
销售联盟
</a>
<span>
|
</span>
<a href="#">
京东社区
</a>
<span>
|
</span>
<a href="#">
风险监测
</a>
<span>
|
</span>
<a href="#">
隐私政策
</a>
<span>
|
</span>
<a href="#">
京东公益
</a>
<span>
|
</span>
<a href="#">
English Site
</a>
<span>
|
</span>
<a href="#">
Media & IR
</a>
</p>
<div class="safe">
<p>
<a href="#">
京公网安备 11000002000088号
</a>
<span>
|
</span>
<a href="#">
京ICP证070359号
</a>
<span>
|
</span>
<a href="#">
互联网药品信息服务资格证编号(京)-经营性-2014-0008
</a>
<span>
|
</span>
<a href="#">
新出发京零 字第大120007号
</a>
<span>
|
</span>
</p>
<p>
<a href="#">
互联网出版许可证编号新出网证(京)字150号
</a>
<span>
|
</span>
<a href="#">
出版物经营许可证
</a>
<span>
|
</span>
<a href="#">
网络文化经营许可证京网文[2014]2148-348号
</a>
<span>
|
</span>
<a href="#">
违法和不良信息举报电话：4006561155
</a>
<span>
|
</span>
</p>
<p>
<a href="#">
Copyright © 2004 - 2018 京东JD.com 版权所有
</a>
<span>
|
</span>
<a href="#">
消费者维权热线：4006067733经营证照
</a>
<span>
|
</span>
<a href="#">
(京)网械平台备字(2018)第00003号
</a>
<span>
|
</span>
<a href="#">
营业执照
</a>
<span>
|
</span>
</p>
<p>
<a href="#">
Global Site
</a>
<span>
|
</span>
<a href="#">
Сайт России
</a>
<span>
|
</span>
<a href="#">
Situs Indonesia
</a>
<span>
|
</span>
<a href="#">
Sitio de España
</a>
<span>
|
</span>
<a href="#">
เว็บไซต์ประเทศไทย
</a>
<span>
|
</span>
</p>
<p>
<a href="#">
京东旗下网站：京东钱包
</a>
<span>
|
</span>
<a href="#">
京东云
</a>
<span>
|
</span>
</p>
</div>
<div class="icomoon">
<p>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
</p>
</div>
</div>
</footer>
</body>
</html>
.w {
width: 1190px;
margin: 0 auto;
}
body {
background-color: #f0f3ef;
}
.fl {
float: left;
}
.fr {
float: right;
}
.f10 {
color: #f10215!important;
}
input,
button {
border: 0px;
outline: none;
}
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #999999;
display: inline-block;
}
span {
color: #ccc;
margin: 0 5px;
}
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?ycbsl3');
src: url('../fonts/icomoon.eot?ycbsl3#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?ycbsl3') format('truetype'), url('../fonts/icomoon.woff?ycbsl3') format('woff'), url('../fonts/icomoon.svg?ycbsl3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
header {
height: 80px;
background-color: #5a0b11;
}
.shortcut {
height: 30px;
background-color: #e3e4e5;
border-bottom: 1px solid #cccccc;
font-size: 12px;
color: #999999;
}
.city {
line-height: 30px;
margin-left: 205px;
}
.shortcut a {
line-height: 30px;
}
.shortcut a:hover {
color: #e33333;
}
.shortcut ul li {
float: left;
position: relative;
}
.shortcut i {
font-family: "icomoon";
font-style: normal;
}
.space {
width: 1px;
height: 10px;
background-color: #cccccc;
margin: 11px 12px 0;
}
a .qrcode {
position: absolute;
right: -12px;
margin: 0 1px 0px 0px;
width: 66px;
height: 66px;
border: 2px solid #cfcfcf;
background: #f6f6f6 url(../images/mobile_qrcode.png) 50% no-repeat;
}
.middle {
height: 140px;
position: relative;
}
.logo h1 a {
display: block;
width: 190px;
height: 170px;
background: url(../images/sprite.head.png) no-repeat;
position: absolute;
left: 0;
top: -31px;
box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2), -1px 0px 1px rgba(0, 0, 0, 0.2);
}
.form {
width: 550px;
height: 35px;
position: absolute;
left: 320px;
top: 25px;
display: flex;
position: relative;
}
.form input {
width: 91%;
padding-left: 6px;
font-size: 14px;
color: #333;
}
.form button {
width: 9%;
background-color: #f10215;
}
.form .camera i {
font-family: "icomoon";
font-style: normal;
font-size: 20px;
color: #999;
position: absolute;
right: 65px;
top: 5px;
}
.form button i {
font-family: "icomoon";
font-style: normal;
color: #fff;
font-size: 20px;
}
.form button,
.form .camera i {
cursor: pointer;
}
.shopCar a {
width: 188px;
height: 33px;
line-height: 33px;
text-align: center;
background-color: pink;
position: absolute;
right: 100px;
top: 25px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 12px;
color: #f10214;
}
.shopCar i {
font-family: "icomoon";
font-style: normal;
font-size: 14px;
margin-right: 6px;
}
.shopCar span {
height: 14px;
width: 14px;
font-size: 12px;
text-align: center;
line-height: 15px;
background-color: #f10214;
color: #fff;
border-radius: 50%;
position: absolute;
right: 36px;
top: 6px;
}
.hotwords {
position: absolute;
left: 320px;
top: 65px;
}
.hotwords a {
margin: 0 3px;
font-size: 12px;
}
.navitems {
position: absolute;
bottom: 0;
left: 225px;
padding-bottom: 10px;
}
.navitems li {
float: left;
margin-right: 23px;
}
.navitems li a {
font-size: 14px;
color: #333;
}
.navitems li a:hover {
color: #e33333;
}
.navitems .space1 {
width: 1px;
height: 10px;
background-color: #cccccc;
margin-top: 5px;
}
.advertisement a {
display: block;
width: 190px;
height: 40px;
background: url(../images/广告.gif) no-repeat;
position: absolute;
right: 0;
bottom: 10px;
}
footer {
margin-top: 35px;
background-color: #F0F3EF;
}
.service {
padding: 30px 0;
border-bottom: 1px solid #dedede;
}
.service ul {
display: flex;
flex-direction: row;
}
.service ul li {
text-align: center;
font-size: 18px;
font-weight: 700;
color: #444;
flex: 1;
position: relative;
}
.service ul li:nth-child(1) h5,
.service ul li:nth-child(2) h5,
.service ul li:nth-child(3) h5,
.service ul li:nth-child(4) h5 {
width: 36px;
height: 43px;
position: absolute;
bottom: -12px;
left: 22px;
}
.service ul li:nth-child(1) h5 {
background: url(../images/sprite.footer.png) no-repeat left bottom;
}
.service ul li:nth-child(2) h5 {
background: url(../images/sprite.footer.png) no-repeat -41px bottom;
}
.service ul li:nth-child(3) h5 {
background: url(../images/sprite.footer.png) no-repeat -82px bottom;
}
.service ul li:nth-child(4) h5 {
background: url(../images/sprite.footer.png) no-repeat -123px bottom;
}
.help {
height: 200px;
border-bottom: 1px solid #dedede;
}
.help ul li {
float: left;
padding-right: 140px;
}
.help ul li:last-child {
padding-right: 0;
}
.help dl dt {
margin-top: 20px;
margin-bottom: 5px;
color: #666;
}
.help dl dd a {
margin-top: 10px;
font-size: 12px;
color: #666;
}
.help dl dd a:hover {
color: #c81623;
}
.content {
width: 200px;
height: 150px;
margin-top: 20px;
color: #666;
background: url(../images/sprite.footer.png) no-repeat;
font-size: 12px;
}
.content h5 {
text-align: center;
font-size: 14px;
}
.content p:first-child {
line-height: 18px;
margin: 20px 10px 0;
}
.content p a {
float: right;
color: #666;
margin-right: 10px;
}
.content p a i {
font-family: "icomoon";
font-style: normal;
font-size: 16px;
color: #666;
}
.copyright {
padding-top: 20px;
text-align: center;
}
.copyright p a {
color: #666;
font-size: 12px;
}
.safe {
margin-top: 10px;
}
.safe p a {
color: #999;
padding-top: 10px;
}
.content p a:hover,
.copyright p a:hover,
.safe p a:hover {
color: #c81623;
}
.icomoon p a {
display: inline-block;
margin-top: 35px;
width: 105px;
height: 30px;
text-align: center;
}
.icomoon p a:nth-child(1) {
background: url(../images/sprite.footer.png) no-repeat right top;
}
.icomoon p a:nth-child(2) {
background: url(../images/sprite.footer.png) no-repeat right -38px;
}
.icomoon p a:nth-child(3) {
background: url(../images/sprite.footer.png) no-repeat right -76px;
}
.icomoon p a:nth-child(4) {
background: url(../images/sprite.footer.png) no-repeat right -114px;
}
.icomoon p a:nth-child(5) {
background: url(../images/sprite.footer.png) no-repeat right -152px;
}