XiaoMi
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="js/animate.js"></script>
    <style>
  footer{


      width: 1290px;
      margin:0 auto;
      border-top: #999999 solid 1px;


  }
        footer dl{

            float: left;
            margin-right: 72px;
        }
  footer dl:nth-of-type(5){
      margin-right:0;

  }

        footer dl dt,footer dl dd{
            width: 200px;
            line-height: 24px;

        }
        footer dl dt{
            font-size: 18px;
            line-height: 80px;
        }
  footer dl dd a{
      font-size: 14px;
      color: #666666;
  }
  footer dl dd a:hover{
      color: #ff6600;
  }
    </style>
    <script src="js/scroll.js"></script>
</head>
<body>
<header>
    <div class="top_nav">
        <div class="left">
            <a href="#">小米商城</a>
            <a href="#">MIUI</a>
            <a href="#">loT</a>
            <a href="#">云服务</a>
            <a href="#">金融</a>
            <a href="#">有品</a>
            <a href="#">小爱开放平台</a>
            <a href="#">政企服务</a>
            <a href="#">资质证照</a>
            <a href="#">协议规则</a>
            <a href="#">下载app</a>
            <a href="#">Select Region</a>
        </div>
        <div class="right">
            <ul>
                <li id="login"><a href="#">登录</a></li>
                <li id="register"><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#">购物车 <img src="img/sidebar4.png" alt="">(0)</a></li>
            </ul>
        </div>
    </div>
</header>
<div class="header_nav">
    <div class="header_nav_content">
        <div class="logo">
            <a href="#"><img src="./img/logo.jpg" alt=""></a>
        </div>
        <div class="e_nav">
            <ul>
                <li class="first"><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><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>

        </div>
        <div class="header_search">
            <input type="text">
        </div>


        <div class="items">
            <ul>
                <li><a href="#"><img src="img/sj1.png" alt=""></a><span>小米MIX3</span><i>3299元起</i></li>
                <li><a href="#"><img src="img/sj2.png" alt=""></a><span>小米8青春版</span><i>1399元起</i></li>
                <li><a href="#"><img src="img/sj3.png" alt=""></a><span>小米8</span><i>2699元起</i></li>
                <li><a href="#"><img src="img/sj4.png" alt=""></a><span>小米play</span><i>1099元起</i></li>
                <li><a href="#"><img src="img/sj5.png" alt=""></a><span>小米8SE</span><i>1699元起</i></li>
            </ul>
        </div>
    </div>
</div>
<div class="content">
    <div class="sidebar">
        <ul>
            <li><a href="#">手机 电话卡</a><span>></span></li>
            <li><a href="#">电视 盒子</a><span>></span></li>
            <li><a href="#">笔记本 平板</a><span>></span></li>
            <li><a href="#">家电 插线板</a><span>></span></li>
            <li><a href="#">出行 穿戴</a><span>></span></li>
            <li><a href="#">智能 路由器</a><span>></span></li>
            <li><a href="#">电源 配件</a><span>></span></li>
            <li><a href="#">健康 儿童</a><span>></span></li>
            <li><a href="#">耳机 音响</a><span>></span></li>
            <li><a href="#">生活 箱包</a><span>></span></li>
        </ul>
    </div>
    <div class="lunbotu">
        <div class="box">
            <ul id="ul">
                <li><img src="img/lb1.jpg"/></li>
                <li><img src="img/lb2.jpg"/></li>
                <li><img src="img/lb3.jpg"/></li>
                <li><img src="img/lb4.jpg"/></li>
                <li><img src="img/lb5.jpg"/></li>
            </ul>
            <ol>

            </ol>
        </div>

    </div>
</div>
<!--
    商品详情
-->
  <div class="product1">
      <h3>手机 <a href="#">查看全部</a></h3>

      <div class="left">
          <img src="img/pro11.jpg" alt="">
      </div>
     <div class="right">
         <ul>
             <li><a href="xiaomi8.html"><img src="img/pro1.jpg" alt=""></a>
                 <em>小米8 青春版 4GB+64GB</em><i>潮流镜面渐变色,2400万自拍旗舰</i>
                 <b>1299元</b><s>1399元</s></li>
             <li><a href=""><img src="img/pro2.jpg" alt=""></a>
                 <em>小米Play</em><i>内置每月10GB高速流量,高颜值流光...</i>
                 <b>1099元</b></li>
             <li><a href=""><img src="img/pro3.jpg" alt=""></a>
                 <em>小米8 SE 6GB+64GB</em><i>AI 超感光双摄,三星 AMOLED 屏幕</i>
                 <b>1699元</b><s>1999元</s></li>
             <li><a href=""><img src="img/pro4.jpg" alt=""></a>
                 <em>小米MIX 2S 8GB+256GB</em><i>骁龙845 年度旗舰处理器,艺术品般...</i>
                 <b>3399元</b><s>3999元</s></li>
             <li><a href=""><img src="img/pro5.jpg" alt=""></a>
                 <em>小米6X 6GB+128GB</em><i>超薄美观的拍照手机</i>
                 <b>1499元</b><s>1999元</s></li>
             <li><a href=""><img src="img/pro6.jpg" alt=""></a>
                 <em>小米Max3 4GB+64GB</em>
                 <b>1599元</b><s>1699元</s></li>
             <li><a href=""><img src="img/pro7.jpg" alt=""></a>
                 <em>红米6Pro</em><i>高颜值大电量 红米旗舰</i>
                 <b>1029元</b><s>1299元</s></li>
             <li><a href=""><img src="img/pro8.png" alt=""></a>
                 <em>红米6A 2GB+16GB</em><i>潮流镜面渐变色,2400万自拍旗舰</i>
                 <b>549元</b><s>599元</s></li>
         </ul>
     </div>
  </div>

<div class="sidebar1">
    <a href="#"><img src="img/sidebar1.png" alt=""></a>
    <a href="#"><img src="img/sidebar2.png" alt=""></a>
    <a href="#"><img src="img/sidebar3.png" alt=""></a>
    <a href="#"><img src="img/sidebar4.png" alt=""></a>
    <a href="#" id="backto"><img src="img/sidebar5.png" alt=""></a>
</div>

<footer>
    <dl>
        <dt>帮助中心</dt>
        <dd><a href="#">账户管理</a></dd>
        <dd><a href="#">购物指南</a></dd>
        <dd><a href="#">订单操作</a></dd>
    </dl>

    <dl>
        <dt>服务支持</dt>
        <dd><a href="#">售后政策</a></dd>
        <dd><a href="#">自助服务</a></dd>
        <dd><a href="#">相关下载</a></dd>
    </dl>
    <dl>
        <dt>线下门店</dt>
        <dd><a href="#">小米之家</a></dd>
        <dd><a href="#">服务网点</a></dd>
        <dd><a href="#">授权体验店</a></dd>
    </dl>
    <dl>
        <dt>关于小米</dt>
        <dd><a href="#">了解小米</a></dd>
        <dd><a href="#">加入小米</a></dd>
        <dd><a href="#">投资者关系</a></dd>
    </dl>
    <dl>
        <dt>服务特色</dt>
        <dd><a href="#">F 码通道</a></dd>
        <dd><a href="#">礼物码</a></dd>
        <dd><a href="#">防伪查询</a></dd>
    </dl>
</footer>


</body>
<script>
    var  oLogin=document.getElementById("login");
    oLogin.onclick=function () {
      window.location="login.html" ;
    }
   var oregister=document.getElementById("register");
    oregister.onclick=function () {
        window.location="register.html"
    }
    var oFirst = document.querySelector(".first a");

    var oItems = document.querySelector(".items");

    oFirst.onmouseenter = function () {
        oItems.style.display = "block";

        oItems.style.transition = "1s 1s"
    }
    oFirst.onmouseleave = function () {
        oItems.style.display = "none";
        oItems.style.transition = "1s 1s"
    }

    //轮播图

    window.onload = function () {
        var oUl = document.getElementById('ul');
        var oAll = document.querySelector('.lunbotu');//移入移除

        //1.拿都第一张
        var ocloneLi1 = document.querySelector('#ul li').cloneNode(true);
        oUl.appendChild(ocloneLi1);//克隆并且追加到最后一张
        //2.动态的创建 黄色的小格子, -1

        var oLiAll = document.querySelectorAll('#ul li');
        for (var i = 0; i < oLiAll.length - 1; i++) {
            var newLi = document.createElement("li");

            newLi.index = i;
            newLi.onclick = function () {

                autoInex = dianIndex = this.index - 1;

                autoPlay();
            }
            if (i == 0) {
                newLi.className = "current";
            }

            document.querySelector("ol").appendChild(newLi)
        }

        var timer = setInterval(autoPlay, 3000);
        //3.自动轮播,
        var autoInex = 0;
        var dianIndex = 0;

        function autoPlay() {
            autoInex++;
            if (autoInex > 5) {
                autoInex = 1;
                oUl.style.left = "0px";
            }

            animate(oUl, -1 * autoInex * 1050);

            dianIndex++;
            if (dianIndex > 4) {
                dianIndex = 0;
            }

            var nextLis = document.querySelectorAll(".lunbotu ol li");


            for (var i = 0; i < nextLis.length; i++) {
                nextLis[i].className = "";
            }
            nextLis[dianIndex].className = "current";

        }


        //4.鼠标移入暂停定时器.

        oAll.onmouseenter = function () {

            clearInterval(timer);
        }


        //5.鼠标移除,开启定时器
        oAll.onmouseleave = function () {
            timer = setInterval(autoPlay, 1500);
        }


    }

    var oSidebarback=document.querySelector("#backto");
             oSidebarback.onclick=function () {


    }


</script>
</html>