小米官网汇总

2 篇文章 0 订阅

<!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://at.alicdn.com/t/c/font_3584573_9iel9pizxxa.css"> -->

    <title>小米官网</title>

    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3584573_4t82wup9lwk.css">

    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">

    <script src="./swiper/swiper-bundle.min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3584573_242krmuqh3s.css">

    <style>

        * {

            padding: 0;

            margin: 0;

            text-decoration: none;

            list-style: none;

        }

        nav {

            width: 100%;

            height: 40px;

            background-color: #333333;

        }

        .zhongjian {

            margin: 0px auto;

            width: 1226px;

            height: 40px;

        }

        .zhongjian>.s1>li {

            float: left;

            font-size: 12px;

            padding: 0px 3px;

        }

        .zhongjian>.s1 {

            width: 794.13px;

            text-align: center;

            line-height: 40px;

            background-color: red;

        }

        .s2 {

            text-align: center;

            line-height: 40px;

            position: relative;

            left: 155px;

        }

        .s2>li {

            float: left;

            padding: 0px 3px;

            font-size: 12px;

        }

        .s3 {

            width: 120px;

            height: 40px;

            text-align: center;

            line-height: 40px;

            background-color: #424242;

            float: left;

            margin-left: 186px;

        }

        .s3>span {

            font-size: 12px;

        }

        .s8:hover {

            color: orange;

            background-color: white;

        }

        .zhongjian a {

            color: #B0B0B0;

        }

        .zhongjian a:hover {

            color: white;

        }

        .zhongjian li:nth-of-type(2n) {

            color: #424242;

        }

        .s6 {

            width: 330px;

            /* height: 110px; */

            height: 0px;

            border-left: 3px solid #f5f2f2;

            border-right: 3px solid #f5f2f2;

            border-bottom: 3px solid #f5f2f2;

            /* box-shadow: 0px 3px 9px rgba(#333333); */

            margin-left: -210px;

            line-height: 150px;

            overflow: hidden;

            text-align: center;

            line-height: 110px;

            transition: all 0.6s;

            position: relative;

            z-index: 12000;

            background-color: white;

        }

        .s3:hover>.s6 {

            height: 110px;

        }

        .a1 {

            width: 45.95px;

            height: 40px;

        }

        #s5 {

            width: 0px;

            height: 0px;

            border: 8px solid white;

            border-color: transparent transparent white;

            margin-left: 17px;

            margin-top: -15px;

            display: none;

            position: relative;

            z-index: 9999;

        }

        .a1:hover>#s5 {

            display: block;

        }

        .s7 {

            width: 120px;

            height: 0px;

            box-shadow: 0px 0px 4px rgba(167, 167, 167, 0.5);

            background-color: white;

            /* display: none; */

            margin-left: -35px;

            overflow: hidden;

            transition: all 0.6s;

            position: relative;

            z-index: 9999;

        }

        .a1:hover>.s7 {

            /* display: block; */

            height: 140px;

            position: relative;

            z-index: 12000;

        }

        .s7>span {

            position: relative;

            font-size: 15px;

            bottom: 20px;

        }

        /* .search{

            border: 1px solid black;

        }  */

        /* .search>input:focus{

            outline: none;

        } */

        #a1 {

            width: 100%;

            height: 100px;

            position: relative;

            z-index: 9999;

        }

        #a2 {

            float: left;

            line-height: 100px;

        }

        #a3 {

            float: left;

            text-align: center;

            line-height: 100px;

            margin-left: 174px;

        }

        #a3>li {

            float: left;

            height: 17.6;

            font-size: 16px;

            padding-left: 9px;

            padding-right: 9px;

        }

        #a3 a {

            color: #333333;

        }

        #a3 a:hover {

            color: #FF7FA5;

        }

        a.icon-icon-xiaomiguishu {

            font-size: 56px;

            color: #FF6A00;

        }

        #a4 {

            line-height: 100px;

            float: right;

            padding-left: 20px;

        }

        #a4:hover>#a6 {

            border: 1px solid #B0B0B0;

        }

        #a4:hover>.icon-sousuo {

            border-top: 1px solid #B0B0B0;

            border-right: 1px solid #B0B0B0;

            border-bottom: 1px solid #B0B0B0;

        }

        #a4:active>#a6 {

            border: 1px solid red;

        }

        #a4:active>.icon-sousuo {

            border-top: 1px solid red;

            border-right: 1px solid red;

            border-bottom: 1px solid red;

        }

       

        #a4>input {

            border: 1px solid #E0E0E0;

            outline: none;

        }

        #a4>span {

            font-size: 26.5px;

            width: 52px;

            height: 49px;

            padding: 12px;

            border-top: 1px solid #E0E0E0;

            border-right: 1px solid #E0E0E0;

            border-bottom: 1px solid #E0E0E0;

            box-sizing: border-box;

            position: relative;

            bottom: 0.5px;

        }

        #a4>span:hover {

            background-color: #FF6700;

        }

        #a5 {

            width: 1226px;

            height: 100px;

            margin: 0px auto;

        }

        #a6 {

            width: 245px;

            line-height: 50px;

            position: relative;

            bottom: 6px;

            left: 5px;

        }

        #a4:hover>#o1 {

            border-right: 1px solid red;

            border-bottom: 1px solid red;

            border-left: 1px solid red;

        }

        #o1 {

            background-color: white;

            margin-top: -28px;

            margin-left: 5px;

            width: 243px;

            /* border: 1px solid black; */

            display: none;

        }

        #a4:active>#o1 {

            display: block;

        }

        #o1>p {

            line-height: 40px;

            margin-left: 10px;

            font-size: 13px;

        }

        #o1>p>a {

            color: #333333;

        }

        .c1 {

            width: 100%;

            height: 150px;

            border-top: 1px solid #E0E0E0;

            box-shadow: 0px 2px 3px #DADADA;

            background-color: white;

            position: absolute;

            /* position: relative; */

            left: 0;

            /* overflow: hidden;

            transition: all 0.6s; */

            display: none;

            z-index: 11;

        }

        .c2:hover>.c1 {

            display: block;


 

        }

        .d1 {

            width: 1226px;

            height: 500px;

            margin: 0px auto;

             

        }

        .d2 {

            width: 234px;

            height: 500px;

            background-color: rgba(165, 163, 163, .3);

            position: relative;

         

            z-index: 4;


 

        }

     

        .d3>li {

            line-height: 42px;

            /* overflow: hidden; */

            font-size: 16px;

            padding-left: 25px;

            height: 42;

        }

        .d3>li:hover {

            background-color: #FF6700;

        }

        .d3>li>a {

            color: white;

        }

        .d3 div {

            width: 992px;

            height: 498px;

            /* background-color: #FF6700; */

            border: 1px solid gray;

            background-color: white;

            box-shadow: 0px 0px 5px grey;

            position: absolute;

            display: none;

            left: 234px;

            z-index: 6px;

            bottom: 0px;

        }

        .d3:hover div {

            display: block;

        }

        .d4 {

            margin-top: 15px;

            padding-top: 20px;

        }

        span.icon-right {

            float: right;

            color: white;

            font-size: 40px;

        }

        .swiper {

            width: 1226px !important;

            height: 500px;

            overflow: hidden;

            /* display: none; */

            position: relative;

           

            /* left: 234px; */

            bottom: 500px;

            padding-right: -50px;

            z-index: 2;

        }

        .swiper-slide>img {

            position: relative;

            z-index: 10;

        }

        .j1 {

            width: 100%;

            /* height: 170px; */

            margin: 0px auto;

            background-color: rgb(19, 18, 17);

        }

        .e1 {

            width: 234px;

            height: 170px;

            padding: 3px;

            box-sizing: border-box;

            background-color: #5f5750;

            float: left;

        }

        .e2 {

            width: 1226px;

            margin: 20px auto;

        }

        .e1 li {

            float: left;

            width: 76px;

            height: 82px;

            position: relative;

            box-sizing: border-box;

            left: 14px;

        }

        .e1 img {

            display: block;

            font-size: 22px;

            margin-bottom: 4px;

            padding: 13px;

        }

        .e1 a {

            color: #fff;

            font-size: 12px;

            opacity: .7;

            display: block;

        }

        .e1 a:hover {

            opacity: 1;

        }

        .f1::after {

            position: absolute;

            content: "";

            bottom: 0;

            left: -5px;

            height: 1px;

            width: 64px;

            background-color: #797876;

        }

        .f2::before {

            position: absolute;

            top: 6px;

            right: 10px;

            content: "";

            width: 1px;

            height: 70px;

            background-color: #797876;

        }

        .g1>li {

            float: left;

        }

        .g2 {

            margin-left: 12px;

        }

        .g3 {

            margin-left: 10px;

            margin-right: 10px;

        }

        .g1 img:hover {

            box-shadow: 0px 3px 5px gray;

            transition: all 0.6s;

        }

        .swiper-button-prev {

            margin-left: 224px;

            color: #D9D9D7;

            width: 40px;

            height: 60px;

            /* background-color: #7F7F7F; */

            /* display: none; */

        }

        .swiper-button-next {

            color: #D9D9D7;

            width: 40px;

            height: 60px;

            /* background-color: #7F7F7F; */

        }

        /* .swiper-button-prev:hover{

            display: block;

        } */

        .swiper-button-next:hover {

            background-color: #333333;

        }

        .swiper-button-prev:hover {

            background-color: #333333;

        }

        #p1 * {

            width: 12px;

            height: 12px;

            border: 3px solid #807e7e;

            background-color: #bdb9b9;

            position: relative;

            left: 520px;

            bottom: 20px;

            box-sizing: border-box;

        }

        #p1 *:hover{

            border: 3px solid  #807e7e;

            background-color: #bdb9b9;

        }

        .m1 {

            position: fixed;

            bottom: 100px;

            right: 0;

        }

        .m1>li {

            width: 70px;

            line-height: 40px;

            border: 1px solid rgb(190, 187, 187);

        }

        .m1>li>a>span {

            position: relative;

            top: 10px;

            left: 17px;

            font-size: 40px;

            color: #999999;

        }

        .m1>li>a>.p1 {

            position: relative;

            left: 10px;

        }

        .m1>li>a>p {

            color: #999999;

        }

        .m1 a:hover {

            color: #FF6700;

        }

        .m1 a:hover>span {

            color: #FF6700;

        }

        .m1 a:hover>p {

            color: #FF6700;

        }

     

    </style>

</head>

<body>

    <header>

        <nav>

            <div class="zhongjian">

                <ul class="s1">

                    <li>

                        <a href="#">小米官网</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#"> 小米商城</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">MIUI</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">IoT</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">云服务</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">天星科技</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">有品</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">小爱开放平台</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">企业团购</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">资质证照</a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">协议规则</a>

                    </li>

                    <li>|</li>

                    <li class="a1">

                        <a href="#">下载app</a>

                        <div id="s5"></div>

                        <div class="s7">

                            <img src="./图片/download.png" alt="" height="100px"><br>

                            <span>小米商城app</span>

                        </div>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">Select Location</a>

                    </li>

                </ul>

                <ul class="s2">

                    <li>

                        <a href="#">

                            登录

                        </a>

                    </li>

                    <li>|</li>

                    <li>

                        <a href="#">

                            注册

                        </a>

                    </li>

                    <li>|</li>

                    <li class=>

                        <a href="#">

                            消息通知

                        </a>

                    </li>

                </ul>

                <div class="s3">

                    <div class="s8">

                        <span class="iconfont icon-gouwuchekong"></span>

                        <span>购物车 (0)</span>

                    </div>

                    <div class="s6">

                        <span>

                            购物车还没有商品,赶快选购吧!

                        </span>

                    </div>

                </div>

            </div>

        </nav>


 

        <div id="a1">

            <div id="a5">

                <div id="a2">

                    <a href="#" class="iconfont icon-icon-xiaomiguishu"></a>

                </div>

                <ul id="a3">

                    <li class="c2">

                        <a href="#">Xiaomi手机</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li class="c2">

                        <a href="#">Redmi手机</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li class="c2">

                        <a href="#">电视</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li class="c2">

                        <a href="#">笔记本</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li class="c2">

                        <a href="#">平板</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li class="c2">

                        <a href="#">家电</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li class="c2">

                        <a href="#">路由器</a>

                        <div class="c1">

                        </div>

                    </li>

                    <li>

                        <a href="#">服务中心</a>

                    </li>

                    <li>

                        <a href="#">社区</a>

                    </li>

                </ul>

                <div class="search" id="a4">

                    <input type="text" placeholder="点击搜索" id="a6">

                    <span class="iconfont icon-sousuo"></span>

                    <div id="o1">

                        <p><a href="#">小米</a></p>

                        <p><a href="#">华为</a></p>

                        <p><a href="#">苹果</a></p>

                        <p><a href="#">vivo</a></p>

                        <p><a href="#">oppo</a></p>

                    </div>

                </div>

            </div>

        </div>

    </header>

    <main class="d1">


 

        <div class="d2">

            <ul class="d3">

                <li class="d4">

                    <a href="#">手机</a>

                    <span class="iconfont icon-right"></span>

                    <div></div>

                </li>

                <li>

                    <a href="#">电视</a>

                    <span class="iconfont icon-right"></span>

                    <div></div>

                </li>

                <li>

                    <a href="#">笔记本 平板</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">出行 穿戴</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">耳机 音响</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">家电</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">智能 路由器</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">电源 配件</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">健康 儿童</a>

                    <span class="iconfont icon-right"></span>

                </li>

                <li>

                    <a href="#">生活 箱包</a>

                    <span class="iconfont icon-right"></span>

                </li>

            </ul>

        </div>

        <div class="swiper">

            <div class="swiper-wrapper">

                <div class="swiper-slide">

                    <img src="./图片/cbe159245d840285e98a4ba213eecba2.webp" alt="">

                </div>

                <div class="swiper-slide">

                    <img src="./图片/d5bcaeb5b2c0d8853a1f26036951364c.webp" alt="">

                </div>

                <div class="swiper-slide">

                    <img src="./图片/d20d536690f6de775aefb113812122b3.webp" alt="">

                </div>

                <div class="swiper-slide">

                    <img src="./图片/71139db54251442981e61cb1064152fc.jpg" alt="" height="540px">

                </div>

            </div>

            <!-- 如果需要分页器 -->

            <div class="swiper-pagination" id="p1"></div>

            <!-- 如果需要导航按钮 -->

            <div class="swiper-button-prev"></div>


 

            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->

            <!-- <div class="swiper-scrollbar"></div> -->

        </div>

        <script language="javascript">

            var mySwiper = new Swiper('.swiper', {

 autoplay: {

    delay: 3000,

    stopOnLastSlide: false,

    disableOnInteraction: true,

    },

                pagination: {

                    el: '.swiper-pagination',

                    clickable: true,

                    clickableClass: 'my-pagination-clickable',

                },

                loop: true, // 循环模式选项

                navigation: {

                    nextEl: '.swiper-button-next',

                    prevEl: '.swiper-button-prev',

                },

                effect: 'fade',

                pagination: {

                    el: '.swiper-pagination',

                    clickable: true,

                }

            })

            // 鼠标滑过pagination控制swiper切换

            // for(i=0;i<mySwiper.pagination.bullets.length;i++){

            //   mySwiper.pagination.bullets[i].οnmοuseοver=function(){

            //     this.click();

            //   };

            // }


 

            //如果你在swiper初始化后才决定使用clickable,可以这样设置

            mySwiper.params.pagination.clickable = true;

            //此外还需要重新初始化pagination

            mySwiper.pagination.destroy()

            mySwiper.pagination.init()

            mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');

        </script>



 

    </main>

    <div class="j1">

        <div class="e2">

            <div class="e1">

                <ul>

                    <li class="f1 f2">

                        <a href="#">

                            <img src="./图片/82abdba456e8caaea5848a0cddce03db.png" alt="" height="24px">

                            <p>保障服务</p>

                        </a>

                    </li>

                    <li class="f1 f2">

                        <a href="#">

                            <img src="./图片/806f2dfb2d27978e33fe3815d3851fa3.png" alt="" height="24px">

                            <p>企业团购</p>

                        </a>

                    </li>

                    <li class="f1">

                        <a href="#">

                            <img src="./图片/eded6fa3b897a058163e2485532c4f10.png" alt="" height="24px">

                            <p>F码通道</p>

                        </a>

                    </li>

                    <li class="f2">

                        <a href="#">

                            <img src="./图片/43a3195efa6a3cc7662efed8e7abe8bf.png" alt="" height="24px">

                            <p>米粉卡</p>

                        </a>

                    </li>

                    <li class="f2">

                        <a href="#">

                            <img src="./图片/f4846bca6010a0deb9f85464409862af.png" alt="" height="24px">

                            <p>以旧换新</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./图片/9a76d7636b08e0988efb4fc384ae497b.png" alt="" height="24px">

                            <p>花费充值</p>

                        </a>

                    </li>

                </ul>

            </div>

            <ul class="g1">

                <li class="g2">

                    <img src="./图片/32a62196b9af47752c96e7a50c86417c.jpg" alt="" width="320px" height="170px">

                </li>

                <li class="g3">

                    <img src="./图片/5668146e20fc025caa756a0f8a3c7da4.jpg" alt="" width="320px" height="170px">

                </li>

                <li class="g4">

                    <img src="./图片/28c13d0d11b38ec17fa5d83bc6ba5912.jpg" alt="" width="320px" height="170px">

                </li>

            </ul>

        </div>

   </div>

    <ul class="m1">

        <li>

            <a href="#">

                <span class="iconfont icon-shouji"></span>

                <p>手机app</p>

            </a>

        </li>

        <li>

            <a href="#">

                <span class="iconfont icon-icon03"></span>

                <p>个人中心</p>

            </a>

        </li>

        <li>

            <a href="#">

                <span class="iconfont icon-banshou"></span>

                <p>售后服务</p>

            </a>

        </li>

        <li>

            <a href="#">

                <span class="iconfont icon-kefu"></span>

                <p>人工客服</p>


 

            </a>

        </li>

        <li>

            <a href="#">

                <span class="icon-gouwuche"></span>

                <p class="p1">购物车</p>


 

            </a>

        </li>

    </ul>

   

   

</body>

</html>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

get棒棒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值