• 开发”小米商城官网首页”(静态页面)


    开发”小米商城官网首页”(静态页面)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城 - 小米MIX 3、红米Note 7、小米8、小米电视官方网站</title>
        <meta name="discription" content="小米商城直营小米公司旗下所有产品,囊括小米手机系列小米MIX 3、小米8、小米Note 3,红米手机系列红米Note 7、红米6 Pro,智能硬件,配件及小米生活周边,同时提供小米客户服务及售后支持。">
        <meta name="keywords" content="小米,小米8,小米Note3,红米Note7,小米MIX3,小米商城">
        <meta http-equiv="x-ua-compatible" content="IE=Edge">
        <link rel="icon" href="image/favicon.ico">
    
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
        </style>
    
        <style type="text/css">
            .topBar{
                 100%;
                background-color: #333;
                position: relative;
                font-size: 12px;
            }
            .container{
                 1226px;
                margin: 0 auto;
                overflow: hidden;
            }
            .topBar_nav{
                float:left;
                height: 40px;
                line-height: 40px;
                text-align: center;
             }
            .topBar_cart{
                float:right;
                height: 40px;
                 120px;
                line-height: 40px;
                text-align: center;
                background-color: #424242;
             }
            .topBar_cart a{
                display: block;
                text-decoration: none;
                color: #b0b0b0;
                height: 40px;
                 120px;
            }
            .topBar_info{
                float:right;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin-right: 15px;
             }
            .topBar a{
                text-decoration: none;
                color: #b0b0b0;
            }
            .topBar a:hover{
                color: #fff;
            }
            .topBar_cart a:hover{
                color: #ff6700;
                background-color: #fff;
            }
            .topBar span{
                color: #424242
            }
        </style>
    
            /*header*/
        <style type="text/css">
            .header{
                 1226px;
                height: 100px;
                margin: 0 auto;
            }
            .header img{
                position: absolute;
                top: 62px;
                bottom: 22px;
                 55px;
                height: 55px;
            }
            .null{
                float: left;
                 245px;
                height: 100px;
            }
            .header_nav{
                float: left;
                 597px;
                height: 100px;
            }
            .header_nav ul li{
                float: left;
                text-align: center;
                 line-height: 100px;
                margin:0 8px;
            }
            .header_nav ul li a {
                color: #333;
                text-decoration: none;
            }
            .header_nav ul li a:hover{
                color: #ff6700;
            }
    
            .header_search{
                float:right;
                margin-top:25px;
                height: 50px;
                 302px;
            }
            .header .text{
                float: right;
                 250px;
                height: 48px;
                border: 1px solid #b0b0b0;
                padding: 0px;
            }
            #search{
                float: right;
                 50px;
                height: 50px;
                border: 1px solid #b0b0b0;
                border-left: 0;
                cursor: pointer;
                background-color: white;
                background-image: url("image/search_b.png");
            }
            #search:hover{
                 background-image: url("image/search_o.jpg")
            }
            .search_text{
                float:right;
                margin-top:-37px;
                margin-right:55px;
                 125px;
            }
            .search_text a{
                float: right;
                margin: 5px;
                text-decoration: none;
                background-color: #eee;
                font-size: 12px;
                color:#757575;
            }
            .search_text a:hover{
                color: #fff;
                background-color: #ff6700;
            }
        </style>
    
        home
        <style type="text/css">
            .home{
                position: relative;
                 1226px;
                height: 460px;
                margin: 0 auto;
            }
            .home img{
                 1226px;
                height: 460px;
            }
            .home_container{
                position: absolute;
                top:0;
                 234px;
                height: 420px;
                padding: 20px 0 20px;
                background-color: rgba(0,0,0,0.6);
            }
            .content_slide{
                float:right;
            }
            .home_list a{
                display: block;
                text-decoration: none;
                font-size: 14px;
                 204px;
                height: 42px;
                color: #fff;
                line-height: 42px;
                padding-left: 30px;
            }
            .home_list ul li a:hover{
                background-color: #ff6700;
            }
            .left_logn{
                position: relative;
                top: -269px;
                left:-942px;
                50px;
                height:70px;
            }
            .left_logn img{
                 18px;
                height:30px;
                position: absolute;
                top: 20px;
                right: 16px;
                cursor: pointer;
            }
            .right_logn {
                position: relative;
                top: -339px;
                /*left: 0px;*/
                 50px;
                height: 70px;
            }
            .right_logn img{
                 18px;
                height:30px;
                position: absolute;
                top: 20px;
                right: 16px;
                cursor: pointer;
            }
            .content_slide div:hover{
                background-color: rgba(0,0,0,0.4);
            }
            .content_slide span{
                position: absolute;
                top:420px;
                left:1146px;
            }
        </style>
    
        home_sub
        <style type="text/css">
            .home_sub{
                position: relative;
                 1226px;
                height: 170px;
                margin: 14px auto 0;
            }
            .sub_list{
                float:left;
                 234px;
                height: 170px;
                background-color: #5f5750;
            }
            .promo{
                position: absolute;
                left:234px;
                 992px;
                height: 170px;
            }
            .promo img{
                float:right;
                 316px;
                height: 170px;
                margin-left: 14px;
            }
            .sub_list img{
                position: relative;
                top:5px;
                left:22px;
                 22px;
                height: 22px;
                color: rgba(255,255,255,0.7);
            }
            .sub_list div{
                 234px;
                height: 85px;
            }
            .sub_list ul li{
                float: left;
                 68px;
                height: 75px;
                margin: 1px 5px ;
                padding-top: 8px;
            }
             .sub_list ul li a{
                 position: relative;
                 top:5px;
                 left:12px;
    
                  38px;
                 height: 40px;
                 text-decoration: none;
                 font-size: 12px;
                 color: rgba(255,255,255,0.7);
             }
            .sub_list ul li a:hover{
                color: white;
            }
        </style>
    
        migo
        <style type="text/css">
            .migo{
                position: relative;
                 1226px;
                height: 438px;
                 margin: 15px auto 0;
            }
            .title{
                font-size: 22px;
                color: #333;
                font-weight: 200;
                line-height: 58px;
            }
            .change{
                position: absolute;
                top: 34px;
                left:1154px;
                 72px;
                height: 24px;
            }
            .change input{
                float: right;
                 36px;
                height: 24px;
                font-size: 16px;
                background-color: #fff;
                border: 1px solid #e0e0e0;
            }
            .image_go{
                 1226px;
                height: 340px;
                padding-bottom: 40px;
                margin: 0 auto;
    
            }
            .image_go img{
                 234px;
                height: 339px;
            }
            .image1{
                margin-left: 9px;
            }
        </style>
    
        helo
        <style type="text/css">
            .helo{
                 1226px;
                height: 120px;
                padding-bottom: 40px;
                margin: 0 auto;
            }
            .helo img{
                 1226px;
                height: 120px;
            }
        </style>
    
        footer
        <style type="text/css">
            .footer{
                 1903px;
                height: 272px;
            }
            .footer_service{
                 1226px;
                height: 55px;
                border-bottom: 1px solid #e0e0e0;
                margin: 0 auto;
                padding-top: 25px;
            }
            .footer_service ul li{
                float: left;
                 242px;
                height: 30px;
                text-align: center;
                border-right: 1px solid #e0e0e0;
            }
            .footer_service ul li a {
                text-decoration: none;
                font-size: 16px;
                color: #616161;
                position: relative;
                top: -8px;
            }
            .footer_service ul li a:hover {
                color: #ff6700;
            }
            .footer_link{
                 1226px;
                height: 112px;
                padding: 40px 0;
                margin: 0 auto;
            }
            .footer_help{
                float: left;
                 974px;
                height: 112px;
            }
            .footer_tel{
                float: left;
                 251px;
                height: 112px;
                border-left: 1px solid #e0e0e0;
            }
            .footer_help dl{
                float: left;
                 160px;
                height: 112px;
            }
            .footer_help dl dt{
                 160px;
                height: 17px;
                margin: -1px 0 26px 0;
                font-size: 14px;
                color: #424242;
            }
            .footer_help dl dd{
                 160px;
                height: 18px;
                margin: 10px 0 0;
                font-size: 12px;
            }
            .footer_help a{
                text-decoration: none;
                color: #757575;
            }
            .footer_tel .tel{
                 251px;
                height: 22px;
                margin: 0 0 5px;
                font-size: 22px;
                color: #ff6700;
                text-align: center;
            }
            .footer_tel .time{
                 251px;
                height: 36px;
                margin: 0 0 16px;
                font-size: 12px;
                color: #616161;
                text-align: center;
            }
            .footer_tel a{
                margin: 0 auto;
                text-align: center;
                text-decoration: none;
                display: block;
                 118px;
                height: 28px;
                font-size: 12px;
                color: #ff6700;
                line-height: 28px;
                background-color: #fff;
                border: 1px solid #ff6700;
            }
            .footer_tel a:hover{
                color: #fff;
                background-color: #f25807;
                border: 1px solid #f25807;
            }
        </style>
    
        site_info
        <style type="text/css">
            .site_info{
                 1903px;
                height: 172px;
                padding: 30px 0;
                background-color: #f5f5f5;
            }
            .bottom_info{
                 1226px;
                height: 119px;
                margin: 0 auto;
            }
            .bottom_img{
                float:left;
                 67px;
                height: 119px;
            }
            .bottom_img img{
                 57px;
                height: 57px;
            }
            .bottom_text{
                float: left;
                 1159px;
                height: 119px;
            }
            .bottom_nav{
                 1159px;
                height: 19px;
            }
            .bottom_nav a{
                text-decoration: none;
                line-height: 18px;
                font-size: 12px;
                color: #757575;
            }
            .bottom_nav a:hover{
                color: #ff6700;
            }
            .bottom_nav span{
                color: #b0b0b0
            }
            .bottom_info_text{
                 1159px;
                height: 72px;
                font-size: 12px;
                color: #b0b0b0;
            }
            .bottom_info_text a{
                text-decoration: none;
                color: #b0b0b0;
            }
            .bottom_info_text a:hover{
                color: #ff6700;
            }
            .bottom_link img{
                 85px;
                height: 28px;
                cursor: pointer;
            }
            .end{
                 276px;
                height: 19px;
                margin: 30px 818px 0;
                font-size: 18px;
                color: #cacaca;
            }
        </style>
    
        bar
        <style type="text/css">
            .bar{
                 84px;
                height: 471px;
                position: fixed;
                top:77px;
                right:0;
            }
            .bar a:hover {
                color: #ff6700;
            }
            .bar_link{
                 84px;
                height: 360px;
            }
            .bar_link a{
                display: block;
                 82px;
                height: 68px;
                font-size: 14px;
                color: #757575;
                border: 1px solid #f5f5f5;
                text-decoration: none;
                text-align: center;
                padding-top: 20px;
            }
            .bar_return{
                 82px;
                height: 90px;
            }
            .bar_return a{
                display: block;
                 82px;
                height: 68px;
                font-size: 14px;
                color: #757575;
                border: 1px solid #f5f5f5;
                text-decoration: none;
                text-align: center;
                padding-top: 20px;
                margin-top: 14px;
            }
        </style>
    
        <!--<link rel="stylesheet" href="css/topbar.css">-->
        <!--<link rel="stylesheet" href="css/header.css">-->
        <!--<link rel="stylesheet" href="css/home.css">-->
        <!--<link rel="stylesheet" href="css/home_sub.css">-->
        <!--<link rel="stylesheet" href="css/migo.css">-->
        <!--<link rel="stylesheet" href="css/helo.css">-->
        <!--<link rel="stylesheet" href="css/footer.css">-->
        <!--<link rel="stylesheet" href="css/site_info.css">-->
        <!--<link rel="stylesheet" href="css/bar.css">-->
    </head>
    <body>
        <div class="topBar">
            <div class="container">
                
                <div class="topBar_nav">
                    <a href="#">小米商城</a>
                    <span>|</span>
                    <a href="#">MIUI</a>
                    <span>|</span>
                    <a href="#">loT</a>
                    <span>|</span>
                    <a href="#">云服务</a>
                    <span>|</span>
                    <a href="#">金融</a>
                    <span>|</span>
                    <a href="#">有品</a>
                    <span>|</span>
                    <a href="#">小爱开放平台</a>
                    <span>|</span>
                    <a href="#">政企服务</a>
                     <span>|</span>
                    <a href="#">资质证照</a>
                    <span>|</span>
                   <a href="#">协议规则</a>
                    <span>|</span>
                    <a href="#">下载app</a>
                    <span>|</span>
                    <a href="#">Select Region</a>
                </div>
    
                <div class="topBar_cart">
    
                    <a href="#">
                        <img src="image/cart.png" style="height: 20px; 20px;">
                        购物车
                    </a>
                </div>
    
                <div class="topBar_info">
                    <a href="#">登陆</a>
                    <span>|</span>
                    <a href="#">注册</a>
                    <span>|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
    
        <div class="header">
            <img src="image/logo.jpg" alt="logo">
            <div class="null"></div>
            <div class="header_nav">
                <ul>
                    <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="header_search">
                <form action="header_search" medthod="get">
                    <label for="search"></label>
                    <input type="submit" value="" id="search">
                    <input type="text" name="search" class="text">
                </form>
            <div class="search_text">
                <a href="#">小米MIX 2S</a>
                <a href="#">小米8</a>
            </div>
    
            </div>
    
        </div>
    
        <div class="home">
            <img src="image/mi8.jpg">
            <div class="home_container">
                <div class="home_list">
                    <ul>
                        <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>
            <div class="content_slide">
                <div class="left_logn">
                    <!--<a href="#">-->
                        <img src="image/left_logn.png">
                    <!--</a>-->
                </div>
                <div class="right_logn">
                    <!--<a href="#">-->
                        <img src="image/right_logn.png">
                    <!--</a>-->
                </div>
                <span>•  •  •  •</span>
    
            </div>
    
        </div>
    
        <div class="home_sub">
            <div class="sub_list">
                <div class="first_line">
                    <ul>
                        <li>
                            <img src="image/phone.png">
                            <br>
                            <a href="#">选购手机</a>
                        </li>
    
                        <li>
                            <img src="image/present.png">
                            <br>
                            <a href="#">企业团购</a>
                        </li>
                        <li>
                            <img src="image/F.png">
                            <br>
                            <a href="#">F码通道</a>
                        </li>
                    </ul>
                </div>
                <div class="second_line">
                    <ul>
                        <li>
                            <img src="image/sim.png">
                            <br>
                             <a href="#"> 米粉卡</a>
                        </li>
    
                        <li>
                            <img src="image/circle.png">
                            <br>
                            <a href="#">以旧换新</a>
                        </li>
                        <li>
                            <img src="image/card.png">
                            <br>
                            <a href="#">话费充值</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="promo">
                <img src="image/3.jpg" >
                <img src="image/2.jpg" >
                <img src="image/1.jpg" >
            </div>
        </div>
    
        <div class="migo">
            <div class="title">小米闪购</div>
            <div class="change">
                <input type="submit" value=">">
                <input type="submit" value="<">
            </div>
            <div class="image_go">
                <img src="image/go1.jpg">
                <img src="image/go2.jpg" class="image1">
                <img src="image/go3.jpg" class="image1">
                <img src="image/go4.jpg" class="image1">
                <img src="image/go5.jpg" class="image1">
            </div>
        </div>
    
        <div class="helo">
            <img src="image/helo.jpg" >
        </div>
    
        <div class="footer">
            <div class="footer_service">
                <ul>
                    <li>
                        <img src="image/fix.jpg">
                        <a href="#">预约维修服务</a>
                    </li>
                    <li>
                        <img src="image/7.jpg">
                        <a href="#">7天无理由退货</a>
                    </li>
                    <li>
                        <img src="image/15.jpg">
                        <a href="#">15天免费换货</a>
                    </li>
                     <li>
                        <img src="image/gift.jpg">
                        <a href="#">满150元包邮</a>
                    </li>
                     <li>
                        <img src="image/local.jpg">
                        <a href="#">520余家售后网点</a>
                    </li>
                </ul>
            </div>
            <div class="footer_link">
                <div class="footer_help">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd>
                            <a href="#">账户管理</a>
                        </dd>
                        <dd>
                            <a href="#">购物指南</a>
                        </dd>
                        <dd>
                            <a href="#">订单操作</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>服务支持</dt>
                        <dd>
                            <a href="#">售后政策</a>
                        </dd>
                        <dd>
                            <a href="#">自助服务</a>
                        </dd>
                        <dd>
                            <a href="#">相关下载</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>线下门店</dt>
                        <dd>
                            <a href="#">小米之家</a>
                        </dd>
                        <dd>
                            <a href="#">服务网点</a>
                        </dd>
                        <dd>
                            <a href="#">授权体验店</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>关于小米</dt>
                        <dd>
                            <a href="#">了解小米</a>
                        </dd>
                        <dd>
                            <a href="#">加入小米</a>
                        </dd>
                        <dd>
                            <a href="#">投资者关系</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd>
                            <a href="#">新浪微博</a>
                        </dd>
                        <dd>
                            <a href="#">官方微信</a>
                        </dd>
                        <dd>
                            <a href="#">联系我们</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd>
                            <a href="#">F码通道</a>
                        </dd>
                        <dd>
                            <a href="#">礼物码</a>
                        </dd>
                        <dd>
                            <a href="#">防伪查询</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer_tel">
                    <p class="tel">400-100-5678</p>
                    <p class="time">
                        周一至周日 8:00-18:00
                        <br>
                        (仅收市话费)
                    </p>
                    <a href="#">
                        <img src="image/msg.jpg">
                        联系客服</a>
                </div>
            </div>
        </div>
    
        <div class="site_info">
            <div class="bottom_info">
                <div class="bottom_img">
                    <img src="image/logo.jpg" alt="logo">
                </div>
                <div class="bottom_text">
                    <div class="bottom_nav">
                        <a href="#">小米商城</a>
                        <span>|</span>
                        <a href="#">MIUI</a>
                        <span>|</span>
                        <a href="#">米家</a>
                        <span>|</span>
                        <a href="#">米聊</a>
                        <span>|</span>
                        <a href="#">多看</a>
                        <span>|</span>
                        <a href="#">游戏</a>
                        <span>|</span>
                        <a href="#">路由器</a>
                        <span>|</span>
                        <a href="#">米粉卡</a>
                         <span>|</span>
                        <a href="#">政企服务</a>
                        <span>|</span>
                       <a href="#">小米天猫店</a>
                        <span>|</span>
                        <a href="#">隐私政策</a>
                        <span>|</span>
                        <a href="#">商城用户协议</a>
                        <span>|</span>
                        <a href="#">账号协议</a>
                        <span>|</span>
                        <a href="#">问题反馈</a>
                        <span>|</span>
                        <a href="#">廉政举报</a>
                        <span>|</span>
                        <a href="#">诚信合规</a>
                        <span>|</span>
                        <a href="#">Select Region</a>
                    </div>
                    <div class="bottom_info_text">
                        <a href="#">©mi.com</a> 京ICP证110507号
                        <a href="#">京ICP备10046444号</a>
                        <a rel="nofollow" href="#">京公网安备11010802020134号 </a>
                        <a href="#">京网文[2017]1530-131号</a>
                        <br>
                        <a href="#" target="_blank">(京)网械平台备字(2018)第00005号</a>
                        <a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                        <a href="#">营业执照</a>
                        <a href="#">医疗器械公告</a>
                        <br>
                        <a href="#">增值电信业务许可证</a> 
                        网络食品经营备案(京)【2018】WLSPJYBAHF-12   
                        <a href="#">食品经营许可证</a>
                        <br>
                        违法和不良信息举报电话:185-0130-1238
                        <a href= "#">知识产权侵权投诉</a>
                        本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
                    </div>
                    <div class="bottom_link">
                        <img src="image/b1.png" >
                        <img src="image/b2.png" >
                        <img src="image/b3.png" >
                        <img src="image/b4.png" >
                        <img src="image/b5.png" >
                    </div>
                </div>
            </div>
            <div class="end">
                <p>探索黑科技,小米为发烧而生!</p>
            </div>
        </div>
    
        <div class="bar">
            <div class="bar_link">
                <a href="#">
                    <img src="image/tphone.png" >
                    <br>
                    手机APP
                </a>
                <a href="#">
                    <img src="image/person.png" >
                    <br>
                    个人中心
                </a>
                <a href="#">
                    <img src="image/service.png" >
                    <br>
                    联系客服
                </a>
                <a href="#">
                    <img src="image/shoppingchart.png" >
                    <br>
                    购物车
                </a>
            </div>
            <div class="bar_return">
                <a href="#">
                    <img src="image/back.png" >
                    <br>
                    回顶部
                </a>
            </div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    rails时间问题
    stringify_keys 和symbolize_keys
    thritf
    Nginx负载均衡反向代理
    CentOS 7 yum 安装 Nginx
    CentOS 7安装与配置Tomcat8
    CentOS 7安装与配置JDK8
    系统数据字典模块设计
    mysql视图
    阿里云maven中央仓库
  • 原文地址:https://www.cnblogs.com/fantsaymwq/p/10339431.html
Copyright © 2020-2023  润新知