京东项目一
2019-05-31 本文已影响0人
潘肚饿兵哥哥
header部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东</title>
<!-- 引入ico图标-->
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入css初始化文件-->
<link rel="stylesheet" href="css/normalize.css">
<!-- 头部和底部结构基本相同 做基本公共样式-->
<link rel="stylesheet" href="css/base.css">
<!-- title部分 尽量不超过28个中文字 百度不支持-->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--description 尽量不超过120个汉字-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<!--6-8个关键词，公司的主要产品，给搜索引擎看的-->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
</head>
<body>
<!--header部分开始-->
<header>
<div class="w">
<a href="#">
<img src="images/header.jpg" alt="">
</a>
</div>
</header>
<!--header部分结束-->
</body>
</html>
.w { /*版心的公共类*/
width: 1190px;/*京东版心1190*/
margin: 0 auto;
}
/*------------------------------------------------------*/
/*header部分开始*/
header {
height: 80px;
background-color: #020000;
}
/*header部分结束*/
/*---------------------------------------------------------------*/
image.png
快速导航栏部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东</title>
<!-- 引入ico图标-->
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入css初始化文件-->
<link rel="stylesheet" href="css/normalize.css">
<!-- 头部和底部结构基本相同 做基本公共样式-->
<link rel="stylesheet" href="css/base.css">
<!-- title部分 尽量不超过28个中文字 百度不支持-->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--description 尽量不超过120个汉字-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<!--6-8个关键词，公司的主要产品，给搜索引擎看的-->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
</head>
<body>
<!--header部分开始-->
<header>
<div class="w">
<a href="#">
<img src="images/header.jpg" alt="">
</a>
</div>
</header>
<!--header部分结束-->
<!--快速导航栏开始-->
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li><i class="f10"></i><a href="#">北京</a></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="#" class="mobile">手机京东
<img src="images/mobile.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<!--快速导航栏结束-->
</body>
</html>
.w { /*版心的公共类*/
width: 1190px;/*京东版心1190*/
margin: 0 auto;
}
.fl { /*浮动的公共类*/
float: left;
}
.fr {
float: right;
}
a {
text-decoration: none; /*取消下划线*/
font-size: 12px;
color: #999;
}
a:hover {
color: #c81623;
}
ul {
list-style: none;
margin: 0; /*清除ul默认的内外边距*/
padding: 0;
}
body {
background-color: #f6f6f6;
}
.f10 {
color: #f10215!important;
}
@font-face { /*声明字体*/
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?1x1j55');
src: url('../fonts/icomoon.eot?1x1j55#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?1x1j55') format('truetype'),
url('../fonts/icomoon.woff?1x1j55') format('woff'),
url('../fonts/icomoon.svg?1x1j55#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------------------------------------*/
/*header部分开始*/
header {
height: 80px;
background-color: #020000;
}
/*header部分结束*/
/*---------------------------------------------------------------*/
/*快速导航栏开始*/
.shortcut { /*快速导航栏基本样式*/
height: 30px;
line-height: 30px;/*行高等于高，文字垂直居中*/
background-color: #e3e4e5;
border-bottom: 1px solid #ddd;
}
.city {
margin-left: 200px;
}
.shortcut li { /*右边快速导航栏*/
float: left;
}
.shortcut i { /*上面声明字体，这里要调用字体才会生效*/
font-family: "icomoon";
font-style: normal; /*这里也要取消倾斜，光在声明字体里取消倾斜是没有效果的*/
color: #ccc; /*这里指定了颜色，那么在地址的小图标那里调用f10红色是没有用的，权重不够，直接在.f10里加！important*/
}
.space { /*小竖线*/
width: 1px;
height: 10px;
background-color: #ccc;
margin: 10px 12px 0; /*上10 、左右12 、 下0 外边距*/
}
.mobile {
position: relative;
}
.mobile img {
position: absolute;
left: -3px;
top: 24px;
border: 1px solid #ccc;
padding: 2px;
}
/*快速导航栏结束*/
/*-------------------------------------------------------------------*/
image.png
logo部分
<div class="w middle">
<div class="logo"><!-- logo的固定写法 div>h1>a 放h1是为了提高权重 便于搜索引擎优化-->
<h1>
<a href="#"></a>
</h1>
</div>
</div>
css部分
h1要清除外边距
h1 {
margin: 0; /*清除ul默认的内外边距*/
padding: 0;
}
.middle {
height: 140px;
background-color: #ccc;
position: relative;
}
.logo {
/*margin-top: -30px; 加一个负的外边距 logo反而没有边距了,但是，和logo一列的其他盒子也一起跟着移动了，所以要用定位做*/
position: absolute;
top: -30px;
left: 0;
}
.logo a {
display: block;
width: 190px;
height: 170px;
background: #fff url(../images/logo.png) no-repeat; /*#fff是背景颜色，背景图片的背景颜色logo一般是背景图片，不是插入图片*/
搜索框部分
<div class="form">
<input type="text" placeholder="扫描仪"><!--placeholder输入的字是灰色的用户输入信息他会自动消失-->
<button><i></i></button><!--按钮，等同于 <input type="button">,只不过他是个双标签,因为按钮里要放放大镜字体图标，所以要用button标签装-->
</div>
清除样式：
ul, h1, p, input, button {
margin: 0; /*清除ul默认的内外边距*/
padding: 0;
}
input,button {
border: 0;
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 {
margin: 0; /*清除ul默认的内外边距*/
padding: 0;
}
css样式
.form {
width: 550px;
height: 35px;
position: absolute;
top: 25px;
left: 320px;
}
.form input { /*这里要到上面去清除input的内外边距和input、button的border和outline轮廓线*/
width: 495px;
height: 33px;
border: 1px solid #f10215;
float: left;
font-size: 14px;
padding-left: 3px;/*这里给搜索框里的文字边距的话，右边的提交按钮就会被挤掉下去，有两个解决方案，一个是 box-sizing: border-box; 改变盒子模型，一个是直接给input减去3px的宽度 */
}
.form button {
width: 50px;
height: 35px;
background-color: #f10215; /*input和button之间会有缝隙，给他们浮动，以取消缝隙*/
float: left;
}
.form button i {
font-family: "icomoon";/*调用字体*/
font-style: normal;
color: #fff;
}
image.png
我的购物车部分制作
<div class="shopCar">
<i></i><a href="#" class="f10">我的购物车</a><span>0</span>
</div>
css部分：
.shopCar {
width: 188px;
height: 33px;
border: 1px solid #ccc;
position: absolute;
top: 25px;
right: 95px;
background-color: #fff;
line-height: 33px;
text-align: center;/*字体图标和我的购物车文字居中*/
}
.shopCar i {
font-family: icomoon;
margin-right: 5px;/*字体图标和文字之间间距*/
font-style: normal;/*i标签里的字体图标是倾斜的，取笑他的默认样式*/
color: #f10215;
}
.shopCar span {
width: 15px;
height: 15px;
background-color: #f10215;
border-radius: 50%;
position: absolute; /*加了绝对定位、固定定位、浮动的行内元素不用转换模式，直接给宽高*/
top: 5px;
right: 30px;
font-size: 12px;
color: #fff;
line-height: 15px; /*不写这个15的话，他是默认继承33的，写了的话，就把33px层叠掉了*/
}
image.png
关键词部分
<div class="hotwords">
<a href="#" class="f10">199减100</a>
<a href="#">鼠标试用</a>
<a href="#">农资7折</a>
<a href="#">低至29元</a>
<a href="#">抽奖赢空调</a>
<a href="#">记忆棉</a>
<a href="#">坐垫</a>
<a href="#">1分钱买油</a>
<a href="#">智能手表</a>
</div>
css部分：
.hotwords { /*热词部分，第一个是红色，那就在html结构里加class="f10"调用之前的颜色就好了*/
position: absolute;
top: 68px;
left: 320px;
}
image.png
小导航栏
<div class="navitems">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">拍卖</a></li>
<li class="space"></li>
<li><a href="#">服装城</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li class="space"></li>
<li><a href="#">京东金融</a></li>
</ul>
css部分
.navitems {
width: 770px;
height: 40px;
position: absolute;
bottom: 0;
left: 200px;
line-height: 40px;
}
.navitems li {
float: left;
margin-left: 30px;
}
.navitems li a {
font-size: 16px;
font-weight: 700;
color: #555;
}
.navitems li a:hover {
color: #f10215;
}
.navitems .space {
/*margin-top: 15px;
margin-left: 15px;space会继承.navitems li的30px的宽度，这里给他改掉
margin-right: -15px;这里右边margin在前面写的样式里有12px的边距，还有继承的30px，就大了，这里改成-15px盒子本身距离的一半就够了*/
margin: 15px -15px 0 15px;
}
image.png
数码超级品类日部分
<div class="super">
<a href="#"> <img src="images/super.png" ></a>
</div>
css部分
.super {
position: absolute;
bottom: 10px;
right: 0;
}
image.png
底部份开始
底部服务开始
<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>
</footer>
css部分
footer {
margin-top: 35px;
height: 500px;
background-color: #eaeaea;
}
.service {
padding: 30px 0;/*这里给高的话，再设置字体在盒子里的宽高就麻烦了，直接给盒子设置padding值，中间剩余部分就是文字部分的高度。*/
border-bottom: 1px solid #dedede;
overflow: hidden;
}
.service ul li {
width: 297px;
height: 43px;
position: relative;
line-height: 43px;
float: left; /*这里 ul 、 li 没有高度，而浮动是不占位置的，那么父盒子就没有高度了，所以要清除浮动,这里给他的父级.service写 overflow: hidden;清除浮动也可以用clearfix*/
}
.service li h5 {
position: absolute;
top: 0;
left: 38px;
width: 36px;
height: 43px;
background: url(../images/ico.png) no-repeat;
text-indent: -999em;/*这个标签里的 多 字，可以删掉，也可以不删，不删的情况下，就用首行缩进，把这个字移除到浏览器界面外，*/
}
.service li:nth-child(2) h5 {
background-position: 0 -43px;/*这里写top也可以*/
}
.service li:nth-child(3) h5 {
background-position: 0 -86px;
}
.service li:nth-child(4) h5 {
background-position: bottom;/*也可以不写尺寸，直接这样写*/
}
.service li p {
font-weight: 700;
margin-left: 82px;/*这里可以给p标签外边距，或者给li内边距，直接给到文字的最左边，图标用定位再定出去，定位的元素不占位置。*/
}
image.png
底部帮助模块右侧
<div class="fr coverage">
<h5>京东自营覆盖区</h5>
<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<a href="#">查看详情 ></a>
</div>
css部分
.coverage {
width: 200px;
height: 150px;
background: url(../images/ico_footer.png) no-repeat;
}
.coverage h5 {
padding-left: 35px;
}
.coverage p {
font-size: 12px;
color: #666;
ling-height: 18px;
width: 180px;
}
.coverage a {
display: block;
margin-top:5px;
width: 180px;
text-align: right;
}
image.png
底部版权部分
<div class="w copyright">
<div class="fl">
<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="#">English Site</a>
<span>|</span>
<a href="#">Media & IR</a>
<span>|</span>
</p>
</div>
<div>
<p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p>
<p>Copyright © 2004 - 2017 京东JD.com 版权所有|消费者维权热线：4006067733经营证照
京东旗下网站：京东支付|京东云</p>
</div>
<p class="foot-icon">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</p>
css部分
.copyright {
padding-top: 20px;
text-align: center;
color: #666;
font-size: 12px;
}
.copyright span {
margin: 0 10px;
}
.copyright div {
margin-top: 20px;
}
.copyright div p {
line-height: 22px;
}
.foot-icon a {
display: inline-block; /*将a转换为行内块更容易写 行内块可以用text-align:center;居中对齐显示，由于他的父级已经写过text-align:center;居中对齐显示，所以这里都不用写了，只要有display: inline-block;他就会自动居中对齐显示了，如果写成block的话，还得从新写样式。转成行内块元素就方便多了*/
width: 103px;
height: 32px;
background: url(../images/ico_footer.png) no-repeat 0 -150px;
margin: 20px 4px 0; /*上20 左右4 下0*/
}
.foot-icon a:nth-child(2) {
background-position: -103px -150px;
}
.foot-icon a:nth-child(3) {
background-position: 0 -183px;
}
.foot-icon a:nth-child(4) {
background-position: -103px -183px;
}
.foot-icon a:nth-child(5) {
background-position: 0 -216px;
}
.foot-icon a:nth-child(6) {
background-position: -103px -216px;
}
image.png
完整html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东</title>
<!-- 引入ico图标-->
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入css初始化文件-->
<link rel="stylesheet" href="css/normalize.css">
<!-- 头部和底部结构基本相同 做基本公共样式-->
<link rel="stylesheet" href="css/base.css">
<!-- title部分 尽量不超过28个中文字 百度不支持-->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--description 尽量不超过120个汉字-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<!--6-8个关键词，公司的主要产品，给搜索引擎看的-->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
</head>
<body>
<!--header部分开始-->
<header>
<div class="w">
<a href="#">
<img src="images/header.jpg" alt="">
</a>
</div>
</header>
<!--header部分结束-->
<!--快速导航栏开始-->
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li><i class="f10"></i><a href="#">北京</a></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="#" class="mobile">手机京东
<img src="images/mobile.png" alt="">
</a>
</li>
</ul>
</div>
</div>
<!--快速导航栏结束-->
<!-------------------------------------------------------------->
<!--中间部分开始-->
<div class="w middle">
<div class="logo"><!-- logo的固定写法 div>h1>a 放h1是为了提高权重 便于搜索引擎优化-->
<h1>
<a href="#"></a>
</h1>
</div>
<!--搜索框部分开始-->
<div class="form">
<input type="text" placeholder="扫描仪"><!--placeholder输入的字是灰色的用户输入信息他会自动消失-->
<button><i></i></button><!--按钮，等同于 <input type="button">,只不过他是个双标签,因为按钮里要放放大镜字体图标，所以要用button标签装-->
</div>
<!--搜索框部分结束-->
<!--我的购物车部分开始-->
<div class="shopCar">
<i></i><a href="#" class="f10">我的购物车</a><span>0</span>
</div>
<!--我的购物车部分结束-->
<!-- 关键词部分开始-->
<div class="hotwords">
<a href="#" class="f10">199减100</a>
<a href="#">鼠标试用</a>
<a href="#">农资7折</a>
<a href="#">低至29元</a>
<a href="#">抽奖赢空调</a>
<a href="#">记忆棉</a>
<a href="#">坐垫</a>
<a href="#">1分钱买油</a>
<a href="#">智能手表</a>
</div>
<!-- 关键词部分结束-->
<!-- 小导航栏部分开始-->
<div class="navitems">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">拍卖</a></li>
<li class="space"></li>
<li><a href="#">服装城</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li class="space"></li>
<li><a href="#">京东金融</a></li>
</ul>
</div>
<!-- 小导航栏部分结束-->
<!-- 数码超级品类日部分开始-->
<div class="super">
<a href="#"> <img src="images/super.png" ></a>
</div>
<!-- 数码超级品类日部分结束-->
</div>
<!--中间部分结束-->
<!-------------------------------------------------------------->
<!-- body部分 -->
<!-------------------------------------------------------------->
<!--页面底部分开始-->
<!--底部服务开始-->
<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">
<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>
<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>
<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>
<!-- 底部帮助模块---＞左侧 结束-->
<!-- 底部帮助模块---＞右侧 开始-->
<div class="fr coverage">
<h5>京东自营覆盖区</h5>
<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<a href="#">查看详情 ></a>
</div>
</div>
<!-- 底部帮助模块---＞右侧 结束-->
<!-- 底部版权部分开始-->
<div class="w copyright">
<div class="fl">
<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="#">English Site</a>
<span>|</span>
<a href="#">Media & IR</a>
<span>|</span>
</p>
</div>
<div>
<p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p>
<p>Copyright © 2004 - 2017 京东JD.com 版权所有|消费者维权热线：4006067733经营证照
京东旗下网站：京东支付|京东云</p>
</div>
<p class="foot-icon">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</p>
<!-- 底部版权部分结束-->
</div>
</footer>
<!--页面底部分结束-->
<!-------------------------------------------------------------->
</body>
</html>
完整css部分
.w { /*版心的公共类*/
width: 1190px;/*京东版心1190*/
margin: 0 auto;
}
.fl { /*浮动的公共类*/
float: left;
}
.fr {
float: right;
}
a {
text-decoration: none; /*取消下划线*/
font-size: 12px;
color: #999;
}
a:hover {
color: #c81623;
}
/*---------------------------*/
/*清除边距*/
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 {
margin: 0; /*清除ul默认的内外边距*/
padding: 0;
}
input,button {
border: 0;
outline: none;/*取消轮廓边框*/
}
ul {
list-style: none;
}
/*清除边距结束*/
/*------------------------------------*/
body {
background-color: #f6f6f6;
}
.f10 {
color: #f10215!important;
}
@font-face { /*声明字体*/
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?1x1j55');
src: url('../fonts/icomoon.eot?1x1j55#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?1x1j55') format('truetype'),
url('../fonts/icomoon.woff?1x1j55') format('woff'),
url('../fonts/icomoon.svg?1x1j55#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------------------------------------*/
/*header部分开始*/
header {
height: 80px;
background-color: #020000;
}
/*header部分结束*/
/*---------------------------------------------------------------*/
/*快速导航栏开始*/
.shortcut { /*快速导航栏基本样式*/
height: 30px;
line-height: 30px;/*行高等于高，文字垂直居中*/
background-color: #e3e4e5;
border-bottom: 1px solid #ddd;
}
.city {
margin-left: 200px;
}
.shortcut li { /*右边快速导航栏*/
float: left;
}
.shortcut i { /*上面声明字体，这里要调用字体才会生效*/
font-family: "icomoon";
font-style: normal; /*这里也要取消倾斜，光在声明字体里取消倾斜是没有效果的*/
color: #ccc; /*这里指定了颜色，那么在地址的小图标那里调用f10红色是没有用的，权重不够，直接在.f10里加！important*/
}
.space { /*小竖线*/
width: 1px;
height: 10px;
background-color: #ccc;
margin: 10px 12px 0; /*上10 、左右12 、 下0 外边距*/
}
.mobile {
position: relative;
}
.mobile img {
position: absolute;
left: -3px;
top: 24px;
border: 1px solid #ccc;
padding: 2px;
}
/*快速导航栏结束*/
/*-------------------------------------------------------------------*/
/*中间部分开始*/
.middle {
height: 140px;
position: relative;
}
.logo {
/*margin-top: -30px; 加一个负的外边距 logo反而没有边距了,但是，和logo一列的其他盒子也一起跟着移动了，所以要用定位做*/
position: absolute;
top: -30px;
left: 0;
box-shadow: 0 -10px 10px rgba(0, 0, 0, .3);/* logo阴影 */
}
.logo a {
display: block;
width: 190px;
height: 170px;
background: #fff url(../images/logo.png) no-repeat; /*#fff是背景颜色，背景图片的背景颜色logo一般是背景图片，不是插入图片*/
}
/*----------------------------------------------------------------------*/
/*搜索框部分开始*/
.form {
width: 550px;
height: 35px;
position: absolute;
top: 25px;
left: 320px;
}
.form input { /*这里要到上面去清除input的内外边距和input、button的border和outline轮廓线*/
width: 495px;
height: 33px;
border: 1px solid #f10215;
float: left;
font-size: 14px;
padding-left: 3px;/*这里给搜索框里的文字边距的话，右边的提交按钮就会被挤掉下去，有两个解决方案，一个是 box-sizing: border-box; 改变盒子模型，一个是直接给input减去3px的宽度 */
}
.form button {
width: 50px;
height: 35px;
background-color: #f10215; /*input和button之间会有缝隙，给他们浮动，以取消缝隙*/
float: left;
}
.form button i {
font-family: "icomoon";/*调用字体*/
font-style: normal;
color: #fff;
}
/*搜索框部分结束*/
/*我的购物车部分开始*/
.shopCar {
width: 188px;
height: 33px;
border: 1px solid #ccc;
position: absolute;
top: 25px;
right: 95px;
background-color: #fff;
line-height: 33px;
text-align: center;/*字体图标和我的购物车文字居中*/
}
.shopCar i {
font-family: icomoon;
margin-right: 5px;/*字体图标和文字之间间距*/
font-style: normal;/*i标签里的字体图标是倾斜的，取笑他的默认样式*/
color: #f10215;
}
.shopCar span {
width: 15px;
height: 15px;
background-color: #f10215;
border-radius: 50%;
position: absolute; /*加了绝对定位、固定定位、浮动的行内元素不用转换模式，直接给宽高*/
top: 5px;
right: 30px;
font-size: 12px;
color: #fff;
line-height: 15px; /*不写这个15的话，他是默认继承33的，写了的话，就把33px层叠掉了*/
}
/*我的购物车部分结束*/
/*关键词部分开始*/
.hotwords { /*热词部分，第一个是红色，那就在html结构里加class="f10"调用之前的颜色就好了*/
position: absolute;
top: 68px;
left: 320px;
}
/*关键词部分结束*/
/*小导航栏部分开始*/
.navitems {
width: 770px;
height: 40px;
position: absolute;
bottom: 0;
left: 200px;
line-height: 40px;
}
.navitems li {
float: left;
margin-left: 30px;
}
.navitems li a {
font-size: 16px;
font-weight: 700;
color: #555;
}
.navitems li a:hover {
color: #f10215;
}
.navitems .space {
/*margin-top: 15px;
margin-left: 15px;space会继承.navitems li的30px的宽度，这里给他改掉
margin-right: -15px;这里右边margin在前面写的样式里有12px的边距，还有继承的30px，就大了，这里改成-15px盒子本身距离的一半就够了*/
margin: 15px -15px 0 15px;
}
/*小导航栏部分结束*/
/*数码超级品类日部分开始*/
.super {
position: absolute;
bottom: 10px;
right: 0;
}
/*数码超级品类日部分结束*/
/*中间部分结束*/
/*----------------------------------------------------------------------*/
/*-- body部分 --*/
/*--------------------------------------------------------------*/
/*页面底部分开始*/
/*底部服务开始*/
footer {
margin-top: 35px;
height: 500px;
background-color: #eaeaea;
}
footer a {
color: #666;
}
.service {
padding: 30px 0;/*这里给高的话，再设置字体在盒子里的宽高就麻烦了，直接给盒子设置padding值，中间剩余部分就是文字部分的高度。*/
border-bottom: 1px solid #dedede;
overflow: hidden;
}
.service ul li {
width: 297px;
height: 43px;
position: relative;
line-height: 43px;
float: left; /*这里 ul 、 li 没有高度，而浮动是不占位置的，那么父盒子就没有高度了，所以要清除浮动,这里给他的父级.service写 overflow: hidden;清除浮动也可以用clearfix*/
}
.service li h5 {
position: absolute;
top: 0;
left: 38px;
width: 36px;
height: 43px;
background: url(../images/ico.png) no-repeat;
text-indent: -999em;/*这个标签里的 多 字，可以删掉，也可以不删，不删的情况下，就用首行缩进，把这个字移除到浏览器界面外，*/
}
.service li:nth-child(2) h5 {
background-position: 0 -43px;/*这里写top也可以*/
}
.service li:nth-child(3) h5 {
background-position: 0 -86px;
}
.service li:nth-child(4) h5 {
background-position: bottom;/*也可以不写尺寸，直接这样写*/
}
.service li p {
font-weight: 700;
margin-left: 82px;/*这里可以给p标签外边距，或者给li内边距，直接给到文字的最左边，图标用定位再定出去，定位的元素不占位置。*/
}
/*底部服务结束*/
/*底部帮助模块-->左侧 开始*/
.help {
height: 200px;
border-bottom: 1px solid #dedede;
padding-top: 25px;
box-sizing: border-box;
}
.help dl { /*宽度剩余法*/
width: 192px;
float: left;
}
.help dt {
height: 30px;/*用高度剩余法，就不用设置边距了，这前提是他的父级和上面的盒子设置了边距，否则无法用高度剩余法*/
font-size: 14px;
color: #666
}
.help dt,
.coverage h5 {
height: 30px;
font-size: 14px;
color: #666;
}
.help dd {
height: 22px;
}
/*底部帮助模块-->左侧 结束*/
/*底部帮助模块---＞右侧 开始*/
.coverage {
width: 200px;
height: 150px;
background: url(../images/ico_footer.png) no-repeat;
}
.coverage h5 {
padding-left: 35px;
}
.coverage p {
font-size: 12px;
color: #666;
ling-height: 18px;
width: 180px;
}
.coverage a {
display: block;
margin-top:5px;
width: 180px;
text-align: right;
}
/*底部帮助模块---＞右侧 结束*/
/*底部版权部分开始*/
.copyright {
padding-top: 20px;
text-align: center;
color: #666;
font-size: 12px;
}
.copyright span {
margin: 0 10px;
}
.copyright div {
margin-top: 20px;
}
.copyright div p {
line-height: 22px;
}
.foot-icon a {
display: inline-block; /*将a转换为行内块更容易写 行内块可以用text-align:center;居中对齐显示，由于他的父级已经写过text-align:center;居中对齐显示，所以这里都不用写了，只要有display: inline-block;他就会自动居中对齐显示了，如果写成block的话，还得从新写样式。转成行内块元素就方便多了*/
width: 103px;
height: 32px;
background: url(../images/ico_footer.png) no-repeat 0 -150px;
margin: 20px 4px 0; /*上20 左右4 下0*/
}
.foot-icon a:nth-child(2) {
background-position: -103px -150px;
}
.foot-icon a:nth-child(3) {
background-position: 0 -183px;
}
.foot-icon a:nth-child(4) {
background-position: -103px -183px;
}
.foot-icon a:nth-child(5) {
background-position: 0 -216px;
}
.foot-icon a:nth-child(6) {
background-position: -103px -216px;
}
/*底部版权部分结束*/
/*页面底部分结束*/
/*-------------------------------------------------------------*/
image.png
