【前端练习】小米商城主页（静态部分）

2022-10-11 11:39:20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城</title>
    <link rel="icon" href=".\images\favicon.ico">
    <style>

        
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        @font-face {
            font-family: ‘iconfont‘;
            src:url(iconfont.eot);
            src: url(iconfont.eot?#iefix) format(‘embedded-opentype‘);
        }
        @font-face {
            font-family: ‘iconfont‘;
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format("woff");
            font-weight: normal;
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale
        }
        /* site-topbar */
        .site-topbar{
            font-size: 12px;
            background-color: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .site-topbar .topbar-nav{
            height: 40px;
            float: left;
        }
        .site-topbar .topbar-cart,.site-topbar .topbar-info{
            height: 40px;
            float: right;
        }
        .site-topbar .sep{
            color: #424242;
        }
        .site-topbar a:link{
            color: #b0b0b0;
            line-height: 40px;
            text-decoration: none;
        }.site-topbar a:visited{
            color: #b0b0b0;
            line-height: 40px;
        }
        .site-topbar a:hover{
            color: #ffffff;
            line-height: 40px;
        }
        .site-topbar .topbar-cart{
            width: 120px;
            margin-left: 15px;
            background-color: #424242;
            text-align: center;
        }
        .site-topbar .topbar-cart i{
            font-size: 20px;
            line-height: 20px;
            margin-right: 4px;
            vertical-align: -4px;
        }
        /* site-hander */
        .site-hander .hander-logo{
            float: left;
            width: 62px;
            margin-top: 22px;
        }
        .site-hander .hander-logo .logo{
            display: block;
            width: 55px;
            height: 55px;
            background:  url(./images/mi-logo.png) #ff6700 50%;
        }

        .exposure{
            position: absolute;
            left: 69px;
            width: 165px;
            height: 100px;
        }
        /* hander-nav */
        .site-hander .hander-nav{
            width: 850px;
            height: 100px;
            float: left;
        }
        .site-hander .hander-nav .nav-list{
            width: 820px;
            height: 88px;
            padding: 12px 0 0 30px;
        }
        .site-hander .hander-nav ul li{
            float: left;
            background-color: #fff;
            height: 88px;
            font-size: 16px;
        }
        .site-hander .hander-nav ul .nav-category{
            width: 127px;
            padding-right: 15px;
        }
        .site-hander .hander-nav ul li a{
            float: left;
            display: block;
            padding: 30px 10px 37px;
            color: #333333;
   
        }
        .site-hander .hander-nav ul li a:visited{
            color: #333333;
        }
        .site-hander .hander-nav ul li a:hover{
            color: #ff6700;
        }

        /* hander-search */
        .site-hander .hander-search{
            float: right;
            width: 296px;
            margin-top: 25px;
        }
        .site-hander .hander-search .search-form{
            position: relative;
            width: 296px;
            height: 50px;
        }
        .site-hander .hander-search .search-form:hover .search-text{
            border-color: #b0b0b0;
        }
        .site-hander .hander-search .search-text{
            width: 223px;
            height: 48px;
            position: absolute;
            top: 0;
            right: 51px;
            border: 1px solid #e0e0e0;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
        }

        .site-hander .hander-search .search-btn{
            position: absolute;
            top: 0;
            right: 0;
            width: 52px;
            height: 50px;
            border: 1px solid #e0e0e0;
            font-size: 24px;
            line-height: 24px;
            background-color: #fff;
            color: #616161;
        }
        
        .site-hander .hander-search .search-btn:hover{
            background-color: #ff6700;
            border-color: #ff6700;
            color: #ffffff;
            cursor: pointer;
        }
        .site-hander .hander-search .search-form:hover .search-btn:hover{
            border-color: #ff6700;;
        }
        .site-hander .hander-search .search-hot-word{
            position: absolute;
            top: 14px;
            right: 62px;
        }
        .site-hander .hander-search .search-hot-word a{
            background-color: #eee;
            font-size: 12px;
            color: #757575;
            margin-left: 5px;
            padding: 0 5px;
        }

        .site-hander .hander-search .search-hot-word a:hover{
            background-color: #ff6700;
            border-color: #ff6700;
            color: #ffffff;
        }
        /* home-hero */
        .home-hero>.container{
            position: relative;
        }
        .home-hero .site-category{
            position: relative;
            float: left;
            background-color: #333333;
            width: 234px;
            padding: 20px 0;
            z-index: 10;
        }

        .home-hero .site-category li a{
            position: relative;
            display: block;
            height: 42px;
            line-height: 42px;
            font-size: 14px;
            padding-left: 30px;
        }
        .home-hero .site-category li i{
            position: absolute;
            top: 12px;
            right: 20px;
            font-size: 18px;
            line-height: 18px;
            color: rgba(255,255,255,0.5);
        }
        .home-hero .site-category li a:link{
            color: #ffffff;
        }
        .home-hero .site-category li a:visited{
            color: #ffffff;
        }
        .home-hero .site-category li a:hover{
            background-color: #ff6700;
            color: #ffffff;

        }
        .home-hero .wrapper{
            position: absolute;
            z-index: 0;
        }
        .home-hero .wrapper a{
            display: block;
        }
        .home-hero .wrapper a img{
            width: 1226;
            height: 460px;
        }
        .home-hero .wrapper-page{
            position: absolute;
            width: 400px;
            bottom: 20px;
            right: 30px;
            z-index: 10;
            text-align: right;
        }
        .home-hero .wrapper-page .wrapper-pager-item{
            display: inline-block;
            
        }
        .home-hero .wrapper-page .wrapper-pager-item a{
            display: block;
            width: 6px;
            height: 6px;
            border: 2px solid #fff;
            border-radius: 10px;
            border-color: rgba(255,255,255,0.3);
            background: rgba(0,0,0,0.4);
            margin: 0 5px;
        }
        .home-hero .wrapper-page .wrapper-pager-item .active{
            background: rgba(255,255,255,0.4);
            border-color: rgba(0,0,0,0.4);
        }
        .home-hero .wrapper-contral a{
            display: block;
            position: absolute;
            width: 41px;
            height: 69px;
            top: 50%;
            margin-top: -35px;
            z-index: 10;
        }
        .home-hero .wrapper-contral .page-prev{
            background: url("./images/icon-slides.png") no-repeat -84px 50%;
            left: 234px;
        }
        .home-hero .wrapper-contral .page-next{
            background: url("./images/icon-slides.png") no-repeat -125px 50%;
            right: 0;
        }
        .home-hero .wrapper-contral .page-prev:hover{
            background: url("./images/icon-slides.png") no-repeat 0 50%;
        }
        .home-hero .wrapper-contral .page-next:hover{
            background: url("./images/icon-slides.png") no-repeat -42px 50%;
        }
        /* home-hero-sub */
        .home-hero-sub{
            margin-top: 14px;
        }
        .home-hero-sub .home-channel{
            float: left;
            width: 228px;
            padding: 3px;
            font-size: 12px;
            text-align: center;
            background: #5f5750;
        }

        .home-hero-sub .home-channel li{
            float: left;
            width: 68px;
            height: 82px;
            padding: 0 3px;
        }
        .home-hero-sub .home-channel li a{
            display: block;
            padding-top: 18px;
            color: rgba(255,255,255,0.7);
        }
        .home-hero-sub .home-channel li a:hover{
            color: #ffffff;;
        }
        .home-hero-sub .home-channel li a i{
            display: block;
            height: 24px;
            margin-bottom: 4px;
            font-size: 24px;
            line-height: 24px;
        }
        .home-hero-sub .home-channel div{
            float: left;
            background-color: #665e57;
        }
        .home-hero-sub .home-channel .culo{
            width: 1px;
            height: 70px;
            margin-top: 6px;
        }
        .home-hero-sub .home-channel .row{
            width: 64px;
            height: 1px;
            margin: 0 6px;
        }

        .home-hero-sub .home-promo{
            float: right;
            width: 978px;
        }
        .home-hero-sub .home-promo .home-promo-list li{
            float: left;
            margin-left: 15px;
        }
        .home-hero-sub .home-promo .home-promo-list .first{
            margin-left: 0;
        }
        .home-hero-sub .home-promo .home-promo-list li img{
            width: 316px;
            height: 170px;
        }
        /* flashPurchase */
        .flashPurchase{
            margin-top: 26px;
        }
        .flashPurchase .title{
            position: relative;
        }
        .flashPurchase .title h2{
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #333;
        }
        .flashPurchase .title .more{
            position: absolute;
            top: 24px;
            right: 0;
        }
        .flashPurchase .title .more a{
            float: right;
            display: inline-block;
            width: 24px;
            height: 16px;
            padding: 3px 5px;
            border: 1px solid #e0e0e0;
            font-size: 16px;
            line-height: 16px;
            color: #b0b0b0;
            text-align: center;
        }
        .flashPurchase .title .more a:hover{
            color: #ff6700;
        }
        /* flashPurchase-list */
        .flashPurchase .flashPurchase-list .flashPurchase-info{
            float: left;
            width: 234px;
            padding: 54px 0 56.5px;
            text-align: center;
            background-color: #f1eded;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-info p{
            font-size: 21px;
            color: #ef3a3b;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-info img{
            margin: 25px 0;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-info .sub{
            font-size: 15px;
            color: rgba(0,0,0,0.54);
        }
        .flashPurchase .flashPurchase-list .flashPurchase-info .contdown{
            overflow: hidden;
            margin: 28px 33px 0;
            font-size: 24px;
            line-height: 46px;
        }
        /* 倒计时 */
        .flashPurchase .flashPurchase-list .flashPurchase-info .contdown div{
            float: left;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-info .contdown .box{
            width: 46px;
            height: 46px;
            background-color: #605751;
            color: #ffffff;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-info .dosh{
            width: 15px;
            height: 46px;
            font-size: 28px;
            /* background-color: #ffffff; */
            color: #605751;
            
        }
        /* 闪购内容 */
        .flashPurchase .flashPurchase-list .flashPurchase-wapper li{
            position: relative;
            float: left;
            margin-left: 14px;
            
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .bg{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 2;
            background-color: rgba(0,0,0,0.02);
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper a{
            position: relative;
            display: block;
            width: 234px;
            height: 300px;
            padding-top: 38px;

        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .content{

            width: 234px;
            height: 263px;
            text-align: center;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .content img{
            width: 160px;
            height: 160px;
            margin-bottom: 22px;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper h3{
            font-size: 14px;
            margin: 0 20px 3px;
            font-weight: 400;
            color: #212121;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .desc{
            font-size: 12px;
            color: #b0b0b0;
            margin-bottom: 12px;
            height: 18px;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .price{
            color: #ff6709;
            font-size: 14px;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper del{
            text-decoration: line-through;
            color: #b0b0b0;
            font-size: 14px;
        }
        /* 顶部横条颜色 */
        .flashPurchase .flashPurchase-list .flashPurchase-info{
            border-top: 1px solid #e53935;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .first{
            border-top: 1px solid #ffac13;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .second{
            border-top: 1px solid #83c44e;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .third{
            border-top: 1px solid #2196f3;
        }
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .fourth{
            border-top: 1px solid #e53935;
        }
        /* 一元秒杀 */
        .flashPurchase .flashPurchase-list .flashPurchase-wapper .saleoff{
            position: absolute;
            width: 64px;
            height: 20px;
            background-color: #e53935;
            color: #ffffff;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            top: 0;
            left: 50%;
            margin-left: -32px;
        }

        .banner{

            margin-top: 42px;
        }
        .banner img{
            height: 120px;
        }
        
        /* 右侧按钮 */
        .bar-top{
            position: fixed;
            bottom: 70px;
            right: 50%;
            margin-right: -640px;
            border-top: 1px solid #f5f5f5;
            z-index: 999;
        }
        .bar-top li{
            width: 25px;
            height: 39px;
            border: 1px solid #f5f5f5;
            border-top: 0;
        }
        .bar-top a{
            display: block;
            padding-top: 9px;
            margin-left: 2px;
        }
        .bar-top img{
            width: 20px;
            height: 20px;
        }
        .bar-top .totop{
            margin-top: 14px;
            border-top: 1px solid #f5f5f5;
        }
        .page-main{
            height: 100px;
            padding-top: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="site-topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">MIUI</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                <span class="sep">|</span>
                <a href="#">云服务</a>
                <span class="sep">|</span>
                <a href="#">金融</a>
                <span class="sep">|</span>
                <a href="#">有品</a>
                <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="#">政企服务</a>
                <span class="sep">|</span>
                <a href="#">Select Region</a>
            </div>

            <div class="topbar-cart">
                <i></i>
                <a href="#">
                    <i class="iconfont">&#xe60c;</i>
                    购物车
                    <span>(0)</span>
                </a>
            </div>

            <div class="topbar-info">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>

    <div class="site-hander">
        <div class="container">
            <div class="hander-logo">
                <a class="logo" href="#" title="小米官网">
                </a>
            </div>
            
            <div class="hander-nav">
                    <ul class="nav-list">
                        <li class="nav-category">
                            <a href="#"></a>
                        </li>
                         <li>
                        <a href="#">小米手机</a>
                        </li>
                        <li>
                            <a href="#">红米</a>
                        </li>
                        <li>
                            <a href="#">电视</a>
                        </li>
                        <li>
                            <a href="#">笔记本</a>
                        </li>
                        <li>
                            <a href="#">空调</a>
                        </li>
                        <li>
                            <a href="#">新品</a>
                        </li>
                        <li>
                            <a href="#">路由器</a>
                        </li>
                        <li>
                            <a href="#">智能硬件</a>
                        </li>
                        <li>
                            <a href="#">服务</a>
                        </li>
                        <li>
                            <a href="#">社区</a>
                        </li>
                    </ul>
                
            </div>

            <div class="hander-search">
                <form action="https://www.baidu.com" class="search-form" method="get">
                    <input class="search-text" type="text" name="keyword">
                    <input class="search-btn iconfont" type="submit" value="&#xe616;">

                    <div class="search-hot-word">
                        <a href="#">小米8</a>
                        <a href="#">小米MIX 2S</a>

                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="home-hero">
        <div class="container">
            <div class="site-category">
                <ul>
                    <li>
                        <a href="#">
                            手机&nbsp;电话卡
                            <i class="iconfont">&gt;</i>
                        </a>
                        
                    </li>
                    <li>
                        <a href="#">
                            电视&nbsp;盒子
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            笔记本&nbsp;平板
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            家电&nbsp;插线板
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            出行&nbsp;穿戴
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            智能&nbsp;路由器
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            电源&nbsp;配件
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            健康&nbsp;儿童
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            耳机&nbsp;音箱
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            生活&nbsp;箱包
                            <i class="iconfont">&gt;</i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="wrapper">
                <a href="#">
                    <img src="./images/wrapper.jpg" >
                </a>
            </div>
            <div class="wrapper-page">
                <div class="wrapper-pager-item">
                    <a class="active" href="#"></a>
                </div>
                <div class="wrapper-pager-item">
                    <a href="#"></a>
                </div>
                <div class="wrapper-pager-item">
                    <a href="#"></a>
                </div>
                <div class="wrapper-pager-item">
                    <a href="#"></a>
                </div>
                <div class="wrapper-pager-item">
                    <a href="#"></a>
                </div>
            </div>
            <div class="wrapper-contral">
                <a class="page-prev" href="#"></a>
                <a class="page-next" href="#"></a>
            </div>
        </div>
    </div>

    <div class="home-hero-sub container">
        <div class="home-channel">
            <ul class="home-channel-list">
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe908;</i>
                        选购手机
                    </a>
                </li>
                <div class="culo"></div>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe905;</i>
                        企业团购
                    </a>
                </li>
                <div class="culo"></div>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe903;</i>
                        F码通道
                    </a>
                </li>
                <div class="row"></div>
                <div class="row"></div>
                <div class="row"></div>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe906;</i>
                        米粉卡
                    </a>
                </li>
                <div class="culo"></div>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe904;</i>
                        以旧换新
                    </a>
                </li>
                <div class="culo"></div>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe907;</i>
                        花费充值
                    </a>
                </li>






            </ul>
        </div>
        <div class="home-promo">
            <ul class="home-promo-list">
                <li class="first">
                    <a href="#">
                        <img src="./images/a4/1.jpg" >
                    </a>
                </li>
                <li class="second">
                    <a href="#">
                        <img src="./images/a4/2.jpg" >
                    </a>
                </li>
                <li class="third">
                    <a href="#">
                        <img src="./images/a4/3.jpg" >
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="flashPurchase container">
        <div class="title">
            <h2>小米闪购</h2>
            <div class="more">
                <a href="#">&gt;</a>
                <a href="#">&lt;</a>
            </div>
        </div>
        <div class="flashPurchase-list">
            <div class="flashPurchase-info">
                <div class="bg"></div>
                <p>18:00 场</p>
                <img src="./images/flashpurchase.png" >
                <p class="sub">距离开始还有</p>
                <div class="contdown">
                    <div class="box">02</div>
                    <div class="dosh">:</div>
                    <div class="box">33</div>
                    <div class="dosh">:</div>
                    <div class="box">33</div>
                </div>
            </div>
            <div class="flashPurchase-wapper">
                <ul>
                    <li class="first">
                        <a href="#">
                            <div class="bg"></div>
                            <div class="content">
                                <img src="./images/pms_1.jpg" >
                                <h3>新小米移动电源2 (10000mAh) 银色</h3>
                                <p class="desc">双向快充，铝合金外壳</p>
                                <P>
                                    <span class="price">1&nbsp;元</span>
                                    <del>79元</del>
                                </P>
                            </div>
                            <div class="saleoff">
                                 1元秒杀
                            </div>
                        </a>
                    </li>
                    <li class="second">
                        <a href="#">
                            <div class="bg"></div>
                            <div class="content">
                                <img src="./images/pms_2.jpg" >
                                <h3>小米USB Type C快速充电数据线 灰色</h3>
                                <p class="desc">快速充电，稳定传输</p>
                                <P>
                                    <span class="price">6.6&nbsp;元</span>
                                    <del>16.9元</del>
                                </P>
                            </div>
                        </a>
                    </li>
                    <li class="third">
                        <a href="#">
                            <div class="bg"></div>
                            <div class="content">
                                <img src="./images/pms_3.jpg" >
                                <h3>ZMI双模智能充电器+充电宝(5200) 黑色</h3>
                                <p class="desc">5000mAh充沛电量</p>
                                <P>
                                    <span class="price">9.9&nbsp;元</span>
                                    <del>109元</del>
                                </P>
                            </div>
                        </a>
                    </li>
                    <li class="fourth">
                        <a href="#">
                            <div class="bg"></div>
                            <div class="content">
                                <img src="./images/pms_4.jpg" >
                                <h3>自动折叠伞 黑</h3>
                                <p class="desc">防泼水伞布，轻盈拒水</p>
                                <P>
                                    <span class="price">9.9&nbsp;元</span>
                                    <del>99元</del>
                                </P>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="banner container">
        <a href="#">
            <img src="./images/banner1.jpg" >
        </a>
    </div>
    <!-- 右侧按钮 -->
    <div class="bar-top">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/bar1.png" >
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/bar2.png" >
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/bar3.png" >
                </a>
            </li>
            <li class="totop">
                <a href="#">
                    <img src="./images/totop.png" >
                </a>
            </li>
        </ul>
    </div>

    <div class="page-main container">
        <p>...</p>
    </div>
</body>
</html>
【前端练习】小米商城主页（静态部分）
码农公寓

相关文章
