一号店

.links a{
padding: 0 6px;
}

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

 </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+js+css:

京东
<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.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>
    <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>
  •     </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 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>
< >
<!--<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>-->
<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" alt=""/></a>
        <a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/c.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/d.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/5814.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/5819.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/58178698N8fd691fb.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/l.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/5814.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/5819.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/58178698N8fd691fb.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/l.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
        <a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>

    </div>

    <div class="main">

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




    </div>


    <div class="main">

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

    </div>


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

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

    })
    })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值