京东商城静态网页

最新推荐文章于 2024-01-12 09:36:39 发布

YI Chen521

最新推荐文章于 2024-01-12 09:36:39 发布

阅读量2k

点赞数 4

文章标签： css3 css html

本文链接：https://blog.csdn.net/wychh85/article/details/121690520

版权

index.css文件

/* 商品分类 */
.jd{
    position: relative;

}
.ad{
    height:486px;
    background:url(../images/bg.png) no-repeat;
    position: absolute;
    top:0;
    left:0;
    width:100%;
}
.ad a{
    display: block;
    height:100%;
}
.jd-inner{
    height:486px;
    z-index: 999;
    position: relative;
}
.jd-clo1{
    width:190px;
    height:471px;
    background-color:#6E6568;
    float:left;
    padding-top:15px;
}
.jd-clo1 li{
    padding-left:10px;
    height:28px;
    line-height:28px;

}
.jd-clo1 li:hover{
    background-color: #999395;
}
.jd-clo1 li a{
    color:#fff;
    font-size:14px;

}
.jd-clo1 li span {
    color:#fff;
    font-size:12px;

}
.jd-clo2 {
    width:790px;
    height:480px;
    float:left;
    margin-left: 10px;

}
.jd-clo2-hd{
    height:340px;
    margin-bottom: 10px;
    position: relative;
}
.jd-clo2-hd ol li{
    position: absolute;
    bottom:20px;
    left:50px;
    margin-left: -90px;
    width:180px;
    height:20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
.jd-clo2-hd ol li {
    width:12px;
    height:12px;
    background-color:#fff;
    border-radius: 50%;
    float:left;
    margin: 4px 5px;
    cursor: pointer;
}
.jd-clo2-hd.current{
    background-color:#f10215;

}
.jd-clo2-bd div{
    width:393px;
    height:130px;
    float:left;
}
.jd-clo2-bd div img{
    width:100%;

}
.firstPic{
    margin-right:10px;

}
.arr-l,.arr-r {
    position: absolute;
    top:50%;
    margin-top: -30px;
    width:30px;
    height:60px;
    background:rgba(0, 0, 0, 0.3);
    font-family: 'icomoon';
    color:#fff;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
}
.arr-l {
    left:0;

}
.arr-l .zuojiantou{
    margin-top: 13px;
}
.arr-r{
    right:4px;
}
.arr-r .youjiantou{
    margin-top: 13px;
}
.jd-clo3 {
    width:196px;
    height:486px;
    float:right;
    background-color: white;
}
.jd-clo3 a{
    font-size: 12px;
    color:#747474;
}
.user{
    height:95px;
    background-color: pink;
    padding: 20px 15px 0;
}
.user-info {
    height:40px;
    padding-left: 54px;
    font-size: 12px;
    color:#747474;
    line-height: 22px;
    position: relative;
}
.user-info a{
    font-size:12px;
    color: #747474;
}
.user-info a:hover{
    color:#f10215;
}
.info-img{
    width:40px;
    height:40px;
    position: absolute;
    top:0;
    left:0;
    border-radius: 50%;
    overflow: hidden;
}
.info-img img{
    width:100%;
    height:auto;

}
.user-profit{
    margin-top: 14px;

}
.user-profit a{
    width:70px;
    height:20px;
    border:2px solid #f10215;
    display: inline-block;
    font-size:12px;
    color:#f10125;
    text-align: center;
    line-height: 20px;
    margin-right: 4px;
}
.user-profit a:hover{
    background-color: #f10215;
    color:#fff;
}
.news{
    height:149px;
    border-top:1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px 15px 0;
}
.tab-hd{
    border-bottom: 1px;
    padding: 3px 0;
    position: relative;
}
.tab-hd a{
    margin: 0 4px;
}
.cuxiao{
    border-right:1px solid #ccc;
    padding-right:10px;
}
.new .more1{
    position: absolute;
    top:6px;
    right:0;
}
.line{
    width:31px;
    height:2px;
    background-color:#f10215;
    position: absolute;
    bottom:-1px;
    left:0;
}
.tab-bd{
    margin-top: 10px;
}
.tab-bd li {
    height:23;
    line-height: 23px;
}
.jd-service{
    height:209px;
    width:190px;
    overflow: hidden;

}
.jd-service ul{
    width:195px;

}
.jd-service li {
    width:47px;
    height:69px;
    float:left;
    border-bottom:  1px solid #ccc;
    border-right:1px solid #ccc;

}
.jd-service li a{
    width:100%;
    height:100%;
    display: block;
}
.jd-service i {
    display: block;
    width:24px;
    height:24px;
    margin: 16px 11px 7px;
    background:url(../images/手机.png)no-repeat;


}
.jd-service p{
    text-align: center;
}
.clearfix:before,clearfix:after{
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}
.clearfix{
    zoom: 1;

}


/* 底部版权 */
.footer{
    height:560px;
    background-color: #EAEAEA;

}
.footer-service{
    border-bottom: 1px solid #DEDEDE;
    
    

}
.footer-service-inner{
    padding: 60px 0;


}
.footer-service-inner li {
    float:left;
    width:297px;
    height:42px;

}
.service_unit{
    width:225px;
    height:42px;
    margin:  0 auto;
    position: relative;
    top:-16px
    
}
.service_unit h5{
    width:36px;
    height:42px;
    position: absolute;
    top:0;
    left:0;
    background: url(../images/duokuaihaosheng.png) no-repeat;
    text-indent: -999px;
    overflow: hidden;
}
.service_unit p{
    line-height: 42px;
    margin-left: 45px;
    font-size: 18px;
    font-weight: 700;
}
.service_unit .kuai{
    background-position: -41px -2px;
}
.service_unit .hao{
    background-position: -82px -1px;
}
.service_unit .sheng{
    background-position: -123px -1px;
}
.help{
    height:180px;
    padding-top:20px;
}
.help dl{
    float: left;
    width:195px;
}
.help dt {
    font-size:14px;
    font-weight: 700;
    color:#666;
    height:30px

}
.help dd {
    height:22px;

}
.help dd a {
    color:#727272;
    font-size:12px;

}
.help dd a:hover{
    color:#f10125;
}
.help .cover{
    float:right;
    width:207px;
    height:150px;
    background: url()no-repeat;
}
.cover dt{
    text-align: center;
}
.help .info{
    width:175px;
    height:50px;
    font-size:12px;
    margin-top: 5px;
    margin-left: 10px;
    line-height: 18px;
    color:#727272;
}
.more {
    text-align: right;
    padding-right:10px;
}
.copyright{
    border-top: 1px solid #ccc;
    padding-top: 15px;
}
.links{
    text-align: center;
}
.links a{
    color:#727272;
    font-size:12px;
}
.links span{
    font-size:12px;
    color:#DEDEDE;
    margin: 0 6px;
}
.c-info{
    font-size:12px;
    color:#9e9e9e;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;

}
.tupian{
    text-align: center;
    margin-top: 10px;
}
.tupian a {
    width:103px;
    height:32px;
    display:inline-block;
    background:url(../images/dibubanquan.png) no-repeat 0 -151px;
}
 .tupian .kexin{
    background-position: -1px -151px;
}

base.css文件

body{
    background-color: #F6F6F6;
}
/* 通配符 */
*{
    margin:0;
    padding:0;
}


/* 顶部推广 */
.w{
    width: 1190px;
    margin: auto;
}
.J_event{
    background-color: rgb(178, 78, 245);
}
.J_event a{
    
    display: block;
    height:80px;
    background: url(../images/top.png.webp) no-repeat;
    position: relative;
}
.J_event .dingbutupian1{
    margin-left: 89px;
    margin-top: 11px;
}
.J_event .dingbutupian2{
    margin-left: 61px;
    margin-top: 11px;
}
.J_event .dingbutupian3{
    margin-left: 57px;
    margin-top: 11px;
}
.J_event a i{
    width:20px;
    height:20px;
    position: absolute;
    right: 0;
    top: 5px;
    font-family: "iconfont" !important;
    font-style: normal;
    text-align: center;
    line-height:20px;
    color:#fff;
    background-color:rgba(0,0,0,0.4) ;
}
.J_event .cha{
    margin-left: 576px;
    margin-top:6px ;
}
.fr{
    float: right;

}
.fl{
    float: left;
}
.style-red{
    color: #f10215!important;
}
li{
    list-style: none;
}
ul{
    margin: 0;
    padding: 0;
}


/* 导航栏样式 */
.shortcut{
    height: 30px;
    line-height: 30px;
    background-color:#E3E4E5;
    border-bottom: 1px solid #DDDDDD;
    color:#9D9D9D;
    font-size: 12px;

}
.shortcut a{
    color: #9D9D9D;
    font-size: 12px;
    text-decoration:none;
}
.shortcut a:hover{
    color:#c81623;
}
.shortcut .fl li{
    margin-left:200px;
    height:30px;
    overflow: hidden;
}
.shortcut .fr li {
    float: left;
}
.pos{
    color:#f10215;
    font-family: 'icomoon';
    font-style: normal;
    font-size: 14px;
}
.pos img{
    margin-top: 7px;
}
.spacer{
    width:1px;
    height:10px;
    background-color:#ccc;
    margin: 10px 10px 0;
}
.jiantou img {
    margin-top: 10px;
}
.dropdown{
    padding-right:15px;
    position: relative;
}
.dropdown i{
    font-family: 'icomoon';
    font-style: normal;
    font-size: 16px;
    position: absolute;
    right:-2px;
    top:-2px;
}
.dropdown img{
    margin-top: 12px;
}
.erweima{
    width:70px;
    height:70px;
    border:1px solid #ccc;
    padding:3px;
    position: absolute;
    left:-8px;
    top:33px;
}
input,button{
    padding:0;
    border:0;
}
a{
    text-decoration: none;
}
img{
   vertical-align: top; 
}


/* 搜索框样式 */
.header{
    height:140px;
}
.inner{
    height:140px;
    position: relative;
}
.log{
    width:188px;
    height:150px;
    position: absolute;
    top:-30px;
    left:0px;
    background-color: purple;
    box-shadow: 0 -12px 10px rgba(0, 0, 0, 0.2);
}
.log h1{
    margin: 0; 
}
.log a{
    display: block;
    width:356px;
    height:254px;
    background: url(../images/logo.png) no-repeat;
    text-indent: -99999px;
    overflow: hidden;
}
.search{
    width:550px;
    height:35px;
    position: absolute;
    top:25px;
    left:320px;
}
.search .zhaoxiangji{
    position: absolute;
    left:466px;
    top:5px;
}
.search input {
    width:493px;
    height:33px;
    border:1px solid #f10215;
    padding-left:5px;
    outline: none;
    color: #989898;
    float:left;
}
.search button{
    width:50px;
    height:35px;
    background-color: #f10215;
    float:left;
    cursor: pointer;
    outline: none;
}
.search img{
    font-family: 'icomoon';
    font-style: normal;
    color:#fff;
    font-size: 16px;
}
.search em{
    position: absolute;
    top:10px;
    right:65px;
    width:19px;
    height:15px;
    cursor: pointer;
    background: url(../) no-repeat;
}
.search em:hover{
    background-position:-30px 0;
}
.hotwords{
    position: absolute;
    top:70px;
    left:320px;

}
.hotwords a {
    color:#9E9B99;
    font-size: 12px;
}
.hotwords a:hover{
    color:#f10215;
} 
.mycar{
    width:190px;
    height:28px;
    border:1px solid #ccc;
    background-color: white;
    position: absolute;
    top:25px;
    right:100px;
    text-align: center;
    line-height: -33px;
}
.mycar:hover{
    border-color:#f10215
}
.mycar a {
   
    font-size: 13px;
    color:#f10215;

}
.mycar i {
    font-family: 'icomoon';
    font-style: normal;
    margin-right: 18px;
    color:#f10215;
}
.mycar s {
    position: absolute;
    top:0px;
    left:51px;
    text-decoration: none;
    background-color:#f10215;
    height:12px;
    line-height: 12px;
    font-size:6px;
    padding:0 3px;
    border-radius: 7px;
    color:#fff;
}
.computer{
    position: absolute;
    right:0;
    bottom:10px;
}
.navitems{
    position: absolute;
    left:200px;
    bottom:0;

}
.navitems ul {
    float: left;

}
.navitems ul li {
    float: left;
    margin-left: 30px;

}
.navitems li a {
    font-size: 16px;
    color:#555A5f;
    font-weight: 700;
    height:40px;
    line-height: 40px;
    display: block;
}
.navitems li a:hover{
    color:#f10215;

}
.navitems .spacer{
    float:left;
    margin-top: 15px;
    margin-left: 20px;
    margin-right: -10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电,数码通讯,电脑,家具百货,服装服饰,母婴,图书,食品等数万个品牌优质商品.便捷," />
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
    <title>京东(JD.COM)-正品低价 品质保障 配送及时 轻松购物!</title>
</head>

<body>
    <!--顶部推广-->
    <div class="J_event">
        <a href="#" class="w">
            <img class="quanqiu" src="./images/quanqiu.jpg" alt="" width="190px" height="80px">
            <img class="dingbutupian1" src="./images/dingbu.jpg" alt="" width="60px" height="60px">
            <img class="dingbutupian2" src="./images/dingbu2.jpg" alt="" width="60px" height="60px">
            <img class="dingbutupian3" src="./images/dingbu3.jpg" alt="" width="60px" height="60px">
            <img class="cha" src="./images/叉.png" alt="">
            <i></i>
        </a>
    </div>
    <!--顶部导航-->
    <div class="shortcut">
        <div class="w">
            <ul class="fl">
                <li>
                    <i class="pos"><img src="./images/位置.png" alt="" width="20px" height="20px"></i>
                    北京
                </li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">
                        你好，请登录&nbsp;&nbsp;
                    </a>
                    <a href="#" class="style-red">
                        免费注册
                    </a>
                </li>
                <li class="spacer">
                </li>
                <li>
                    <a href="#">
                        我的订单
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        我的京东
                    </a>
                    <i><img src="./images/箭头.png" alt="" width="10px" height="10px"></i>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        京东会员
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        企业采购
                    </a>
                    <i class="jiantou">
                        <img src="./images/箭头.png" alt="" width="10px" height="10px">
                    </i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        客户服务
                    </a>
                    <i><img src="./images/箭头.png" alt="" width="10px" height="10px"></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        网站导航
                    </a>
                    <i><img src="./images/箭头.png" alt="" width="10px" height="10px"></i>
                </li>
                <li class="spacer"></li>
                <li style="position: relative;z-index: 1;">
                    <a href="#">
                        手机京东
                    </a>
                    <div class="erweima">
                        <img src="./images/er wei ma.png" alt="" width="70px" height="70px">
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <!--搜索框-->
    <div class="header">
        <div class="w inner">
            <div class="log">
                <h1>
                    <a href="#" title="京东网">京东</a>
                </h1>
            </div>
            <div class="search">
                <input type="text" value="单反相机">
                <button>
                    <img class="zhaoxiangji" src="./images/照相机.png" alt="" width="25px" height="25px">
                    <img src="./images/搜索.png" alt="" width="20px" height="20px">
                </button>
                <em></em>

            </div>
            <div class="hotwords">
                <a href="#" class="style-red">学生专享</a>
                <a href="#">300减160</a>
                <a href="#">七折返场</a>
                <a href="#">骑行运动</a>
                <a href="#">家电榜单</a>
                <a href="#">无损播放器</a>
                <a href="#">汽车脚垫</a>
                <a href="#">巧克力</a>
                <a href="#">铝合金门窗</a>
            </div>
            <div class="mycar">
                <i></i>
                <a href="#">我的购物车</a>
                <img src="./images/car.jpg" alt="" style="margin-right:98px ; margin-top: -18px;">
                <s>0</s>
            </div>
            <div class="computer">
                <a href="#">
                    <img src="./images/computer.png" alt="" height="40" width="190">
                </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>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">京东服饰</a></li>
                    <li><a href="#">京东超市</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">全球购</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">京东金融</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--商品分类-->
    <div class="jd">
        <div class="w jd-inner">
            <div class="jd-clo1">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">电脑</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                        <span>/</span>

                    </li>

                </ul>
            </div>
            <div class="jd-clo2">
                <div class="jd-clo2-hd">
                    <a href="#" class="arr-l"><img class="zuojiantou" src="./images/左箭头.png" alt=""></a>
                    <a href="#" class="arr-r"><img class="youjiantou" src="./images/右箭头.png" alt=""></a>
                    <ol>
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                    <ul>
                        <li><a href="#"><img src="./images/ba.jpg"></a></li>
                    </ul>
                </div>
                <div class="jd-clo2-bd">
                    <div class="fristPic">
                        <img src="./images/图2.png" alt="">
                    </div>
                    <div>
                        <img src="./images/图3.png" alt="">
                    </div>
                </div>
            </div>
            <div class="jd-clo3">
                <div class="user">
                    <div class="user-info">
                        Hi,欢迎来到京东！<br />
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                        <a href="#" class="info-img">
                            <img src="./images/下载.png" alt="">
                        </a>
                    </div>
                    <div class="user-profit">
                        <a href="#">新人福利</a>
                        <a href="#">PLUS会员</a>
                    </div>
                </div>
                <div class="news">
                    <div class="tab-hd">
                        <a href="javascript:;" class="cuxiao">促销</a>
                        <a href="javascript:;">公告</a>
                        <a href="javascript:;" class="more1">更多</a>
                        <div class="line"></div>
                    </div>
                    <div class="tab-bd">
                        <ul>
                            <li><a href="#">蓄电池专场下单立减100元</a></li>
                            <li><a href="#">蓄电池专场下单立减100元</a></li>
                            <li><a href="#">蓄电池专场下单立减100元</a></li>
                            <li><a href="#">蓄电池专场下单立减100元</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jd-service">
                    <ul>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>机票</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ad">
            <a href="#"></a>
        </div>
    </div>
    <!--底部版权-->
    <div class="footer">
        <div class="footer-service">
            <div class="w footer-service-inner">
                <ul class="clearfix">
                    <li>
                        <div class="service_unit">
                            <h5>多</h5>
                            <p>品类齐全,轻松购物</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_unit">
                            <h5 class="kuai">快</h5>
                            <p>多仓直发,极速配送</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_unit">
                            <h5 class="hao">好</h5>
                            <p>正品行货,精致服务</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_unit">
                            <h5 class="sheng">省</h5>
                            <p>天天低价,畅选无忧</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="w help">
            <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>
            <dl class="cover">
                <dt>京东自营覆盖区县</dt>
                <dd class="info">京东已向全国2661个区县提供自营配送服务，支持货到付款，POS机刷卡和售后上门服务。</dd>
                <dd class="more"><a href="#">查看详情</a></dd>
            </dl>
        </div>
        <div class="w copyright">
            <div class="links">
                <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</a>
                <span>|</span>
                <a href="#">Media & IR</a>
                <span>|</span>
            </div>
            <div class="c-info">
                <p>京公网安备 11000002000088号|京ICP备11041704号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</p>
                <p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2020]6112-1201号|违法和不良信息举报电话：4006561155</p>
                <p>Copyright © 2004 - 2021 京东JD.com 版权所有|消费者维权热线：4006067733|经营证照|(京)网械平台备字(2018)第00003号|营业执照</p>
                <p>Global Site|Сайт России|Situs Indonesia|Sitio de España|เว็บไซต์ประเทศไทย</p>
                <p>京东旗下网站：京东钱包|京东云|网络内容从业人员违法违规行为举报电话：4006561155-3</p>
            </div>
            <div class="tupian">
                <a href="#"></a>
                <a href="#" class="kexin"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
    </div>
</body>

</html>