Java web(html/js/jq/css/京东项目)京东网页高仿

Posted 玉广Blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java web(html/js/jq/css/京东项目)京东网页高仿相关的知识，希望对你有一定的参考价值。

登录部分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="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="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="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="image/banner.jpg" >
        <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="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="image/slider6.jpg" ></li>
            <li><img src="image/slider1.jpg" ></li>
            <li><img src="image/slider2.jpg" ></li>
            <li><img src="image/slider3.jpg" ></li>
            <li><img src="image/slider4.jpg" ></li>
            <li><img src="image/slider5.jpg" ></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="image/5.png"  /></a></li>
                    <li><a href="#"><img src="image/1.jpg" /></a></li>
                    <li><a href="#"><img src="image/2.jpg" /></a></li>
                    <li><a href="#"><img src="image/3.jpg" /></a></li>
                    <li><a href="#"><img src="image/4.jpg" /></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="image/a.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/b.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/c.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/d.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/5814.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/5819.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/58178698N8fd691fb.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/l.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/a.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/b.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/5814.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/5819.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/58178698N8fd691fb.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/l.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/a.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/b.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/b.jpg" width="180px" height="180px" /></a>
            <a href="#"><img src="image/a.jpg" width="180px" height="180px" /></a>

        </div>

        <div class="main">

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




        </div>


        <div class="main">

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

        </div>


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

</div>


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

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

            <span class="item slogen1"><img src="image/slogen1.png" /></span>
            <span class="item slogen2"><img src="image/slogen2.png" /></span>
            <span class="item slogen3"><img src="image/slogen3.png" /></span>
            <span class="item slogen4"><img src="image/slogen4.png" /></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="image/mess.png" /></a>
            <a href="#"><img src="image/mess2.png" /></a>
            <a href="#"><img src="image/mess3.png" /></a>
            <a href="#"><img src="image/mess4.png" /></a>
            <a href="#"><img src="image/mess5.png" /></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
****************************








 













































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































以上是关于Java web(html/js/jq/css/京东项目)京东网页高仿的主要内容，如果未能解决你的问题，请参考以下文章

京东面经学习----答案整理

京东面经学习----答案整理

京东面经学习----答案整理

java项目开发-大神案例分享：京东京豆项目06

京东面经汇总

技术京东京麦：微服务架构下的高可用网关与容错实践