小米商城前端页面（静态）|电子爱好者

admin管理员组
文章数量:1530517

效果图

页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>小爱同学</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="icon/cart/iconfont.css">
    <link rel="icon" href="https://s01.mifile/favicon.ico">
    <link rel="stylesheet" href="icon/font-awesome-4.7.0/css/font-awesome.css" >
   <link rel="stylesheet " href="layui/css/layui.css" media="all">
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="content">
        <div class="left">
            <ul>
                <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="down"><a href="#">下载app
                <div class="down_list">
                    <img src="https://i1.mifile/f/i/17/appdownload/download.png" style="width: 90px;height: 90px"/>
                </div>
                </a></li>
                <li>|</li>
                <li><a href="#">智能生活</a></li>
                <li>|</li>
                <li><a href="#">Select Location</a></li>
                <li>|</li>
            </ul>
        </div>
        <div class="right">
            <div class="login">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li>|</li>
                    <li><a href="#">注册</a></li>
                    <li>|</li>
                    <li><a href="#">消息通知</a></li>
                </ul>
            </div>
            <div class="cart">
                <i class="iconfont icon-V" aria-hidden="true"></i>
                <span><a href="#" style="color: #b2b2b2;">购物车</a></span>

                <div class="cart_list">
                    购物车还没有商品唉，快快挑选吧！
                </div>
            </div>
        </div>
    </div>
</div>
<!--中间导航条开始-->
<div class="nav">
    <div class="logo">
        <img src="https://s02.mifile/assets/static/image/logo-mi2.png"
        style="width: 56px;height: 56px">
    </div>
    <div class="nav_list">
        <ul>
            <li ><a href="#" >小米手机</a>
                <ul class="nav2">
                    <li><a href="#">
                        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/85e44ea2405ff8414148bbde7446b137.png">
                        <p class="p1">MIX FOLD小米折叠屏手机</p>
                        <p>9999元</p>
                    </a> </li>
                    <li><a href="#">
                        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/85e44ea2405ff8414148bbde7446b137.png">
                        <p class="p1">MIX FOLD小米折叠屏手机</p>
                        <p>9999元</p>
                    </a> </li>
                    <li><a href="#">
                        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/85e44ea2405ff8414148bbde7446b137.png">
                        <p class="p1">MIX FOLD小米折叠屏手机</p>
                        <p>9999元</p>
                    </a> </li>
                    <li><a href="#">
                        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/85e44ea2405ff8414148bbde7446b137.png">
                        <p class="p1">MIX FOLD小米折叠屏手机</p>
                        <p>9999元</p>
                    </a> </li>
                    <li><a href="#">
                        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/85e44ea2405ff8414148bbde7446b137.png">
                        <p class="p1">MIX FOLD小米折叠屏手机</p>
                        <p>9999元</p>
                    </a> </li>
                    <li><a href="#">
                        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/85e44ea2405ff8414148bbde7446b137.png">
                        <p class="p1">MIX FOLD小米折叠屏手机</p>
                        <p>9999元</p>
                    </a> </li>
                </ul>
            </li>
            <li><a href="#">Redmi 红米</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="search">
        <input type="text" placeholder="iqoo游戏手机"/>
        <i class="fa fa-search" aria-hidden="true"></i>
    </div>
</div>
<!--轮播图开始-->
<div class="banners">
    <div class="banner_list">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div>
                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/1c3e97686468231f3f78048d7f2b7fdc.jpg" >
                </div>
                <div><img src="https://cdnbj1.fds.api.mi-img/mi-mall/793eebbee1dd569fe56a8aaf58f62452.jpg"></div>
                <div><img src="https://cdnbj1.fds.api.mi-img/mi-mall/5e896d87c53a449509c14701673098bb.jpg"></div>
            </div>
        </div>
    </div>
    <!--<div class="banner_list">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/793eebbee1dd569fe56a8aaf58f62452.jpg"/>
    </div>-->
    <div class="classify">
        <ul>
            <li>
                <a href="#">手机 电话卡 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                    <div class="banner1">
                        <!--<div class="list1">
                            <ul>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                            </ul>
                        </div>
                        <div class="list1">
                            <ul>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                                <li><a href="#">
                                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                                </a> </li>
                            </ul>
                        </div>-->
                      <ul>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                            <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                        </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                            <li><a href="#">
                                <img src="https://cdnbj1.fds.api.mi-img/mi-mall/ab345272bf9894bb8269d4901344b068.png">小米MIX
                            </a> </li>
                        </ul>
                    </div>
            </li>
            <li>
                <a href="#">电视 盒子 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#"> 笔记本 显示器 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">家电 插线板 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">出行 穿戴 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">智能 路由器 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">电源 配件 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">健康 儿童 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">耳机 音响 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href="#">生活 箱包 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
        </ul>
    </div>
</div>
<!--ad开始-->
<div class="ad">
    <div class="ad_left">
        <p>
            <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i><br>话费充值</a>
            <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i><br>话费充值</a>
            <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i><br>话费充值</a>
        </p>
        <p>
            <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i><br>话费充值</a>
            <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i><br>话费充值</a>
            <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i><br>话费充值</a>
        </p>
    </div>
    <div class="ad_right">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/5d4298059889417157e8492750328492.jpg">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/5d4298059889417157e8492750328492.jpg">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/5d4298059889417157e8492750328492.jpg">
    </div>
</div>
<!--Note9开始-->
<div class="note9">
    <div class="content">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/431e5fd6bfd1b67d096928248be18303.jpg">

        <div class="middle">
            <h1>手机</h1>
            <h2>查看更多<i class="fa fa-angle-right" aria-hidden="true"></i></h2>
        </div>
        <div class="list">
            <div class="left">
                <a href="#">
                    <img src="https://cdnbj1.fds.api.mi-img/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg">
                </a>
            </div>
<div class="right">
    <P> <ul>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
</ul></P>
    <P class="pl2"> <ul>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
    <li><a href="#">
        <img src="https://cdnbj1.fds.api.mi-img/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg">
        <div class="memo">
            <p class="p1">Note 10 pro</p>
            <p class="p2">年度旗舰芯</p>
            <p class="p3">9999元起</p>
        </div>
    </a></li>
</ul></P>
</div>
        </div>
    </div>
</div>
<!--底部开始-->
<div class="foot">
<h2>小爱同学出品</h2>
</div>
<script src="layui/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height:'460px'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,autoplay:true
        });
    });
</script>
</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: 12px;
}
/*头部样式开始*/
.header{
    width: 100%;
    height: 40px;
    background-color: #333;
}
.header .content{
    margin: 0 auto;
    height: 40px;
    width: 1226px;
}
.header ul li{
  display: inline-block;
    margin-right: 3px;
}
 .header ul li a {
    color: #b2b2b2;
    line-height: 40px;
}
 .header ul li a:hover{
    color: white;
}
.header .left{
    float: left;
}
.header .right{
    float: right;
}
.header .right .login{
    float: left;
}
.header .cart{
    float: right;
    width:120px;
    background-color: #424242;
    color: #b0b0b0;
    position: relative;
}
.header .cart:hover{
    background-color: #fff;
    color: orange;
}
.header .cart:hover a{
    color: orange;
}
.cart a{
    color: #b2b2b2;
    line-height: 40px;
}

.cart_list{
    background-color: #fff;
    height: 100px;
    width: 300px;
    top:40px;
    position: absolute;
    right: 0;
    display: none;
    box-shadow: #b0b0b0 0 0 5px;
 }
.cart:hover .cart_list{
    display: block;
    z-index: 12;
}
.down{
    position: relative;
}
.down_list{
    display: none;
    position: absolute;
    box-shadow: #b0b0b0 0 0 5px;
    left: -25px;

}
.down:hover .down_list{
    display: block;
}
/*中间导航栏样式*/
.nav{
    width: 1226px;
    height: 100px;
    line-height: 100px;
    margin:  0 auto;
}
.logo{
    float: left;
    width: 234px;
    margin-top: 4px;
}
.nav_list{
    float: left;
    height: 100px;
}
.search{
    float: right;
    height: 100px;
}
.nav_list ul li{
    display: inline-block;
}
.nav_list ul li a{
    font-size: 16px;
    color: black;
}
.nav_list ul li a:hover{
    color: red;
}
.search input{
    border: 1px solid #e0e0e0;
    width: 245px;
    height: 50px;
    outline: none;
}
.search input:focus{
    border: 1px solid orange;
}
.search input:focus+i{
    border: 1px solid orange;
}
.search i{
    border: 1px solid #e0e0e0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    position: relative;
    top: 2px;
    margin-left: -4px;
}
/*导航栏*/
.nav2{
    font-size: 0;
    display: none;
    background-color: #fff;
    box-shadow: #b0b0b0 0 0 5px;
    width: 1226px;
    height: 200px;
    position: absolute;
    left: -234px;
}
.nav2 li{
    width: 204px;
    float: left;
    display: block;
    list-style-type: none;
    text-align: center;
   
}
.nav2 li img{
    width: 160px;
    height: 110px;
    display: block;
    margin-top: 30px;
    margin-bottom: 0;
}
.nav_list ul li:hover .nav2{
  display: block;
    z-index: 15;
}
.nav2 .p1{
    margin-top: -17px;
    height: 20px;
}
/*轮播图*/
.banners{
    width: 1226px;
    height: 460px;
    position: relative;
    margin: 0 auto;

}
.banner1{
    width: 993px;
    height: 460px;
    border: 1px solid red;
    display: none;
    position: absolute;
    margin-left: 203px;
    margin-top: -59px;
    z-index: 11;
    background-color: #fff;
}

.banner1 ul li{
    width: 120px;
    position: relative;
    display: inline-block;
    margin-top:20px;
    margin-left: 30px;
    margin-bottom: 20px;
}
 .classify .banner1  ul li a{
    color: black;
    font-size: 16px;
}
.banners .classify ul li:hover .banner1{
    display: block;
}
.banner_list{
    position: absolute;
    margin-left: 200px;
    width: 1029px;
}
.banner_list img{
    width: 1226px;
    height: 460px;
    display: block;
    position: absolute;
    top: 0;
    left: -90px;
}
.classify{
    position: absolute;
    top: 0;
    left: 0;
    background-color:slategray;
    width: 234px;
    height: 460px;
}
.classify ul{
    margin-top: 15px;
    margin-bottom: 15px;
}
.classify ul li{
    height: 43px;
    line-height: 43px;
    list-style-type: none;
    padding-left: 30px;
    padding-right: 30px;
}
.classify ul li:hover{
    background-color: orange;
}
.classify ul li .banner1 ul li:hover{
    background-color: white;
}
.classify ul li a img{
    width: 50px;
    height: 50px;
}
.classify ul li a{
    font-size: 14px;
    color: #fff;
}
.classify ul li a i{
    float: right;
    height: 43px;
    line-height: 43px;
}
/*ad样式开始*/
.ad{
    margin: 0 auto;
    width: 1226px;
    height: 170px;
    font-size: 0;
}
.ad a{
    color: #b2b2b2;
    line-height: 20px;
}
.ad img{
    width: 321px;
    height: 170px;
    margin-left: 8px;
}
.ad_left{
    float: left;
    width: 234px;
    height: 170px;
    border: 1px solid red;
   margin-top: 10px;
    background-color: rgb(96,87,80);
}
.ad_right{
    float: right;
    margin-top: -171px;
}
.ad_left p{
    display:table;
    width: 100%;
    height: 85px;
}
.ad_left p a{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
}
.ad_left p a i{
    font-size: 25px;
 }
.ad_left p a:before{
    content: " ";
    background-color: #fff;
    height: 1px;
    width: 75px;
    position: absolute;
    top: 5px;
    left: 0;

}
.ad_left p a:after{
    content: " ";
    background-color: #fff;
    position: absolute;
    height: 75px;
    width: 1px;
    top: 1px;
    left: 5px;
}
/*note9开始*/
.note9{
    width: 100%;
    height: 900px;
    background-color: rgb(228,228,228);
    margin-top: 30px;
}
.note9 .content{
    margin: 0 auto;
    width: 1226px;
    height: 170px;
    font-size: 0;
}
.note9 .content img{
    width: 1226px;
    margin-top: 30px;
}
.note9 .content .middle{
    position: absolute;
    margin-top: 30px;
    width: 1226px;
}
.note9 .content h1{
    font-size: 40px;
    float: left;
}
.note9 .content h2{
    display: inline-block;
    position: absolute;
    float: right;
    font-size: 40px;

    right: 0;
}
.list{
  position: absolute;
    margin-top: 70px;
}
.note9 .list .left a:hover{
    box-shadow: #b0b0b0 0 0 5px;
}
.list .left img{
    height: 614px;
    width: 234px;
}
.list .right{
    width: 990px;
    height: 614px;
    float: right;
    position: absolute;
    margin-top: -614px;
    margin-left: 234px;
}
.list .right img{
    width: 180px;
    height: 160px;
    position: absolute;
    margin-left: 25px;
}

.list ul li{
    display: inline-block;
    background-color:white;;
    width: 229px;
    height: 300px;
    margin-left: 14px;
}
.list .right .memo{
    position: absolute;
    margin-top: 200px;
    margin-left: 80px;
}
.p1{
    font-size: 14px;
    color: black;
}
.p2{
    font-size: 13px;
    color: #b2b2b2;
}
.p3{
    font-size: 14px;
    color: red;
}
.pl2{
    margin-top: 10px;
}
.note9 .right ul li:hover {
    box-shadow: #b0b0b0 0 0 5px;
}
.foot{
    width: 100%;
    height: 60px;
    background-color: white;
}
.foot h2{
    font-size: 20px;
    position: absolute;
    margin-left: 730px;
    line-height: 60px;
}

菜的抠脚。

本文标签：小米静态页面商城

版权声明：本文标题：小米商城前端页面（静态）内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://m.elefans.com/xitong/1726414175a1069604.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

电子爱好者 - 最新技术资讯及电子产品介绍！

小米商城前端页面（静态）

更多相关文章

纯小白从0开始root小米手机（MIUI14）及隐藏root使用银行app

小米MIUI系统开发版内测公测申请详细路径步骤方法

Android8.0一键root,小米Mix 2（安卓8.0）一键ROOT详解教程，看教程ROOT

小米路由器linux界面,小米路由器配置ssh登录方法 | 192.168.1.1登陆页面

totolink服务器未响应,TOTOLINK路由器192登录页面打不开怎么回事

无线桥接后如何进入副路由器的页面？

totolink服务器未响应,totolink路由器登陆页面打不开怎么办

小米路由器简单救砖

小米路由器刷梅林教程_小米路由器3刷X-Wrt固件教程

小米TWRP格式化data无限重启变砖解决办法

C#.NET常见问题(FAQ)-程序不包含适合于入口点的静态“Main”方法怎么办

对浏览器内核的进一步理解 及 从浏览器地址栏输入url到页面显示的详细过程

小米浏览器导出html,小米浏览器离线视频如何导出小米浏览器离线视频导出教程...

如何查看Chrome浏览器的页面缓存内容【详细教程】

Chrome浏览器打开微信页面

小米3g刷高格固件_不走弯路：小米路由器3G 刷Padavan固件简单教程

小米路由器mini实现锐捷认证.

小米路由器 mini 刷 Padavan 详细教程

小米无线路由器 + u盘

手机服务器连接视频文件夹吗,巧用手机自带功能向电脑传输视频 华为小米苹果均适用...

发表评论

推荐文章

ChatGPT付费创作系统V3.0.6独立版 WEB+H5+小程序端 （新增AI全网搜索+文档解析+豆包AI通道）安装部署教程

几步操作成功开通 ChatGPT Plus 会员使用ChatGPT-4o的图文记录：过程简单、高效、不复杂！

M.2固态硬盘安装WIN10系统后频繁重启问题的解决

puppeteer 连结已有的Chrome浏览器 puppeteer.connect

微星z370安装linux系统,微星主板Z370、Z270、H110、H170设置U盘启动,U盘启动快捷键...

热门文章

探索Wi-Fi密码神器：`wifi-password`

cad无法安装_CAD软件下载好了，为什么安装不上？别急！试试这两个方法！

＜Zero to One＞ ２.perfect competition and monopoly

Yandex 免费域名邮箱和配置 SMTP

chrome浏览器不支持video标签，不能自动播放。

MathType注册码永久激活版2024中文版

PYB——恢复出厂设置

windows 更新可能已经自动替换了您的AMD图形驱动程序

Keil MDK最新版 5.25介绍及下载地址

解决虚拟机上ubuntu上安装搜狗拼音输入法无法使用的问题，系统是18.04的

最新文章

win11浏览器默认主页如何设置

Win11 Excel文件变成白板图标怎么解决？

减少win11核显占用的内存怎么操作

win2012 r2 php mysql,在Windows Server2012 R2上安装WordPress PHP和MYSQL

Win11录屏数据保存在哪里？Win11录屏数据保存的位置

原版win7系统怎么安装,原版Win7系统的安装步骤

Win11显示麦克风未插上怎么办？Win11显示麦克风未插上的解决方法

Win11更改声音输出设备有什么方法？

Win11鼠标动不了如何恢复？Win11鼠标动不了恢复的方法

Win11磁盘清理在哪打开？

Win11隐藏输入法状态栏方法

Win10一键修复所有dll缺失的方法

Win11怎么把桌面文件路径改到D盘

Win11图标变暗怎么办？Win11图标变暗的解决方法

Win11小组件怎么添加待办事项？Win11添加待办事项小组件的方法

小米手机肿么还原时钟

15000流明是多少瓦

一般普通投影机功率多大?

苹果绿联转换器有些投影机不能用

坚果V9投影机具体参数?

有关九年级作文850字精选

80后90后_高一作文

中级卫生专业资格中医全科学主治医师中级模拟题2021年(9)案与解析

(精品)师范大学招考硕士研究生课程八六0试卷

ZXMVC8900(V3

【模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313】模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313 官方免费下载

【生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD】生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD 官方免费下载

【模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311】模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311 官方免费下载

【模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311】模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311 官方免费下载

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改 官方免费下载

如何实现高效的treenode搜索算法

treenode与链表有何本质区别

在哪些场景下应优先考虑使用treenode

treenode在树形结构中的角色是什么

如何通过treenode实现二叉树

对浏览器内核的进一步理解及从浏览器地址栏输入url到页面显示的详细过程

手机服务器连接视频文件夹吗,巧用手机自带功能向电脑传输视频华为小米苹果均适用...

ChatGPT付费创作系统V3.0.6独立版 WEB+H5+小程序端（新增AI全网搜索+文档解析+豆包AI通道）安装部署教程

＜Zero to One＞２.perfect competition and monopoly

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改官方免费下载