wykl
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/top_nav.css">
<link rel="stylesheet" href="./css/car_bottom.css">
<title>Document</title>
<style>
    /* * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    } */

    .container {
        margin: 50px auto;
        border-top: 1px solid gainsboro;
        border-right: 1px solid gainsboro;
        border-bottom: 1px solid gainsboro;
        border-left: 1px solid gainsboro;
        width: 840px;
        height: 350px;
    }

    .left,
    .left2,
    .left3,
    .left4,
    .left5,
    .left6,
    .left7,
    .left8 {
        float: left;
        position: relative;
        box-sizing: border-box;
        width: 200px;
        height: 300px;
        border-right: 1px dashed #ddd;
        background: url(https://kaola-haitao.oss.kaolacdn.com/4O1yWA5GGK2deliT06U9x6wSNf_330_542T1811012029_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left2 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/baf3e28a-5f93-4afa-8170-5d0de7595c3fT19010151349_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left3 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/ea4c0ff8-83af-495d-8823-0c96642370bbT2001201852_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left4 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/8afaae29-a31c-4dab-b89d-138b2f70fee4T21011116010_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left5 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/7ShrbiO5blFkRpBisIbCT1811271509_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left6 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/yS4rMviMybWqfgScidc9PCfxd8T1811272039_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left7 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/bea0bb34-ad80-4d9c-8451-15970511d69bT19010111903_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .left8 {
        background: url(https://kaola-haitao.oss.kaolacdn.com/4e33f8d0-6ff3-4053-a4d2-0f6c487438e7T1908091341_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;
        background-size: 100%;
    }

    .you,
    .you2,
    .you3,
    .you4,
    .you5,
    .you6,
    .you7,
    .you8 {
        float: right;
        position: relative;
        box-sizing: border-box;
        width: 200px;
        height: 300px;
        border-right: 1px dashed #ddd;
        background-size: 100%;
    }

    .you2 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcb*m7dZn2JEQc9kQou8SjhinIyoWqaFsfae4bmVKVPM06ksGnvipnnoL5PVf0geGrpemK0z2f*2eKLsaXykvnbk!/r) no-repeat;
        background-size: 100%;
    }

    .you3 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcblFd7vNUwQCtJV1g2VexxerHm4ncolzmWvbUW3O6tj7SmHx3jLuXjr85ZiWxU55IxmfK7VPmsLirHVugdK6tdY!/r) no-repeat;
        background-size: 100%;
    }

    .you4 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcblFd7vNUwQCtJV1g2VexxcTqfvUhk*KTPgu.lK8Vr4b23KwewpZwlGmg5SUjFWde9TLilIbqUw42AB6mxCqmpY!/r) no-repeat;
        background-size: 100%;
    }

    .you5 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO41n3vSkT7pjNPuHc0LWMXnwtwBlD8GaTBLz6AkAalcK6XLukeea8yd8..pt1oKKqU!/r) no-repeat;
        background-size: 100%;
    }

    .you6 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcbtO.KUgjssdX*8MOza7gBPYihg7PD5yfygCCl0Lx5fFcI5Kj4B3L5veKOzLeYumv1.MQhfsnX1A6oFRtwVIAZ8!/r) no-repeat;
        background-size: 100%;
    }

    .you7 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO4xocr4tWCli2GHdnzwQ5aJ0h4UHBSiunYAJXS9m3NTdVA0ZXdhl6Vc03AQEKXP9tM!/r) no-repeat;
        background-size: 100%;
    }

    .you8 {
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO4TAw4BqXXmZk93M3PiJQIBp7vg5V1LqM0KuydLdQhVGb0QfUFFXAJm0CxT9aiA3Yk!/r) no-repeat;
        background-size: 100%;
    }

    .left .wrap {
        padding: 40px;
    }

    h3 {
        font-size: 26px;
        padding-bottom: 20px;
    }

    .a-wrap {
        background: rgb(224, 87, 23);
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        margin-bottom: 20px;

    }

    .left-wrap a {
        color: rgb(26, 26, 25);
        padding-bottom: 20px;
    }

    .left img {
        position: absolute;
        top: 50px;
        right: 35px;
        width: 40%;
    }

    .right {
        box-sizing: border-box;
        width: 600px;
        height: 350px;
        float: left;
    }

    .container ul li {
        box-sizing: border-box;
        float: left;
        width: 200px;
        height: 150px;
    }

    .container>div>ul li:nth-child(1),
    .container>div>ul li:nth-child(2),
    .container>div>ul li:nth-child(3) {
        border-bottom: 1px dashed #ddd;
    }

    .container>div>ul li:nth-child(1),
    .container>div>ul li:nth-child(2),
    .container>div>ul li:nth-child(4),
    .container>div>ul li:nth-child(5) {
        border-right: 1px dashed #ddd;
    }

    .right-li {
        padding: 20px;
        position: relative;
    }

    .right-li img {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 120px;
        height: 120px;
    }

    .right-li img:hover {
        transform: translateX(-10px);
        transition: all .5s ease;

    }

    .right .a-wrap {
        width: 50px;
        height: 20px;
        line-height: 20px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-bottom: 10px;
    }

    .container p {
        font-size: 15px;
        color: gray;
        text-align: left;
    }

    .container span {
        font-size: 20px;
        color: black;
    }

    ul {
        list-style: none;
        /* 清除小黑圆点 */
        margin: 0;
        padding: 0;
        /* 内边距 */

    }

    #wrap2 {
        width: 60px;
        height: 225px;
        position: sticky;
        position: -webkit-sticky;
        top: 130px;
        z-index: 1000;
        float: left;
        margin-left: 20px;
    }

    #head2 {
        font-weight: bold;
        width: 70px;
        height: 40px;
        background-color: white;
        line-height: 40px;
        /* 行高=高度 垂直居中 */
        font-size: 14px;
        color: #000000;
        /* 文字颜色 白色 */
        text-align: center;
        /* 文本对齐方式 居中 */
        border: 1px solid #e9e9e9;
    }

    #wrap2>ul>li:nth-child(n+2){
        padding: 0px;
        height: 30px;
        width: 70px;
        line-height: 30px;
        border-right: 1px solid #e9e9e9;
        border-left: 1px solid #e9e9e9;

    }

    #list2:hover,#list2:hover a{
        background-color: silver;
        color: #ff0e1d;
    }

    #list2 {
        box-sizing: border-box;
        /* content box css3盒模型 怪异盒 */
        width: 60px;
        padding: 3px;
        margin-top: 0.5px;
        /* 上边距 */
        margin-bottom: 0.5px;
        background-color: white;
        text-align: center;
        font-size: 12px;
        color: #9A9C9E;
    }


    /* 类选择器 */
    .imgbox {

        /* 避免因窗口变化影响图片效果 */
        width: 100%;
        height: 100%;
        margin: 0 auto;
        float: left;
        background-size: 100%;

    }

    .img {
        width: 55%;
        height: 30%;
        margin: 0 auto;
        display: none;
    }
</style>
<script>
    // 固定logo、搜索框、购物车
    $(function () {
        $(window).scroll(function () {
            var t = $(document).scrollTop();
            document.title = t;
            if (t > 80) {
                $('#top').addClass('fixx');
            } else {
                $('#top').removeClass('fixx');
            }
        })
    })
    // 侧方导航栏控制不同div显示
    function show2() {
        document.getElementById("box002").style.display = "block";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show3() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "block";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show4() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "block";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show5() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "block";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show6() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "block";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show7() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "block";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show8() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "block";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show9() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "block";
        document.getElementById("box010").style.display = "none";
    };
    function show10() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "block";
    };
    function hiden2() { document.getElementById("box002").style.display = "none"; };
    function hiden3() { document.getElementById("box003").style.display = "none"; };
    function hiden4() { document.getElementById("box004").style.display = "none"; };
    function hiden5() { document.getElementById("box005").style.display = "none"; };
    function hiden6() { document.getElementById("box006").style.display = "none"; };
    function hiden7() { document.getElementById("box007").style.display = "none"; };
    function hiden8() { document.getElementById("box008").style.display = "none"; };
    function hiden9() { document.getElementById("box009").style.display = "none"; };
    function hiden10() { document.getElementById("box010").style.display = "none"; };
</script>
</script>
</head>

<body>
    <!-- 顶部图片 -->
    <img src="./img/top1.png" style="width: 100%;">
    <!-- 黑色导航栏 -->
    <div class="nav_black">
        <div style="width: 80%; margin: 0 auto;">
            <div style="float: left; width: 30%;">
                <nav id="nav_list" class="nav">
                    <a class="nav-link" href="#">考拉欢迎你！</a>
                    <a class="nav-link" href="login.html">登录</a>
                    <a class="nav-link" href="#">免费注册</a>
                    <a class="nav-link" data-toggle="popover" data-placement="bottom" href="#">手机考拉</a>
                </nav>
            </div>
            <div style="float: right; width: 70%;">
                <ul id="nav_sec" class="nav justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">每日签到</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">我的订单</a>
                    </li>
                    <li id="nav_sec" class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="true" aria-expanded="false">个人中心</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">我的优惠券</a>
                            <a class="dropdown-item" href="#">我的红包</a>
                            <a class="dropdown-item" href="kaolabean.html">我的考拉豆</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">账号管理</a>
                            <a class="dropdown-item" href="#">我的实名认证</a>
                            <a class="dropdown-item" href="shoppingaddress.html">我的收货地址</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">我收藏的商品</a>
                            <a class="dropdown-item" href="#">我关注的品牌</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">售后管理</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="true" aria-expanded="false">客户服务</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">联系客服</a>
                            <a class="dropdown-item" href="#">帮助中心</a>
                            <a class="dropdown-item" href="#">知识产权保护</a>
                            <a class="dropdown-item" href="#">规则中心</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="true" aria-expanded="false">充值中心</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">话费充值</a>
                            <a class="dropdown-item" href="#">游戏充值</a>
                            <a class="dropdown-item" href="#">AppStore充值卡</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="true" aria-expanded="false">消费者权益</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="consumer.html">消费者告知书</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="true" aria-expanded="false">更多</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">收藏本站</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">新浪微博</a>
                            <a class="dropdown-item" href="#">微信公众号</a>
                            <a class="dropdown-item" href="#">招商合作</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">视频内容</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 网易考拉logo、搜索框、购物车按钮 -->
    <div id="top" class="component_thr" style="width: 100%; height: 100px;display: flex;">
        <!-- logo -->
        <div style="text-align: right; position: relative;right: 20px;">
            <img style="height: 100%;" src="./img/wykl_logo.png">
        </div>
        <!-- 搜索框 -->
        <div style="height: 100%;">
            <div id="search" class="input-group mb-3">
                <input type="text" class="form-control" placeholder="面膜" aria-label="面膜"
                    aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button id="btn1" class="btn btn-outline-secondary" type="button" id="button-addon2"><img
                            style="height: 20px;" src="img/top_search.png"></button>
                </div>
            </div>
        </div>
        <!-- 购物车按钮 -->
        <div>
            <button id="btn2" onclick="window.location.href='car.html'"><img style="margin: 10px; height: 20px;"
                    src="img/shop_car1.png">购物车&nbsp;&nbsp;&nbsp;</button>
        </div>
    </div>
    <!-- 二级导航栏 -->
    <div style="margin-top:0px; border-bottom: 1px solid rgb(179, 179, 179);">
        <div style="width: 70%; margin: 0 auto; text-align: left;">
            <div class="dropdown">
                <a class="btn btn-secondary dropdown-toggle" id="dropdown_s" href="#" role="button"
                    id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                    style="position: relative; top: 1px;">
                    <img style="height: 22px; position: relative;bottom: 1px;right: 5px;" src="img/nav01.png">所有分类
                </a>
                <div id="dropdown_menu_sec" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <a onMouseOver="show2()" onMouseOut="hiden2()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav02.png">美容彩妆<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show3()" onMouseOut="hiden3()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav03.png">母婴儿童<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show4()" onMouseOut="hiden4()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav04.png">营养保健<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show5()" onMouseOut="hiden5()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav05.png">数码家电<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show6()" onMouseOut="hiden6()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav06.png">个护家清<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show7()" onMouseOut="hiden7()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav07.png">服饰鞋靴<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show8()" onMouseOut="hiden8()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav08.png">运动户外<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show9()" onMouseOut="hiden9()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav09.png">手表配饰<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                    <a onMouseOver="show10()" onMouseOut="hiden10()" class="dropdown-item" href="#"><img class="act"
                            style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                            src="img/nav10.png">环球美食<img class="act"
                            style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                </div>
                <!-- 浮动盒子 -->
                <div class="box" id="box002" style="display: none;"><img style="height: 100%;" src="img/Snipaste_1.png">
                </div>
                <div class="box" id="box003" style="display: none;"><img style="height: 100%;" src="img/Snipaste_2.png">
                </div>
                <div class="box" id="box004" style="display: none;"><img style="height: 100%;" src="img/Snipaste_3.png">
                </div>
                <div class="box" id="box005" style="display: none;"><img style="height: 100%;" src="img/Snipaste_4.png">
                </div>
                <div class="box" id="box006" style="display: none;"><img style="height: 100%;" src="img/Snipaste_5.png">
                </div>
                <div class="box" id="box007" style="display: none;"><img style="height: 100%;" src="img/Snipaste_6.png">
                </div>
                <div class="box" id="box008" style="display: none;"><img style="height: 100%;" src="img/Snipaste_7.png">
                </div>
                <div class="box" id="box009" style="display: none;"><img style="height: 100%;" src="img/Snipaste_8.png">
                </div>
                <div class="box" id="box010" style="display: none;"><img style="height: 100%;" src="img/Snipaste_9.png">
                </div>
                <nav id="firstpage" class="nav" style="display: inline-block;">
                    <a class="nav-link" href="index.html">首页</a>
                    <a class="nav-link" href="overseas.html">海外直购</a>
                    <a class="nav-link" href="#">考拉海购出品</a>
                    <a class="nav-link" href="#">品牌奶粉</a>
                    <a class="nav-link" href="#">人气面膜</a>
                    <a class="nav-link" href="invest.html">充值</a>
                </nav>
            </div>
        </div>
    </div>
    <!--内容盒子 -->
    <div style=" height: 100%; width: 100%;">
        <!-- 轮播图 -->
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img/carousel_fst.jpg" class="d-block w-100">
                </div>
                <div class="carousel-item">
                    <img src="img/carousel_snd.jpg" class="d-block w-100">
                </div>
                <div class="carousel-item">
                    <img src="img/carousel_trd.png" class="d-block w-100">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!-- 粘性导航栏 -->
        <div class="mid_list">
            <div id="tcbox"></div>
            <div class="wrap" id="wrap2">
                <ul>
                    <li class="head" id="head2">热门品牌</li>
                    <li class="list" id="list2"><a href="#m1" style="text-decoration: none;">运动户外</a></li>
                    <li class="list" id="list2"><a href="#m2" style="text-decoration: none;">美妆专区</a></li>
                    <li class="list" id="list2"><a href="#m3" style="text-decoration: none;">个人家清</a></li>
                    <li class="list" id="list2"><a href="#m4" style="text-decoration: none;">奢品馆</a></li>
                    <li class="list" id="list2"><a href="#m5" style="text-decoration: none;">手表配饰</a></li>
                    <li class="list" id="list2"><a href="#m6" style="text-decoration: none;">美食生鲜</a></li>
                    <li class="list" id="list2"><a href="#m7" style="text-decoration: none;">服饰鞋靴</a></li>
                    <li class="list" id="list2" style="border-bottom: 1px solid #e9e9e9;"><a href="#m8" style="text-decoration: none;">家居生活</a></li>
                </ul>
            </div>
            <!-- 内容列表 -->
            <div class="container" id="m1" style="background: #ffffff;">
                <p><span><b>运动户外</b></span> 热搜词：阿迪达斯 耐克 斯凯奇 安德玛</p>
                <div class="left">
                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>

                            <img src="img/goods/1.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/1.2.png" />
                        </li>

                        <div class="you">
                            <hr id="hr1" />
                            <!-- 建立一个div控件作为图片框 -->
                            <div class="imgBox">
                                <img class="img-slide img"
                                    src="http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcdEXtzbKpj4AdNLGmU*f*6ZSutB1z8Jmh.UiXbLDK8.qB8GI36ngabGuSKnLorhSPwlQXPTMHjCXx*ptmbXZVMw!/r"
                                    alt="img1">
                                <img class="img-slide img"
                                    src="http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcfg076q2uQHTTqCx2quzUnF78k44140odn.Qswl2OM4QSFUfHCiENM0gpk1q3Az6hHrvz6ptAv3oBH6Z0uAEmSM!/r"
                                    alt="img1">
                                <img class="img-slide img"
                                    src="http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcdEXtzbKpj4AdNLGmU*f*6Yq6VpT5v9kb*FFmF3vtJZ*HY7YaU3mMjiLr3mLePsdnbD11g6oR7Lyp7WP5QtJ0og!/r"
                                    alt="img1">
                            </div>
                        </div>

                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/1.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/1.4.png" />
                        </li>

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


            <div class="container" id="m2" style="background: #ffffff;">
                <p><span><b>美妆专区</b></span> 热搜词：面膜 口红 眼霜 精华 面霜</p>
                <div class="left2">

                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/2.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/2.2.png" />
                        </li>

                        <div class="you2">

                        </div>

                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/2.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/2.4.png" />
                        </li>
                    </ul>
                </div>
            </div>


            <div class="container" id="m3" style="background: #ffffff;">
                <p><span><b>个人家清</b></span> 热搜词：秀发滋养 沐浴清洁 细嫩护手 口腔清新 纸品湿巾</p>
                <div class="left3">
                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/3.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/3.2.png" />
                        </li>

                        <div class="you3">
                        </div>

                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/3.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/3.4.png" />
                        </li>
                    </ul>
                </div>
            </div>


            <div class="container" id="m4" style="background: #ffffff;">
                <p><span><b>奢品馆</b></span> 热搜词： GUCCI COACH ML Burberry PRADA FENDI LV DIOR</p>
                <div class="left4">

                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/4.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/4.2.png" />
                        </li>

                        <div class="you4">
                        </div>
                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/4.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/4.4.png" />
                        </li>
                    </ul>
                </div>
            </div>


            <div class="container" id="m5" style="background: #ffffff;">
                <p><span><b>手表配饰</b></span> 热搜词： DW 施华洛世奇 天梭 浪琴 潘多拉 周大福 APM</p>
                <div class="left5">

                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/5.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/5.2.png" />
                        </li>

                        <div class="you4">

                        </div>
                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/5.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/5.4.png" />
                        </li>
                    </ul>
                </div>
            </div>


            <div class="container" id="m6" style="background: #ffffff;">
                <p><span><b>美食生鲜</b></span> 热搜词： 巧克力 奶粉 麦片 红酒 零食</p>
                <div class="left6">

                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/6.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/6.2.png" />
                        </li>

                        <div class="you5">
                        </div>
                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/6.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/6.4.png" />
                        </li>
                    </ul>
                </div>
            </div>


            <div class="container" id="m7" style="background: #ffffff;">
                <p><span><b>服饰鞋靴</b></span> 热搜词： CK TOMMY 阿玛尼 Champion MO&Co</p>
                <div class="left7">

                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/7.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/7.2.png" />
                        </li>

                        <div class="you7">
                        </div>
                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/7.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/7.4.png" />
                        </li>
                    </ul>
                </div>
            </div>


            <div class="container" id="m8" style="background: #ffffff;">
                <p><span><b>家具生活</b></span> 热搜词：碧然德 FUMAKILLA 蕉下</p>
                <div class="left8">

                </div>
                <div class="right">
                    <ul>
                        <li class="right-li">
                            <h3>1</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/8.1.png" />
                        </li>
                        <li class="right-li">
                            <h3>2</h3>
                            <div class="a-wrap">
                                <a href="">3</a>
                            </div>
                            <img src="img/goods/8.2.png" />
                        </li>

                        <div class="you8">
                        </div>
                        <li class="right-li">
                            <h3>3</h3>
                            <div class="a-wrap">
                                <a href="">4</a>
                            </div>
                            <img src="img/goods/8.3.png" />
                        </li>
                        <li class="right-li">
                            <h3>4</h3>
                            <div class="a-wrap">
                                <a href="">5</a>
                            </div>
                            <img src="img/goods/8.4.png" />
                        </li>
                    </ul>
                </div>
            </div>
            <div id="tcbox"></div>
        </div>
    </div>
    </div>
    <div class="car_bottom">
        <!--底部导航-->
        <div class="bottom_nav" id="te">
            <div>
                <img class="bottom_img" src="img/car/bottom_nav.png">
            </div>
            <div class="bottom_text">
                <ul class="clearfix">
                    <li class="first">
                        <img class="bottom_kaola" src="img/car/kaola.png">
                        <div class="focuson">
                            <span class="label">关注我们</span>
                            <img class="weibo" src="img/car/weibo.png">
                            <img class="wechat" src="img/car/wechat.png">
                        </div>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <em>
                                    考拉保障
                                </em>
                            </dt>
                            <dd>假一赔十</dd>
                            <dd>廉正举报</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <em>
                                    新手指南
                                </em>
                            </dt>
                            <dd>购物流程</dd>
                            <dd>支付方式</dd>
                            <dd>通关税费</dd>
                            <dd>常见问题</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <em>
                                    售后服务
                                </em>
                            </dt>
                            <dd>售后政策</dd>
                            <dd>退货流程</dd>
                            <dd>特色服务</dd>
                            <dd>联系客服</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <em>
                                    物流配送
                                </em>
                            </dt>
                            <dd>配送方式</dd>
                            <dd>配送服务</dd>
                            <dd>运费标准</dd>
                            <dd>物流跟踪</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <em>
                                    商家服务
                                </em>
                            </dt>
                            <dd>招商合作</dd>
                            <dd>销售联盟</dd>
                            <dd>商家成长</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <em>
                                    关于我们
                                </em>
                            </dt>
                            <dd>联系我们</dd>
                            <dd>CEO邮箱</dd>
                        </dl>
                    </li>
                    <li class="last">
                        <img src="img/car/QRcode.png">
                        <span class="download">扫描下载手机版</span>
                    </li>
                </ul>
            </div>
        </div>
        </link>

        <!-- 底部 -->
        <div class="foot">
            <div id="scrif">
                <span class="remark">增值电信业务经营许可证：浙B2-20160288</span>
                <span class="remark">（浙）网械平台备字[2018]第00007号</span>
                <span class="remark">阿里巴巴版权所有C2003-2021</span>
                <a style="margin-left: 20px;" href="https://you.kaola.com/common/page.html?key=Privacy_policy"
                    rel="nofollow" target="_blank" title="隐私政策" _pi="1">隐私政策</a>
                <span class="sep">- </span>
                <a href="https://www.kaola.com/" target="_blank" title="考拉海购" data-param="zn=footer">考拉海购</a>
                <br>
                <span class="remark">网络文化经营许可证：浙网文（2020）4340-180号</span>
                <span class="remark">浙江省网络食品销售第三方平台提供者备案：浙网食A33010006</span>
                <a target="_blank"
                    href="https://kaola-haitao.oss.kaolacdn.com/6df8bb71-a013-41d4-8491-548215da176d.png">
                    <span style="margin: 0px 0px 0px 20px;">网络第三方平台规范进口冷链食品承诺函</span>
                </a>
                <br>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010802002216&no_protofix"><img
                        src="./img/bottom_photo/警徽.png" id="police"></a>
                <a target="_blank"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010802002216&amp;no_protofix"><span
                        style="margin: 0px 0px 0px 5px;">
                        浙公网安备 33010802002216号</span>
                </a>
                <a href="javascript:void(0);" style="text-decoration: none; cursor: auto;">
                    <span style="margin: 0px 0px 0px 20px;">互联网药品信息服务资格证书编号（浙）-2017-0027</span>
                </a>
                <a target="_blank" href="http://beian.miit.gov.cn">
                    <span style="margin: 0px 0px 0px 20px;">浙ICP备16011229号-6</span>
                </a>
                <span class="remark">
                    <a href="//pages.kaola.com/pages/activity/Businessentity.shtml" rel="nofollow" target="_blank"
                        title="自营经营者信息">自营经营者信息</a>
                </span>
                <div class="bottombarest">
                    <img src="./img./bottom_photo/可信网站.png" alt="可信网站" _pi="1">
                    <img src="./img/bottom_photo/电子营业执照.png">
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var index = 0, len;
        // 类似获取一个元素数组
        var imgBox = document.getElementsByClassName("img-slide");
        len = imgBox.length;
        imgBox[index].style.display = 'block';
        // 逻辑控制函数
        function slideShow() {
            index++;
            // 防止数组溢出
            if (index >= len) index = 0;
            // 遍历每一个元素
            for (var i = 0; i < len; i++) {
                imgBox[i].style.display = 'none';
            }
            // 每次只有一张图片显示
            imgBox[index].style.display = 'block';
        }
        // 定时器，间隔2s切换图片
        setInterval(slideShow, 2000);
    </script>
</body>

</html>