欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

仿京东商城主页(静态页面)

程序员文章站 2022-06-15 18:50:11
HTML部分:

此项目主要使用HTML5+CSS来编写,对京东商城主业进行了整体的仿制,由于缺少素材,局部无法完全仿制。

HTML5部分:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />

        <meta name="Keywords" content="手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

    <title>京东欢迎你</title>

    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/common.css">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

 

</head>

<body>

    <!--header开始-->

        <header>

           <div class="w">

               <a href="#">

                   <img src="images/header.jpg" alt="">

               </a>

           </div>

        </header>

        <!-- heder结束 -->

        <!-- 快速导航栏开始 -->

        <div class="shortcut">

      <div class="w">

          <ul class="fl city">

              <li>! 北京</li>

          </ul>

          <ul class="fr">

            <li><a href="login.html" target="_blank">你好,请登录</a><a href="signin.html" class="colorred">免费注册</a></li>

            <li class="l"></li>

            

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="">我的订单</a></li>

            <li  class="la">l</li>

            <li><a href="#" class="mobile">手机京东

                <img src="images/mobile.png" alt="">

                

            </a></li>

           

 

          </ul>

      </div>

        </div>

        <!-- 快速导航栏结束 -->

        <!-- 中间部分开始 -->

        <div class="w middle">

            <div class="logo">

               <h1> <!-- <h1>提高权重 -->

                    <a href="#"></a>

                </h1>

            </div>

            <div class="form">

                <input type="text" placeholder="扫描仪">

                <button>搜索</button>

 

            </div>

            <div class="shopcar">

                <a href="#">我的购物车</a>

                <i>8</i> 

            </div>

            <div class="hotword">

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

                <a href="">199减100</a>

               

            </div>

            <div class="navtimes">

                <ul>

                    <li>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a>

                        <a href="">秒杀</a> 

                        <a href="">秒杀</a>

 

                    </li>

                </ul>

            </div>

        </div>

        <!-- 中间部分结束 -->

        <!-- 中间分类模块 -->

        <div class="w grid">

            <div class="grid-col1 fl">

                <div class="ad">

                    <img src="images/ad-l.png" alt="" height="480" width="250">

                  <img src="images/ad-r.jpg" alt="" class="ad-r">

                </div>

                <ul>

                    <li><a href="">家用电器</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li>

                    <li><a href="">家用电器</a>/<a href="">手机</a></li><li><a href="">家用电器</a>/<a href="">手机</a></li>

                </li><li><a href="">家用电器</a>/<a href="">手机</a></li>

            </li><li><a href="">家用电器</a>/<a href="">手机</a></li>

            <li><a href="">家用电器</a>/<a href="">手机</a></li>

       


 

                </ul>

            </div>

            <div class="grid-col2 fl">

                <!-- 中间模块 -->

                <div class="grid-col2-t">

                    

             <div class="banner">

                 <ul>

                     <li><img src="images/banner.jpg" alt=""height="340" width="790"></li>

                     <li><img src="images/紫砂.png" alt=""height="340" width="790"></li>

                 </ul>

                 <div class="arrow-l">&lt

                 </div>

                  <div class="arrow-r">  </div>

                  <ol>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                           </ol>

 

             </div>

                </div>

                <div class="grid-col2-b">

                    <div><img src="images/l.jpg" alt=""height="130"

                        width="390"></div>

                    <div><img src="images/r.jpg" alt="" height="130" width="390"></div>

                </div>

            </div>

            <!-- 右边模块 -->

            <div class="gird-col3 fl">

                <!-- 登陆模块 -->

                <div class="login">

                    <div class="login-t">

                        Hi,欢迎来到京东!<br/>

                        <a href="">登录</a>

                        <a href="">注册</a>

                    </div>

                    <div class="login-b">

                       <li><a href="">新人福利</a></li>

                       <li><a href="">PLUS会员</a></li>

                    </div>

                </div>

                <!-- 新闻模块 -->

                <div class="news">

                    <div class="news-t">

                        <a href="" class="cuxiao">促销</a>

                        <a href="" class="gonggao">公告</a>

                        <a href="" class="more">更多</a>

                    </div>

                    <div class="news-b">

                        <ul>

                            <li><a href="">挑战三天不洗头</a></li>

                            <li><a href="">挑战三天不洗头</a></li>

                            <li><a href="">挑战三天不洗头</a></li>

                            <li><a href="">挑战三天不洗头</a></li>

                        </ul>

                    </div>

                </div>

                <!-- 服务模块 -->

                <div class="expand">

                    <ul>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                    </ul>

                </div>

            </div>

         <div class="clear.both"></div>

            

        </div>

        <!-- 展示模块 -->

       <div class="zhanshi w">

        <ul>

            <li>

              <div class="zhanshi-t">

                    <img src="images/gg35.jpg" alt="">

              </div>

              <a href="#">京东超市:福临门,东北大米</a>

            </li>

            <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

              <li>

                <div class="zhanshi-t">

                      <img src="images/gg35.jpg" alt="">

                </div>

                <a href="#">京东超市:福临门,东北大米</a>

              </li>

        </ul>

        </div>

        

       </div>

<!-- 帮助模块 -->

      

        <footer> 

            <!-- 帮助模块 -->

            <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">

                <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>

                    <p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p>

                    <p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话:4006561155</p>

                    <p>Copyright © 2004 - 2019  京东JD.com 版权所有<span>|</span>消费者维权热线:4006067733经营证照<span>|</span>(京)网械平台备字(2018)第00003号<span>|</span>营业执照</p>

                </div>

                <p class="footerIcon">

                    <a href="#"></a>

                    <a href="#"></a>

                    <a href="#"></a>

                    <a href="#"></a>

                    <a href="#"></a>

                </p>

            </div>

        </footer>

</body>

</html>

 

CSS通用部分

 

/* 把我们所有标签的内外边距清零 */

* {

    margin: 0;

    padding: 0;

    /* css3盒子模型 */

    box-sizing: border-box;

}

/* 京东版心 */

.w{

    width: 1190px;

}

/* em 和 i 斜体的文字不倾斜 */

em,

i {

    font-style: normal

}

/* 去掉li 的小圆点 */

li {

    list-style: none

}

 

img {

    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */

    border: 0;

    /* 取消图片底侧有空白缝隙的问题 */

    vertical-align: middle;

   

}

 

button {

    /* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */

    cursor: pointer

}

 

a {

    color: #666;

    text-decoration: none

}

 

a:hover {

    color: #c81623

}

 

button,

input {

    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */

    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

    /* 默认有灰色边框我们需要手动去掉 */

    border: 0; 

    outline: none;

}

 

body {

    /* CSS3 抗锯齿形 让文字显示的更加清晰 */

    -webkit-font-smoothing: antialiased;

    background-color: #fff;

    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

    color: #666

}

 

.hide,

.none {

    display: none

}

/* 清除浮动 */

.clearfix:after {

    visibility: hidden;

    clear: both;

    display: block;

    content: ".";

    height: 0

}

 

.clearfix {

    *zoom: 1

}

 

CSS主页部分

/* 京东版心 */

.w{

    width: 1190px;

    margin: 0 auto;

}

.fl{

    float: left;

}

.fr{

    float: right;

}

body{

    background-color: #f6f6f6;

}

/* header部分 */

header{

    height: 80px;

    background-color: #020000;

}

/* 快速导航栏开始 */

.shortcut{

    height: 30px;

    background-color: #e3e4e5;

    border-bottom: 1px solid #ddd;

    font-size: 12px;

    line-height: 30px;

   

}

.city{

    margin-left: 200px;

}

.shortcut li{

    float: left;

    line-height: 30px;

    margin-right: 10px;

}

.mobile{

    position: relative;

 

}

.mobile img{

    position: absolute;

    left: -3px;

    top:24px;

    border:1px solid #ccc;

    padding: 3px;

 

}

/* 快速导航栏结束 */

/* 中间部分开始 */

.middle{

    height: 140px;

    

    position: relative;

}

.logo{

    position: absolute;

    top:-30px;

    left:0;

    box-shadow: 0px -10px 10px rgba(0, 0, 0, .3);

 

}

.logo a{

    display: block;

    width: 190px;

    height: 170px;

    background:#fff url(../images/logo.png) no-repeat;

}

.form{

    width: 550x;

    height: 35px;

    position: absolute;

    top:25px;

    left:320px;

    background-color: pink;

}

.form input{

    width: 500px;

    height: 35px;

    border: 1px solid #f10215;

    float: left;

    padding: 5px;

 

}

.form button{

    float: left;

    width: 50px;

    height: 35px;

    background-color: #f10215;

    color: #f6f6f6;

    font-size: 16px;

}

.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{

    display: block;

    

    height: 20px;

    width: 20px;

    border-radius: 50% 50% 50% 0;

    color: #fff;

line-height: 20px;

text-align: 20px;

    background-color: #f10215;

    position: absolute;

    top:-5px;

    right: 10px;

 

}

/* 关键词模块 */

.hotword {

    position: absolute;

   top: 68px;

    left: 320px;

}

.hotword a{

    float: left;

    margin-right: 10px;

 

}

/* 小导航模块 */

.navtimes{

    width: 770px;

    height: 40px;

position: absolute;

bottom:0;

left:200px;

line-height: 40px;

}

.navtimes li{

 float: left;

 

}

.navtimes li a{

    font-size: 16px;

    font-weight: 700;

    columns: #555555;

    margin-left: 50px;

}

/* 中间部分结束 */

/* 中间分类模块开始 */

.grid{

    height: 480px;

    z-index: 999;

 

}

 

.grid-col1{

    width: 190px;

    height: 100%;

    background-color: #6e6e6e;

    color: #fff;

    font-size: 14px;

    position: relative;

}

.grid-col1 ul{

    padding: 10px 0;

}

.grid-col1 ul li{

    padding-left: 12px;

    height: 30px;

    line-height:30px;

}

.grid-col1 ul li:hover{

    background-color: #9c9c9c;

}

.grid-col1 ul li a{

    color: #fff;

    font-size: 14px;

    margin:0 3px;

}

/* 广告模块 */

.ad{

    width: 250px;

    height: 480px;

  

    position: absolute;

    top:0;

    left:-250px;

}

.ad-r{

    position: absolute;

    top:0;

    left:250px;

    z-index: 999;

    width: 0;

    height: 480px;

    transition: all 0.8s;

   

}

.ad:hover .ad-r{

   width: 990px;

}

.grid-col2{

    width: 790px;

    height: 100%;

  

    margin-left:10px ;

    position: relative;

}

/* banner部分 */

 

.grid-col2-t{

    height: 340px;

    width: 790px;

    position: relative;

}

 

.banner{

    height: 100%;

    width: 100%;

    overflow: hidden;

    position: relative;

   

}

.banner ul{

    height: 100%;

    width: 200%;

    

}

.banner li{

    float: left;

}

.banner .arrow-l{

   height: 20px;

   width: 20px;

   position: absolute;

 

   left: 10px;

   top:170px;

   font-family: 'icomoon';

  

}.banner .arrow-r{

    height: 20px;

    width: 20px;

    position: absolute;

  

    right:10px;

    top:170px;

    font-family: 'icomoon';

   

 }

 .banner ol{

     position: absolute;

     bottom: 20px;

     left: 200px;

 }

 .banner ol li{

     height: 10px;

     width: 10px;

     border-radius: 50%;

     background-color: #f10215;

     margin-left: 20px;

 }

.grid-col2-b div{

    float: left;

    margin-top: 10px;

}

.grid-col2-b div:last-child{

    float: right;

    margin-left: 10px;

}

/* 右边模块 */

.gird-col3{

    width: 190px;

    height: 100%;

    margin-left: 10px;

 

}

 

.login{

    height: 115px;

    border-bottom: 1px solid #ccc;

   

    position: relative;

 

}

.login-t{

    position: absolute;

    top:30px;

    left: 50px;

}

.login-b{

    position: absolute;

    bottom: 20px;

    left: 30px;

}

.login-b li{

    height: 25px;

    width: 70px;

    border: 2px solid #f10215;

    float: left;

    margin-right: 10px;

   line-height: 25px;

   text-align: center;

 

}

.login-b li a{

    color: #f10215;

    font-weight: 600;

   

}

.news{

    height: 155px;

        border-bottom: 1px solid #ccc;

        background-color: #fff;

        padding: 7px 13px 0;

        box-sizing: border-box;

}

.news-t{

    height: 19px;

    border-bottom: 1px solid #ccc;

}

.news-t a{

    float: left;

}

.cuxiao{

    width: 38px;

    height: 17px;

    line-height: 17px;

    border-right: 1px solid #ccc;

}

.gonggao{

    height: 17px;

    margin-left: 15px;

}

.news-t .more{

    float: right;

   

}

.news-b li {

    margin-top: 10px;

}

.expand{

    height: 210px;

    overflow: hidden;

   

}

.expand ul{

    margin-left: 5px;

    width: 190px;

    

}

.expand li{

    width: 47px;

    height: 69px;

    border-right: 1px solid #ccc;

    border-bottom: 1px solid #ccc;

    float: left;

    background-image: url(../images/sprite_fs@1x.png);

    background-position: 0px 0px;

    background-repeat: no-repeat;

 

}

/* 展示模块 */

.zhanshi{

    height: 740px;

    margin-top: 20px;

   

}

.zhanshi li{

     height: 300px;

     width: 220px;

     float: left;

     border: 1px solid #666;

     overflow: hidden;

}

 

.zhanshi li a {

    height: 80px;

    display: block;

    width: 100%;

    line-height: 80px;

    font-size: 16px;

    text-align: right;

}



 

.footer {

    height: 500px;

    margin-top: 35px;

}

 

.footer a {

    color: #666;

}


 

/*帮助模块*/

/*左侧*/

.help {

    border-bottom: 1px solid #DEDEDE;

    height: 200px;

    padding-top: 25px;

    box-sizing: border-box;

}

 

.help dl {

    width: 192px;

    float: left;

}

 

.help dt {

    height: 30px;

    font-size: 14px;

    font-weight: bold;

    color: #666;

}

 

.help dd {

    height: 22px;

}

/*右侧*/

.coverage {

    width: 200px;

    height: 150px;

    background: url(../images/sprite.footer.png) no-repeat;

}

 

.coverage h5 {

    font-size: 14px;

    font-weight: bold;

    color: #666;

    margin-left: 35px;

    margin-bottom: 15px;

}

 

.coverage p {

    line-height: 18px;

    color: #666;

    width: 180px;

}

 

.coverage a {

    display: block;

    text-align: right;

    margin-top: 5px;

    color: #666;

}

 

/*版权*/

.copyright {

    padding-top: 20px;

    color: #666;

    font-size: 12px;

    text-align: center;

}

 

.copyright span {

    margin: 0 10px;

}

 

.copyright div {

    margin-top: 15px;

}

 

.copyright div p {

    line-height: 22px;

}

 

.footerIcon a {

    width: 103px;

    height: 32px;

    display: inline-block;

    background: url(../images/sprite.footer.png) no-repeat -206px 0;

    margin: 20px 4px 0;

.footerIcon a:nth-child(2) {

    background-position: -206px -37px;

.footerIcon a:nth-child(3) {

    background-position: -206px -74px;

.footerIcon a:nth-child(4) {

    background-position: -206px -110px;

.footerIcon a:nth-child(5) {

    background-position: -206px -148px;

 

本文地址:https://blog.csdn.net/weixin_44928106/article/details/107380767