京东项目一

作者: 潘肚饿兵哥哥 | 来源:发表于2019-05-31 19:47 被阅读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

京东项目一

header部分：

快速导航栏部分：

logo部分

搜索框部分

我的购物车部分制作

关键词部分

小导航栏

数码超级品类日部分

底部份开始

底部服务开始

底部帮助模块右侧

底部版权部分

完整html

完整css部分

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读