網頁編寫練習小米閃購

時間 2019-11-17

標籤網頁編寫練習小米欄目 HTML 简体版

原文原文鏈接

https://www.mi.com/seckill/css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>小米閃購 - 小米商城</title>
        <link rel="shortcut icon" href="img/favicon.ico"/>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/iconfont/iconfont.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="">IoT</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="topbar-cart"><a href=""><i class="iconfont">&#xe607;</i>購物車<span>（0）</span></a></div>
                <div class="topbar-info clearfix">
                    <a href="">登陸</a><span>|</span>
                    <a href="">註冊</a><span>|</span>
                    <a href="" class="sep">消息通知</a>
                </div>
            </div>
        </div>
    
        <div class="herder">
            <div class="container">
                <div class="header-logo"><a href="" class="lr">小米官網</a></div>
                <div class="header-nav">
                    <!--ul>li.nav-item*11>a-->
                    <ul class="nav-list clearfix">
                        <li class="nav-category"><a href="">所有商品分類</a></li>
                        <li class="nav-item"><a href="">小米手機</a></li>
                        <li class="nav-item"><a href="">紅米</a></li>
                        <li class="nav-item"><a href="">電視</a></li>
                        <li class="nav-item"><a href="">筆記本</a></li>
                        <li class="nav-item"><a href="">空調</a></li>
                        <li class="nav-item"><a href="">新品</a></li>
                        <li class="nav-item"><a href="">路由器</a></li>
                        <li class="nav-item"><a href="">智能硬件</a></li>
                        <li class="nav-item"><a href="">服務</a></li>
                        <li class="nav-item"><a href="">社區</a></li>
                    </ul>
                </div>
                <div class="header-search">
                    <form action="" class="search-form">
                        <input type="text" name="key-word" class="search-text"/>
                        <input type="submit" value="&#xe61f;" class="search-btn iconfont"/>
                    </form>
                </div>
            </div>
        </div>    
        
        <div class="seckill">
            <div class="seckill-head">
                
            </div>
            <div class="container">
                <div class="seckill-nav">
                    <ul>
                        <li class="active"><em>00:00</em><span><em>即將開始<br>距開始 00:36:41</em></span></li>
                        <li><em>10:00</em><span>明日開始</span> </li>    
                        <li><em>12:00 </em><span>明日開始</span></li>
                        <li><em>18:00 </em><span>明日開始</span></li>
                        <li><em>20:00 </em><span>明日開始</span></li>
                    </ul>
                </div>    
            </div>
        </div>
    </body>
</html>

View Code

body,ul,li{
    margin: 0;
    padding: 0;
}
body{
    font:14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
.topbar{
    background: #333;
    /*border: 1px solid black;*/
    height: 40px;
}
.container{
    margin: 0 auto;
    /*border: 1px solid red;*/
    width: 1226px;
}
.container::before,.container::after,
.clearfix::before,.clearfix::after{
    content: "";
    display: table;
}
.container::after{
    clear: both;
}
.topbar a{
    color: #b0b0b0;
    font-size: 12px;
}
.topbar a:hover{
    color: #fff;
}

.topbar-nav{
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 0;
    
}
.topbar-nav span{
    font-size: 12px;
    color:#424242;
    font-family: sans-serif;
    margin: 0.5em;
}
.topbar-info{
    float: right;
    margin-right: 15px;
}
.topbar-cart{
    float: right;
}

.topbar-cart a{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 120px;
    background-color: #424242;
}
.topbar-cart a:hover{
    color:#ff6700;
    background-color: #fff;
}
.topbar-cart span{
    margin-left: -4px;
    font-size: 12px;
    
}
.topbar-cart i{
    font-size: 20px;
    line-height: 20px;
    margin-right: 4px;
    vertical-align: -4px;
}
.topbar-info a{
    float: left;
    padding: 0 5px;
    line-height: 40px;
    height: 40px;
}

.topbar-info span{
    float: left;
    font-size: 12px;
    color:#424242;
    font-family: sans-serif;
    line-height: 40px;
    height: 40px;
}
.topbar-info .sep{
    padding: 0 10px;
}


.herder{
    height: 100px;
}
.header-logo{
    float: left;
    width: 62px;
    /*height: 55px;*/
    margin-top: 22px;
    /*border: 1px solid red;*/
}
.header-logo a{
    display: block;
    width: 55px;
    height: 55px;
    background:#FF6700 url(../img/logo.png) no-repeat 50% 50% ;
}
.header-logo a.lr{
    text-align: left;
    text-indent: -1999em;
}
.header-nav{
    float: left;
    width: 820px;
    height: 100px;
    /*border: 1px solid red;*/
}
.header-nav .nav-list{
    width: 820px;
    height: 88px;
    font-size: 16px;
    padding: 12px 0 0 30px;
} 
.header-nav .nav-list .nav-category{
    float: left;
    
}
.header-nav .nav-list .nav-category a{
    display: block;
    text-align: right;
    padding: 26px 0 38px;
    color: #333;
}
.header-nav .nav-list .nav-category a:hover{
    /*background-color: #FF6700;
    color: #fff;*/
}
.header-nav .nav-list .nav-item{
    float: left;
}
.header-nav .nav-list .nav-item a{
    display: block;
    padding: 26px 10px 38px;
    color: #333;
}
.header-nav .nav-list .nav-item a:hover{
    color: #FF6700;
}

.header-search{
    float: right;
    width: 296px;
    height: 50px;
    margin-top: 25px;
    /*border: 1px solid red;*/
}
.header-search .search-form{
    position: relative;
    display: block;
    width: 296px;
    height: 50px;
}
.header-search .search-form .search-text{
    position: absolute;
    top: 0px;
    right: 51px;
    display: block;
    width: 245px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #101010;
    outline: 0;
}
.header-search .search-form .search-btn{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 52px;
    height: 54px;
    border: 1px solid #101010;
    font-size: 24px;
    line-height: 24px;
    background: #fff;
    color: #616161;
    
    
}
.header-search .search-form .search-btn:hover{
    background-color: #FF6700;
    color: #fff;
} 
.seckill{
    background-color: #f5f5f5;
}
.seckill-head{
    margin-top: 19px;
    height: 170px;
    background: url(../img/seckill-head.jpg) no-repeat 50% 0;
    
}
.seckill-nav{
    margin: -68px 0 22px;
}
.seckill-nav ul{
    height: 68px;
    background-color: #414141;
}
.seckill-nav li{
    display: block;
    float: left;
    color: #FFF;
    width: 20%;
    height: 68px;
    line-height: 68px;
    text-align: center;
    cursor: pointer;
}
.seckill-nav li em{
    display: inline-block;
    margin-left: 30px;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}
.seckill-nav li span{
    display: inline-block;
    margin-left: 15px;
    text-align: left;
    line-height: 1;
    vertical-align: middle;
    font-size: 14px;
}
.seckill-nav .active{
    background-color: #f1393a;
}
.seckill-nav ul li span em{
    display: inline-block;
    font-size: 14px;
    margin: 0;
    font-style: normal;
    text-align: left;
    line-height: 20px;
}