（html+css）静态小米闪购主页仿制

效果图

初学html+css，跟着视频教学仿制了小米闪购的主页，在打的过程中发现一些知识点还不太熟练，建议一边听课一遍看书学知识点。

HTML

    
    
     
    


    

        

            

                小米商城|
                MIUI|
                IoT||
                云服务|
                金融|
                有品|
                小爱开放平台|
                企业团购|
                资质证照|
                协议规则|
                下载app|
                Select Region
            
            

                登录|
                注册|
                消息通知|
            
            

                购物车(0)
            
        
    
    

        

          

              
           
        

             

                
全部商品分类
                
小米手机
                
Redmi 红米
                
电视
                
笔记本
                
家电
                
路由器
                
智能硬件
                
服务
                
社区
                
         
            

                

                
              
                 
          
        
    
    

        
 
        

            
 
               

                    
20:00抢购中
                    
00:00 明日开始
                    
10:00 明日开始
                    
14:00 明日开始
                    
20:00 明日开始
               
           
           

               

                     

                      
   
                      
 
                         小米移动电源2c 20000白色
                            
大容量,一个就够
                            
 1元 129元
                            提醒我
                            
已有1个人领取
                        

                    
                   
                
          
           

                *小米秒杀活动规则： 

                1.秒杀商品是否参加活动，以订单结算页显示为准，活动包括但不限于优惠券、赠品、满减、满赠等；

                2.秒杀商品数量有限，活动以下单支付成功为准，请加入购物车后尽快下单支付；

                3.秒杀价不含运费，最终以订单结算页价格为准。

                温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。

           
        

    
 

CSS

body ul li
{
    margin: 0px;
    padding: 0px;
}
body
{
    height: 2600px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
.top
{
    background-color:#333;
    height:40px;
}
.center

{   

    margin: 0 auto;
    width: 1226px;
    height: 38px;
}
.top a
{
color: #b0b0b0;
font-size: 12px;
}
.top-bar1 :hover
{
    color:salmon;
}
.center::before, .center::after
{
    content: "";
    display:table;
}
.center::after
{
    clear: both;
}
.top-bar1
{
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 0px;
}
.top-bar1 span
{
    font-size: 8px;
    color: #424242;
   font-family: sans-serif;
   margin: 0.5em;
    
}
.top-bar2,.top-bar3
{
    float:right;
}
.top-bar3 a
{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 120px;
    background-color: #424242;
}
.top-bar3 span
{
    margin-left:0px;
    font-size: 12px;
}
.top-bar3 :hover
{
    background-color: #fff;
    color: #ff6700;
}
.top-bar2
{
    margin-right: 15px;
}
.top-bar2 a
{
 float: left;
 height: 40px;
 padding: 0 5px;
 line-height: 40px;

}
.top-bar2 span
{
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    color: #424242;
    line-height: 40px;
}
.top-bar2 .news
{
    padding: 0 10px;
}
.top-bar2 a:hover
{
color: aqua;
}
/* header*/
.header
{
    height: 100px;

}
.header-log
{    
    
    margin-top:22px ; 
    height: 55px;
    margin-left: 80px;
   
    
}

.header-seache
{  
    float: right;
    width: 296px;
    height: 50px; 
    margin-top: -50px;
    margin-right:150px;
    
    
}

.header-log 
{
    display: block;
    width: 55px;
    width: 55px;
    background: #ff6700 url(../小米闪购素材/img/mi-logo.png) no-repeat 50% 50%;

}
.u1
{
list-style-type: none;
}
.header-nav
{
  
 width: 720px;
 height: 100px;
 margin-top: -70px;
 margin-left: 200px;
 float: left;
}

.header-nav a:hover
{
color: #ff6700;
}
.header-nav .nav-list .item
{
    float: left;
}
.header-nav .nav-list .item a
{
display: block;
padding: 26px 10px 38px;
color: black;
font-size: 13px;
}
.header-seache .seache-form
{
    display: block;
    width:296px;
    height: 56px; 
    position: relative;
}
.header-seache .seache-form .seaech-text
{ 
   
    display: block;
    width: 245px;
    height: 50px;
    line-height: 50px;
    border: 1x solid #e0e0e0;
    outline: 0;   
}
.header-seache .seache-form .seaech-btn
{ 
   
display: block;
width: 52px;
height: 50px;
border: 1px solid #e0e0e0;
font-size: 24px;
line-height: 24px;
background: white;
color: #616161;
outline: 0;
}
.seckill
{
    background-color:#f5f5f5;
}
.seckill-head
{
    background :url(../小米闪购素材/img/seckill-head.jpg) no-repeat  ;
    margin-top: 19px;
    height: 170px;
}
.seckill-nav
{
    margin: -68px 0 22px;

}
.seckill-nav ul
{
    height: 68px;
    background: #414141;
}
.seckill-nav li
{ 
    float: left;
    display: block;
    color: #fff;
    width: 20%;
    height: 68px;
    line-height:68px;
    text-align: center;
    cursor: pointer;
}
.seckill-nav .active
{
    background-color: #f1393a;
}
.seckill-nav li em
{
    display: inline-block;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    vertical-align:middle ;
    margin-left: 30px;

}
.seckill-nav li span
{
    display: inline-block;
    text-align: left;
    line-height: 1;
    vertical-align:middle ;
    font-size: 14px;
    margin-left: 15px;
}
/* seckill-goods*/
.seckill-goods  li
{
 float: left;
width: 400px;
height: 190px;
background-color: #fff;
margin-right: 13px;
margin-bottom: 13px;
}

.clearfix:after {
    content:""; 
    display: block; 
    clear:both; 
 }
 .seckill-notices
 {
     font-size: 12px;
     color: #999;
     margin-top: 100px;
     padding: 35px;
 }
 .seckill-goods .bg
 {
    float: left;
    width: 190px;
    height: 190px;

 }
 .seckill-goods .bg img
 {
     height: 190px;
 }
 .seckill-goods .info
 {
     margin-left: 210px;
    
    width: 190px;
    height: 190px;
    padding-top: 30px;
 }
 .seckill-goods .info .name
{
    font-size: 14px;
    color: #333;
    height: 16px;
    line-height: 16px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}
.seckill-goods .info .tips
{
 font-size: 12px;
 line-height: 12px;
 color: #b0b0b0;   
}
.seckill-goods .info .price
{
    font-size: 16px;
    line-height: 16px;
    color: red;
    margin-top: 16px;

}
.seckill-goods .info .price del
{
    font-size: 12px;
    line-height: 12px;
    color: #999;
    margin-left: 10px;
}