登录部分HTML+CSS：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>京东－欢迎登录</title>
        <link rel="shortcut icon" href="favicon.ico"/>
         <style type="text/css">
         ul, ol { list-style:none; }
         .w {  /*版心 提取 */
          width:100%;margin:0 auto;
          }
          a {color:#666666; text-decoration:none; }

          a:hover{color:#C81623;}

         .nav{
             width: 100%;
             height: 70px;
         }
         .nav .log{
             width: 170px;
             height: 70px;
             margin-top: 10px;
             margin-left: 300px;
             font-size: 12px;
             background: url(image/logo-201305-b.png);
         }

         .nav  .zh{
             width: 160px;
             height: 60px;
             float: left;
             padding-top: 10px;
             text-align: center;
             margin-left: 470px;
             margin-top: -70px;
             font-family: "SimSun", "宋体";
             font-size: 26px;
             /*background-color: brown;*/
         }
         .back{
             width: 100%;
             height: 460px;
             background: url(image/ttttttttt.png);
         }
         .back  .xbacky{
             width: 300px;
             height: 380px;
            background-color: #FFFFFF;
             float: right;
             position:absolute;
             margin:40px 40% 60px  60% ;
         }
         .xbacky  .top{
             width: 300px ;
             height: 50px;
             text-align: center;
             float: left;
             font-size: 22px;
             padding:8px 0 0 0px;
             border-bottom: 1px solid #eeeeee;
         }
          .xbacky  .zhon-up{
             position: relative;
               width: 296px ;
               height: 43px;
               margin-top: 100px;
              /*background-color: #B61D1D;*/
         }

         .zhon-up:hover{
             border: 1px solid lightskyblue;

         }

         .zhon-up  .yx{

             float: right;
             margin-top: -47px;
         }

         .xbacky  .zhon-dom{
             position: relative;
             width: 296px ;
             height: 43px;
             margin-top: 15px;
             /*background-color: #B61D1D;*/
         }

         .zhon-dom  .mm{
            float: right;
             margin-top: -47px;
         }

         .zhon-dom:hover{
             border: 1px solid lightskyblue;
             overflow: hidden;
         }

         .zhon-up img:hover{
             border: 1px solid lightskyblue;
         }

         .zhon-dom img:hover{
             border: 1px solid lightskyblue;
         }

         .zw{
             margin-top: 25px;
             position: absolute;
             width: 300px;
             height: 25px;
             /*background-color: #B61D1D;*/
         }

         .zw  .dong{
             float: left;
             margin-left: 15px;
             color: #666666;
             cursor: pointer;
         }

         .zw  .pass{
             float: right;
             margin-right: 15px;
             cursor: pointer;
         }

         .dc  li{
              width: 150px;
              height: 30px;
             float: left;
             margin-top: 5px;
              margin-left: 560px;
              font-size: 12px;
              text-align: right;
         }

         .dc  img{
             float: left;
             margin-left: 730px;
         }

         .foot{
             width: 300px;
             height: 50px;
             margin-top: 22px;
             position: absolute;
             /*background-color: #B61D1D;*/
         }

         .foot  .foot-l li{
             float: left;
             text-align: center;
             font-size: 12px;
             margin-left: -35px;
             color:#666666;
             cursor: pointer;
         }
         .foot .foot-r li{
             float: right;
             font-size: 10px;
             margin-right: 15px;
             cursor: pointer;
         }
        .b{
            border-radius: 100px;
            background-color: #B1191A;
        }

        .againw{
            width: 2000px;
             padding: 23px 0 30px 0;
             position: absolute;
             text-align: center;
        }
    .links{
      height: 25px;
      float: left;
      margin-left: 500px;
     }
   .links a{
     padding: 0 6px;
    }

   .againw  p{
       float: left;
       margin-left: 800px;
       color: #666666;
   }
       </style>

     </head>

    <body>

        <div class="nav">
            <div class="log"></div>
            <div class="zh">欢迎登录</div>
        </div>

        <div class="back">

            <div class="xbacky" id="icon">

                <div class="top"><a href="#">扫码登录</a> <span style="color: #eeeeee">|</span> <a href="#"> 账户登录</a></div>

                <div class="zhon-up">
                    <label><img src="data:image/yyyyyyyy.png" width="47px" height="43" border-color=""></label>
                    <div class="yx"><input type="text"style="width: 242px;height:35px;margin-left: 42px;" value="邮箱/用户名/已验证手机" /></div>
                </div>

                <div class="zhon-dom">
                    <label><img src="data:image/uuuuu.png" width="47px" height="43"></label>
                    <div class="mm"><input type="password" id="password" name="password" style="width: 242px;height:35px;margin-left: 42px;" value="请输入密码123" />

                    </div>
                </div>

                <div class="zw">
                    <div class="dong"><input type="checkbox">自动登录</div>
                    <div class="pass"> <a>忘记密码</a></div>
                </div>

                <a href="file:///D:/ziliao/%E4%BA%AC%E4%B8%9C/%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE/jdhtml.html">
                    <input name="a" type="submit" value="登 录" style=" width: 270px; height: 30px; margin: 80px 0 0 15px; color:#FFFFFF; font-size: 18px" onclick="checkpassword();"/>
                </a>

                <div class="foot">
                    <div class="foot-l" >
                        <ul>
                            <li><a href="#">京东钱包 |</a></li>

                            <li><a href="#">QQ |</a></li>
                            <li><a href="#">微信</a></li>
                        </ul>
                    </div>

                    <div class="foot-r">
                        <ul>

                            <li><a href="#">立即注册</a></li>
                            <li class="b">></li>
                        </ul>
                    </div>
                </div>
        </div>
        </div>

      <script>
          function checkpassword(){
              var pwd="123";
              var inpwd=document.getElementById("password").value;//获取输入的代码
              if(pwd == inpwd){  //判断一下是否一样
                  window.location.href="http://localhost:63342/web/%E9%99%88%E7%8E%89%E5%B9%BF11.04%E4%BD%9C%E4%B8%9A/%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE/jdhtml.html";
              }else{
                  alert("亲你输入密码的密码错误!");
              }
          }
      </script>

    <div class="dc">
        <ul>
            <li><img src="data:image/q-icon.png"width="18px" height="14px"></li>
            <li><a>登录页面，调查问卷</a></li>
        </ul>
    </div>

    <div class="w againw">
     <div class="links">
         <a href="#">关于我们</a> |
         <a href="#"> 联系我们</a>|
         <a href="#">人才招聘</a> |
         <a href="#">商家入驻</a> |
         <a href="#">广告服务</a> |
         <a href="#">手机京东</a> |
         <a href="#">友情链接</a> |
         <a href="#">销售联盟</a> |
         <a href="#">京东社区</a> |
         <a href="#">京东公益</a> |
         <a href="#">English Site</a>
    </div>
        <p>Copyright © 2004-2016  京东JD.com 版权所有 </p>
    </div>

     </div>
    </body>
</html>

*****************************************************************************************************************************************************
京东主页部分HTML+js+css：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>京东</title>

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

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

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

    <script src="jquery/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="aijjs.js"></script>

    <script>

        function ab(id) {
            return typeof id==='string'?document.getElementById(id):id;
        }
        window.onload=function(){
            var index=0;
            var timer=null;
            var pic=ab("pic").getElementsByTagName("li");
            var num=ab("num").getElementsByTagName("li");
            var flash=ab("flash");
            var left=ab("left");
            var right=ab("right");
            //单击左箭头
            left.onclick=function(){
                index--;
                if (index<0) {index=num.length-1};
                changeOption(index);
            }
            //单击右箭头
            right.onclick=function(){
                index++;
                if (index>=num.length) {index=0};
                changeOption(index);
            }
            //鼠标划在窗口上面，停止计时器
            flash.onmouseover=function(){
                clearInterval(timer);
            }
            //鼠标离开窗口，开启计时器
            flash.onmouseout=function(){
                timer=setInterval(run,2000)
            }
            //鼠标划在页签上面，停止计时器，手动切换
            for(var i=0;i<num.length;i++){
                num[i].id=i;
                num[i].onmouseover=function(){
                    clearInterval(timer);
                    changeOption(this.id);
                }
            }
            //定义计时器
            timer=setInterval(run,2000)
            //封装函数run
            function run(){
                index++;
                if (index>=num.length) {index=0};
                changeOption(index);
            }
            //封装函数changeOption
            function changeOption(curindex){
                console.log(index)
                for(var j=0;j<num.length;j++){
                    pic[j].style.display="none";
                    num[j].className="";
                }
                pic[curindex].style.display="block";
                num[curindex].className="active";
                index=curindex;
            }
        }
    </script>

</head>
<body>

<div class="shortcut">
    <div class="w">

        <div class="fl">
            <div class="dt">
                送至：北京<i><s>◇</s></i>
            </div>
        </div>

        <div class="fr">
            <ul>
                <li>
                    <a href="file:///D:/ziliao/%E4%BA%AC%E4%B8%9C/%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE/denlu.html">你好，请登录</a>
                    <a href="#" class="col-red">免费注册</a>
                </li>

                <li class="line"></li>
                <li>我的订单</li>

                <li class="line"></li>
                <li class="fore">我的京东
                    <i><s>◇</s></i>
                </li>

                <li class="line"></li>
                <li >京东会员</li>

                <li class="line"></li>
                <li >企业采购</li>

                <li class="line"></li>
                <li class="fore tel-jd">
                    <em class="tel"></em>手机京东
                    <i><s>◇</s></i>
                </li>

                <li class="line"></li>
                <li class="fore">关注京东
                    <i><s>◇</s></i>
                </li>

                <li class="line"></li>
                <li class="fore">客户服务
                    <i><s>◇</s></i>
                </li>

                <li class="line"></li>
                <li class="fore">网站导航
                    <i><s>◇</s></i>
                </li>

            </ul>
        </div>
    </div>
</div>

<div class="topbanner">
    <div class="w tp">
        <img src="data:image/banner.jpg" alt="">
        <a href="javascript:;" class="close-banner"></a>
    </div>
</div>

<div class="w clearfix">
    <div class="logo">
        <a href="https://www.jd.com" target="_blank" class="jd-a" title="京东"></a>
        <div class="db11">
            <a href="https://www.jd.com"><img src="data:image/logo-201305.png" alt="图片没有加载出来"></a>
        </div>
    </div>
    <div class="search">
        <input type="text" name="" id="" value="电池" />
        <button>搜索</button>

        <div class="hotwords">
            <a href="" class="col-red">百元神券</a>
            <a href="">满199-100</a>
            <a href="">599减400</a>
            <a href="">买1送1</a>
            <a href="">秋收季</a>
            <a href="">奶粉</a>
            <a href="">毛呢大衣</a>
            <a href="">新品首发</a>

        </div>
    </div>

    <div class="car">
        <a href="#">我的购物车</a>
        <span class="icon1"></span>
        <span class="icon2">></span>
        <span class="icon3">0</span>
    </div>

</div>

<div class="jd-nav" >
    <div class="w">
        <div class="dropdown">
            <div class="dt"><a href="#">全部商品分类</a></div>

            <div class="dd">
                <div class="item1">
                    <a target="_blank" href="#">家用电器</a><small>></small><br/>
                    <a target="_blank" href="#">手机、运营商、数码</a><small>></small><br/>
                    <a target="_blank" href="#">电脑、办公</a><small>></small><br/>
                    <a target="_blank" href="#">家居、家具、家装、厨具</a><small>></small><br/>
                    <a target="_blank" href="#">男装、女装、童装、内衣</a><small>></small><br/>
                    <a target="_blank" href="#">个护化妆、清洁用品</a><small>></small><br/>
                    <a target="_blank" href="#">鞋靴、箱包、钟表、奢侈品</a><small>></small><br/>
                    <a target="_blank" href="#">运动户外</a><small>></small><br/>
                    <a target="_blank" href="#">汽车、汽车用品</a><small>></small><br/>
                    <a target="_blank" href="#">母婴、玩具乐器</a><small>></small><br/>
                    <a target="_blank" href="#">食品、酒类、生鲜、特产</a><small>></small><br/>
                    <a target="_blank" href="#">营养保健</a><small>></small><br/>
                    <a target="_blank" href="#">图书、音像、电子书</a><small>></small><br/>
                    <a target="_blank" href="#">彩票、旅行、充值、票务</a><small>></small><br/>
                    <a target="_blank" href="#">理财、众筹、白条、保险</a><small>></small><br/>
                </div>
            </div>
        </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><a href="#">全球购</a></li>
                <li><a href="#">闪购</a></li>
                <li><a href="#">团购</a></li>
                <li ><a href="#">拍卖</a></li>
                <li class="new"><a href="#">金融</a></li>
            </ul>
        </div>
        <div class="bike">
            <a href="#"></a>
        </div>
    </div>
</div>
<!--nav结束-->

<!--大的背景图片-->
<div class="bannner604">
    <a href="#"></a>
</div>
<div class="daa">
<div class="w main clearfix">
    <div id="flash">
        <ul id="pic">
            <li style="display:block"><img src="data:image/slider6.jpg" alt=""></li>
            <li><img src="data:image/slider1.jpg" alt=""></li>
            <li><img src="data:image/slider2.jpg" alt=""></li>
            <li><img src="data:image/slider3.jpg" alt=""></li>
            <li><img src="data:image/slider4.jpg" alt=""></li>
            <li><img src="data:image/slider5.jpg" alt=""></li>

        </ul>
        <ol id="num">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
        <a href="javascript:;" class="arrow" id="left" >&lt;</a>
        <a href="javascript:;" class="arrow" id="right">&gt;</a>
    </div>
</div>

<div class="news">
    <div class="jd-news">

        <div class="dt">
            <h3>京东快报</h3>
            <a href="#">更多</a>
        </div>
        <div class="dd">
            <ul>
                <li><a href=""><span>[特惠]</span>强韧满分 唤醒元气秀发</a></li>
                <li><a href=""><span>[公告]</span>山姆会员商店全面入驻京东商城</a></li>
                <li><a href=""><span>[特惠]</span>山姆会员店盛大开业，全店热销</a></li>
                <li><a href=""><span>[公告]</span>广东、福建受台风影响配送延迟</a></li>
                <li><a href=""><span>[特惠]</span>5折神券提前抢！</a></li>
            </ul>
        </div>
    </div>

    <div class="lifeServi">

        <div class="dd" id="iconSprite">
            <ul>
                <li class="lifeServi-icon1"><a href="#"><i></i><span>话费</span></a></li>
                <li class="lifeServi-icon2"><a href="#"><i></i><span>机票</span></a></li>
                <li class="lifeServi-icon3"><a href="#"><i></i><span>电影票</span></a></li>
                <li class="lifeServi-icon4"><a href="#"><i></i><span>游戏</span></a></li>
                <li class="lifeServi-icon5"><a href="#"><i></i><span>彩票</span></a></li>
                <li class="lifeServi-icon6"><a href="#"><i></i><span>加油卡</span></a></li>
                <li class="lifeServi-icon7" ><a href="#"><i></i><span>酒店</span></a></li>
                <li class="lifeServi-icon8"><a href="#"><i></i><span>火车票</span></a></li>
                <li class="lifeServi-icon9"><a href="#"><i></i><span>众筹</span></a></li>
                <li class="lifeServi-icon10"><a href="#"><i></i><span>理财</span></a></li>
                <li class="lifeServi-icon11"><a href="#"><i></i><span>礼品卡</span></a></li>
                <li class="lifeServi-icon12"><a href="#" class="song"><i></i><span>白条</span></a></li>
            </ul>
            <script>
                var iis = document.getElementById("iconSprite").getElementsByTagName("i");

                for (var i=0;i<iis.length;i++) {
                    iis[i].style.backgroundPosition = "right "+(-i*25)+"px";
                    var num = iis[i].style.backgroundPosition;
                    console.log(num);
                }
            </script>
        </div>
        <div class="dt">
        </div>
    </div>
</div>
</div>

<!--双11活动-->
<div  class="watches" id="box">
    <div class="w today clearfix">
        <div class="night">
            <div class="night-r">
                <ul id="imgs">
                    <li><a href="#"><img src="data:image/5.png"  alt="" /></a></li>
                    <li><a href="#"><img src="data:image/1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="data:image/2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="data:image/3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="data:image/4.jpg" alt="" /></a></li>
                </ul>
            </div>
            <div id="watches">
                <span id="left1">&lt;</span>
                <span id="right1">&gt;</span>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    function a(id){
        return document.getElementById(id);
    }

    //切换下一页的隐藏和显示
    a("box").onmouseover= function(){
        a("watches").style.display = "block";
    }

    $("box").onmouseout = function(){
        a("watches").style.display = "none";
    }

</script>

<!--<div class="it">-->
    <!--<b class="dn">电脑数码</b>-->
    <!--<div class="dy">-->
        <!--<ul>-->
            <!--<li><a href="#">IT精选</a></li>-->
            <!--<li><a href="#">电脑馆</a></li>-->
            <!--<li><a href="#">游戏极品</a></li>-->
            <!--<li><a href="#">装机大师</a></li>-->
            <!--<li><a href="#">职场办公</a></li>-->
            <!--<li><a href="#">女神频道</a></li>-->
            <!--<li><a href="#">VR</a></li>-->
            <!--<li><a href="#">二合一平板</a></li>-->
            <!--<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="wrapper">

    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>

    <div class="products">
        <div class="main selected">

            <a href="#"><img src="data:image/a.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/b.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/c.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/d.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/5814.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/5819.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/58178698N8fd691fb.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/l.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/a.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/b.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/5814.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/5819.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/58178698N8fd691fb.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/l.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/a.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/b.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/b.jpg" width="180px" height="180px" alt=""/></a>
            <a href="#"><img src="data:image/a.jpg" width="180px" height="180px" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5819.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5819.jpg" width="190px" height="190px" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5819.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5819.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5819.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>

        </div>

        <div class="main">
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/a.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/b.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/c.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5819.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/d.jpg" width="190px" height="190px" alt=""/></a>
            <a href="###"><img src="data:image/5814.jpg" width="190px" height="190px" alt=""/></a>
        </div>
    </div>

</div>

<!--页面的底部开始-->
<div class="jd-footer">
    <div class="service"><!--服务板块-->

        <div class="slogen"> <!--图标版块-->

            <span class="item slogen1"><img src="data:image/slogen1.png" alt="" /></span>
            <span class="item slogen2"><img src="data:image/slogen2.png" alt="" /></span>
            <span class="item slogen3"><img src="data:image/slogen3.png" alt="" /></span>
            <span class="item slogen4"><img src="data:image/slogen4.png" alt="" /></span>
            <button><div class="tyy"><</div></button>
            <button><div class="trr">></div>    </button>
        </div>

        <div class="w shopping clearfix">

            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
            </dl>

            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd><a href="#">上门自提</a></dd>
                <dd><a href="#">211限时达</a></dd>
                <dd><a href="#">配送服务查询</a></dd>
                <dd><a href="#">配送费收取标准</a></dd>
                <dd><a href="#">海外配送    </a></dd>
            </dl>

            <dl>
                <dt><a href="#">支付方式</a></dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">在线支付</a></dd>
                <dd><a href="#">分期付款</a></dd>
                <dd><a href="#">邮局汇款</a></dd>
                <dd><a href="#">公司转账</a></dd>
            </dl>

            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">价格保护</a></dd>
                <dd><a href="#">退款说明</a></dd>
                <dd><a href="#">返修/退换货</a></dd>
                <dd><a href="#">取消订单</a></dd>
            </dl>

            <dl>
                <dt><a href="#">特色服务</a></dt>
                <dd><a href="#">夺宝岛</a></dd>
                <dd><a href="#">DIY装机</a></dd>
                <dd><a href="#">延保服务</a></dd>
                <dd><a href="#">京东E卡</a></dd>
                <dd><a href="#">京东通信</a></dd>
            </dl>

            <div class="coverage">
                <div class="dt">京东自营覆盖区县</div>
                <div class="dd">
                    <p>京东已向全国2654个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
                    <p class="looklook"><a href="#">查看详情 ></a></p>
                </div>
            </div>

        </div>
    </div>
    <div class="w againw">
        <div class="links">
            <a href="#">关于我们</a> |
            <a href="#"> 联系我们</a> |
            <a href="#">联系客服</a> |
            <a href="#">商家入驻</a> |
            <a href="#">营销中心</a> |
            <a href="#">手机京东</a> |
            <a href="#">友情链接</a> |
            <a href="#">销售联盟</a> |
            <a href="#">京东社区</a> |
            <a href="#">风险监测</a> |
            <a href="#">京东公益</a> |
            <a href="#">English Site</a> |
            <a href="#">Contact Us</a>
        </div>
        <div class="copyright">
            京公网安备 11000002000088号  |  京ICP证070359号  |  互联网药品信息服务资格证编号(京)-经营性-2014-0008  |  新出发京零 字第大120007号
            互联网出版许可证编号新出网证(京)字150号  |  出版物经营许可证  |  网络文化经营许可证京网文[2014]2148-348号  |  违法和不良信息举报电话：4006561155
            Copyright © 2004 - 2016  京东JD.com 版权所有  |  消费者维权热线：4006067733
            京东旗下网站：京东钱包
        </div>
        <div class="message">
            <a href="#"><img src="data:image/mess.png" alt="" /></a>
            <a href="#"><img src="data:image/mess2.png" alt="" /></a>
            <a href="#"><img src="data:image/mess3.png" alt="" /></a>
            <a href="#"><img src="data:image/mess4.png" alt="" /></a>
            <a href="#"><img src="data:image/mess5.png" alt="" /></a>

        </div>

    </div>

</div>
<!--页面的底部结束-->

</body>
</html

***********************
CSS（jdcss）
**********************
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle;}
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*防止拖动*/
img {border:0;    vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/
table { border-collapse:collapse; }
body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff;

}
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
/*.clearfix{*/
    /**zoom:1;!*IE/7/6*!*/
/*}*/
a {color:#666666; text-decoration:none; }

a:hover{color:#C81623;}

h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}

/*公共类*/
.w {  /*版心 提取 */
    width: 1210px;margin:0 auto;
}
.fl {
    float:left
}
.fr {
    float:right
}
.al {
    text-align:left
}
.ac {
    text-align:center
}
.ar {
    text-align:right
}
.hide {
    display:none
}

/*头部nav开始*/
.shortcut{
    height: 30px;
    line-height: 30px;
    background-color: #f1f1f1;
}
.dt,
.shortcut .fore
{
    padding: 0 20px 0 10px;
    position: relative;
}
.dt i,.fore i{
    font: 400 15px/15px "宋体";
    position: absolute;
    top: 13px;
    right: 3px;
    height: 7px;
    width:15px ;
    overflow: hidden;
}
.dt s ,.fore s{
    position: absolute;
    top: -8px;
}
.fr li{
    float: left;
    padding: 0 10px;
}
.fr .line{
    width: 2px;
    height: 13px;
    background-color: #ddd;
    margin-top: 9px;
    padding: 0px;
}
.shortcut .tel-jd{
    padding: 0 20px 0 25px;
}
.tel{
    position: absolute;
    width: 15px;
    height: 20px;
    background: url(image/jd2015img.png)no-repeat;
    top:5px;
    left: 5px;
    overflow: hidden;
}
/*头部nav end*/

/*TopBanner begin*/
.topbanner{
    background-color: rgb(22,135,255);
}
.close-banner{
    position: absolute;
    /*    right: 0px;
    */    top: 5px;
    margin-left: -25px;
    margin-top: 5px;
    width: 19px;
    height: 19px;
    background: url(image/x.png) no-repeat;
}
.close-banner:hover{
    background-position: bottom;
}
.tp{
    position: relative;
}
.logo{
    width:360px;
    height: 75px;
    padding-top: 25px;
    margin-right: 20px;
    float: left;
    position: relative;
}
.db11{
    position: absolute;
    width: 180px;
    height: 60px;
    margin: 10px;
    top: 10px;
    left: 5px;
}
.search{
    width:538px;
    height: 75px;
    float: left;
    margin-top: 25px;
}
.search input{
    width: 450px;
    height: 32px;
    border: 2px solid #B61D1D;
    padding-left: 4px;
    font: 14px/32px "microsoft yahei";
    color: #666666;
    float: left;
}
.search button{
    width: 80px;
    height: 36px;
    background-color: #B61D1D;
    font: 16px/36px "microsoft yahei";
    color: #fff;
    cursor: pointer;/*鼠标变成小手*/
}
.search .hotwords{
    width: 500px;
    padding: 7px 7px 7px 0px;
    font-size:12px;
}
.search .hotwords a{
    margin-right: 13px;
}

.car{
    width:96px;
    line-height: 34px;
    float: right;
    margin: 25px 125px 0 0px;
    position: relative;
    padding-left: 40px;
    border: 1px solid #DFDFDF;
}
/*购物小图标*/
.icon1{
    position: absolute;
    width: 16px;
    height: 13px;
    background: url(image/jd2015img.png) no-repeat -1px -59px;
    top: 10px;
    left: 20px;
}
/*>*/
.icon2{
    font: 400 13px/13px simsun;
    position: absolute;
    top: 10px;
    right: 10px;
}
.icon3{
    position: absolute;
    width: 16px;
    height: 14px;
    background-color: #C81623;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    border-radius: 7px 7px 7px 0;
    top: -4px;

}

.hotwords{
    width: 500px;
    float: left;
    color: black;
}

/* nav部分*/

.jd-nav{
    width: 100%;
    height: 44px;
    margin-top: 20px;
    position: relative;
    border-bottom: 2px solid #B1191A;
}
.dropdown{
    width: 210px;
    height: 44px;
    float: left;
    position: relative;
    overflow: visible;
    z-index: 10;
}
.dropdown .dt{
    height: 44px;

}
.dropdown .dt a{
    width: 200px;
    display: block;
    height: 44px;
    font: 400 15px/44px "microsoft yahei";
    background-color: #B1191A;
    color: #fff;
    padding-left:10px ;
    margin-left: 10px;
}
.dropdown .dd{
    height: 465px;
    width: 210px;
    background-color: #C81623;
    margin-left: 20px;
    line-height: 30px;
    color: #fff;
}
.dd  .item1{
    float: left;
    font-size: 15px;
    font-family: "Microsoft" ;
    padding:8px 0px 0px 8px;
}
.item1 a{
    clear: both;
    color: #fff;
}
.item1  a:hover{color:#C81623;}
.item1  small{
    width: 15px;
    height: 15px;
    float: right;
}

.navitems{
    width: 730px;
    height: 44px;
    float: left;
}

.navitems li{
    float: left;
    margin-left: 40px;
}
.navitems li.new{
    background: url(image/new.jpg) no-repeat  right top ;
}
.navitems li a{
    display: block;
    color: #333;
    font: 400 15px/44px "microsoft yahei";
}

/*切换部分*/
.wrapper{
    width: 1210px;
    height: 600px;
    margin: 0 auto;
    margin-top: 80px;
}
.tab{
    border: 1px solid #DDD;
    border-bottom: 0;
    height: 36px;
    width: 330px;
}
.tab li{
    position: relative;
    float: left;
    width: 81px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    border-top: 4px solid #fff;
}
.tab span{
    position: absolute;
    right: 0;
    top:10px;
    background: #ddd;
    width: 1px;
    height: 14px;
    overflow: hidden;

}
.products{
    width: 1210px;
    border: 1px solid #ddd;
    height: 600px;
}
.products .main{
    float: left;
    display: none;
}

.main  img{
    margin-left: 8px;
}

.main a img:hover{
    margin-left: 8px;
    width: 190px;
    height: 190px;
}

.products .main.selected{
    display: block;
}

.tab li.active{
    border-color: red;
    border-bottom: 0;
}

.it{
    width: 1210px;
    height: 50px;
    position: relative;
    margin: auto;
    background-color: rgb(110,153,180);
}

.dn{
    float: left;
    font-size: 23px;
    color: #FFFFFF;
    padding-top: 15px;
    margin-left: 50px;
}

.dy{
    float: right;
    width: 900px;
    height: 50px;
    /*background-color: rebeccapurple;*/
}

.dy  ul{
    float:left ;
}

.dy ul li{
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 7px;
    margin-top: 10px;
    /*border: 1px solid #fff;*/
    /*color: #FFFFFF;*/
    margin-left: 10px;
    /*margin-bottom: 10px;*/
    max-width: 100px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.dy ul  li  a{
    color: #FFFFFF;
}

.dy ul  li:hover{
    /*color:brown;*/
    font-size: 16px;
    border: 1px solid  ghostwhite;
}

/*切换部分结束*/

/*服务板块开始*/
.jd-footer{
    width: 1210px;
    height: 700px;
    margin: 200px auto;

    /*background-color: red;*/
}

.slogen{
    height: 54px;
    padding: 20px 0;
    background-color: #f5f5f5;
    position: relative;
    margin-top: -120px;
    margin-bottom: 15px;
}
.item{
    width: 302px;
    position: absolute;
    top: 20px;
    left: 50%;
}
.slogen1{
    margin-left: -608px;
}
.slogen2{
    margin-left: -304px;
}
.slogen3{
    margin-left: 2px;
}
.slogen4{
    margin-left: 304px;
}
.shopping dl{
    width: 198px;
    float: left;
}
.shopping dt,
.coverage .dt{
    font-size: 16px;
    height: 28px;
    font-family: "微软雅黑";
    padding-top: 10px;
}
.shopping dd{
    height: 20px;
}
.coverage{
    float: right;
    width: 210px;
    height: 165px;
    background: url(image/china.png) no-repeat left bottom;
}
.coverage .dd{
    margin-top: 10px ;
}
.coverage p{
    line-height: 18px;
}
.looklook{
    text-align: right;
    margin-top: 50px;
}

.againw{
    border-top: 1px solid #E5E5E5;
    padding: 23px 0 30px 0;
    margin-top: 20px;
    text-align: center;
}
.links{
    height: 25px;
}
.links a{
    padding: 0 6px;
}
.copyright{
    line-height: 18px;
    margin-bottom: 10px;
}

**************************
CSS（base）
**************************
.bannner604{
    position: relative;
}
.bannner604 a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 604px;
    background: url(image/Bigbanner.jpg) no-repeat top center;
}

.daa{
    width: 1210px;
    height: 540px;
    margin: 0 auto;
}

.mian{
    position: absolute;
}
#flash{
    float: left;
    width: 730px;
    height: 354px;
    margin-left: 233px;
    margin-top: 10px;
    position:absolute;
    cursor: pointer;
    /*background-color: red;*/
}

#pic li{
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}

#num{
    position: absolute;
    left: 40%;
    margin-top: -30px;
    z-index: 2;
    cursor:default;}

#num li{
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #666;
    margin: 3px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    cursor: pointer;}

#num li.active{
    background: #f00;}

.arrow{
    height: 60px;
    width: 30px;
    line-height: 60px;
    text-align: center;
    display: block;
    position: absolute;
    top:45%;
    background-color: rgba(0,0,0,0.3);
    z-index: 3;display: none;
}

.arrow:hover{background: rgba(0,0,0,0.7);}

#flash:hover .arrow{display: block;}

#left{
    left: 1%;
}

#right{
    right: -1%;
}

.news{
    width: 215px;
    height: 451px;
    border: 2px solid #DDDDDD;
    margin-right: 20px;
    margin-top: 10px;
    position: relative;
    float: right;
}

.news  .jd-news{
    height: 150px;

    border-bottom: 1px dashed #E4E4E4;
}
.jd-news .dt{
    height: 60px;
    border-bottom: 1px dotted #E8E8E7;
    line-height: 43px;
}

.lifeServi .dt{
    height: 60px;
    margin-top: 240px;
    border-bottom: 1px dotted #E8E8E7;
    background: url(image/gggggg.jpg);
    line-height: 43px;
}
.jd-news .dt h3,.lifeServi .dt h3{
    float: left;
    font: 14px/43px "microsoft yahei";
    color: #666;
    line-height: 43px;
    padding-left: 15px;
}

.jd-news .dt a{
    float: right;
    position: relative;
    font: 13px/43px "宋体";
    margin-right: 15px;
}
.lifeServi{
    height: 240px;
    /*overflow: hidden;*/
    width: 215px;
    float: left;
    border: 1px solid #666666;
}
.lifeServi ul{
    width: 215px;
}
.lifeServi ul li{
    width: 52.75px;
    height: 70px;
    border: 1px solid #E4E4E4;
    border-top: 0;
    margin-top: 10px;
    float: left;
    margin-left: -1px;
}
.lifeServi li a{
    display: block;
    height: 70px;
    text-align: center;
    padding-top: 44px;
    position: relative;
}
.lifeServi li i{
    position: absolute;
    top: 12px;
    left: 18px;
    width: 25px;
    height: 25px;
    background: url(image/icon_lifeserv.png)no-repeat right top;
}
.lifeServi .song{
    background: url(image/song.png) no-repeat right top;
}

/*双11活动*/
.watches{
    width:1210px;
    height: 151px;
    margin: -60px auto;
    background-color: burlywood;
}

.today{
    position: relative;
}
.night{
    margin: 0px 213px 0px 0;

}
.night-r{
    width: 996px;
    height: 160px;
    float: right;
}
.night-r li{
    float: left;
}

.night-r ul{
    position: absolute;
    top: 0;
    width:1210px;
}
.night-r ul li{
    float: left;
}
.night-r ul li.current{
    display: block;
}
#watches{
    display: none;
}
#watches span{
    width: 20px;
    height: 40px;
    position: absolute;
    left: 1px;
    top: 50%;
    margin-top: -20px;
    background: #000;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: "黑体";
    font-size: 30px;
    color: #FFF;
    opacity: 0.2;
    border: 1px solid #FFF;
}
#watches #right1{
    right: 0px;
    left: auto;
}

#watches #left1{
    left: 0px;
    right: auto;
}

***************
js
***************
/**
 * Created by lx on 16/11/3.
 */

    $(document).ready(function () {

    $(".tab li").mouseenter(function () {
        var $this = $(this);
        var index = $(this).index();

        $this.addClass("active").siblings("li").removeClass("active");

        $(".products div").eq(index).addClass("selected").siblings("div").removeClass("selected");

    })
})

****************************
jq为：jquery-1.11.1
****************************

html/京东项目/京东网页高仿/js/jq/css/java web/的更多相关文章

  1. 向网页中写入js和css

    向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...

  2. 项目中对模板和js，css文件进行压缩的处理类

    我们知道,在html的页面中,所有空格和换行符其实都会占据一定的空间,即使使用了gzip压缩,在传输过程中依然会浪费用户的流量和我们自己服务器的带宽,此脚本就是为了解决这个问题而诞生的. 请自行下载G ...

  3. Android项目实战之高仿网易云音乐项目介绍

    这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...

  4. Android项目实战之高仿网易云音乐创建项目和配置

    这一节我们来讲解创建项目:说道大家可能就会说了,创建项目还有谁不会啊,还需要讲吗,别急听我慢慢到来,肯定有你不知道的. 使用项目Android Studio创建项目我们这里就不讲解了,主要是讲解如何配 ...

  5. mavn项目(springMVC) 引入静态资源(js、css)等

    在web.xml中配置 <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern ...

  6. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  7. 【笔记JS/HTML/CSS】web中的HTTP协议（1）

    最近都在coursera刷课,加上自己课业也忙起来了,总是忘记写学习笔记ORZ 自省ing... 在写HTML的时候,form表单需要通过HTTP协议向服务器提交.查询数据(如下图) 客户端通过HTT ...

  8. 高仿QQ6.0之側滑删除

    前两天已经完毕了高仿QQ6.0側滑和优化,今天来看下側滑删除的实现吧,假设有兴趣,能够去看下之前的两篇,仿QQ6.0側滑之ViewDragHelper的使用(一)和高仿QQ6.0側滑菜单之滑动优化(二 ...

  9. Intellij IDEA Java web 项目搭建

    Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...

随机推荐

  1. mySQL基本操作学习笔记（一）

                                                                                                        ...

  2. WordPress博客平台的搭建--基于Ubuntu14服务器

    环境:阿里云服务器,系统Ubuntu14.04, 阿里云域名 大致流程:LNMP+WordPress 主要参考博客:VPS+LNMP+WordPress搭建个人网站/博客 遇到的问题: 1.在登陆域名 ...

  3. C# 字符编码类Encoding

    在网络通信中,很多情况下都是将字符信息转成字节序列进行传输.将字符序列转为字节序列的过程称为编码.当这些字节传送到接收方,接收方需要逆向将字节序列转为字符序列.这个过程就是解码. 常见编码有ASCII ...

  4. C#中隐藏(new)、方法重写(override)、重载(overload)的区别

    转自:http://www.cnblogs.com/glife/archive/2009/12/28/1633947.html 重载.重写和隐藏的定义: 重载:public string ToStri ...

  5. <转>思考力是万力之源

    做任何事情,要懂得积累和总结 每天进步一点点,一年365天下来就不得了   来自为知笔记(Wiz)

  6. LINQ To SQL

    议程 1.LINQ To SQL概述 2.LINQ To SQL对象模型 3.LINQ To SQL查询 用到的数据库 SQL Server 2005,数据库名为Test. 两张表,分别为Studen ...

  7. 07——为多态基类声明为virtual析构函数

    当基类确定被继承的时候,析构函数声明为virtual是必须的 当返回的派生类的指针或引用的时候,调用析构函数容易发生内存泄漏 当基类作为抽象类使用,声明pure virtual析构函数 析构函数的顺序 ...

  8. 如何用github快速搭建个人博客

    当当当当-来看下新鲜出炉的Github博客 http://wli12.github.io/ 喜欢写markdown,但cnblogs对md文件的渲染简直丑爆了... 好奇怎么用github+Jekyl ...

  9. 解决织梦DEDEcms指定arclist的特定ID排序的方法

    转载网址:http://blog.hrseo.net/xuexi/184.html 替换/include/taglib/arclist.lib.php这个文件,下载链接: http://pan.bai ...

  10. C++中的异常处理机制

    C++中的捕获异常机制catch参数中实参的类型不同,采取的处理方式则不相同,且与普通的函数调用还不一样,具体表现为当抛出异常throw A()或throw obj时,对象会进行一次额外的对象复制操作 ...