HTML+CSS+JavaScript仿写的小米官网

HTML部分

    
    
    
    
    
    


    
    

        
    
    
    

        

            

                小米商城|
                MIUI|
                IOT|
                云服务|
                金融|
                有品|
                小爱开放平台|
                政企服务
            
            

                

                    购物车(0)
                
                

                    消息通知|
                    注册|
                    登录
                
            
        
    
    
    

        
        

            
            

                小米手机
                红米
                电视
                笔记本
                盒子
                新品
                路由器
                智能硬件
                服务
                社区
            
            

                

                    
                    
                
            
    
        
        
        

            
            

                
                
                
                
                
                
<
                
>
                

                    
                    
                    
                    
                    
                
            
            
            

                手机 电话卡>
                电视 盒子>
                笔记本 平板>
                智能 家电>
                健康 家居>
                出行 儿童>
                路由器 手机配件>
                移动电源 插线板>
                耳机 音响>
                生活 米兔>
            
  
        
        
        

            

                

                    
¤
选购手机
                    
¤
选购手机
                    
¤
选购手机
                    
¤
选购手机
                    
¤
选购手机
                    
¤
选购手机
                
            
            

                
                
                
            
        
    
    

    

CSS部分

body{
    margin : 0;
    padding : 0;
    font-family : Arial, Helvetica, sans-serif;
}
header a{
    height : 120px;
    display : block;
    background-image: url("images/01.jpg");
    background-position : center center;
}
/*导航栏*/
nav{
    height : 40px;
    background-color : #333;
}
nav div.center{
    width : 1226px;
    margin : 0 auto;
    height : 100%;
    font-size : 12px;
    color : #424242;
}
nav div.center div.left{
    height : 100%;
    float : left;
}
nav div.center div.left a,nav div.center div.left span{
    float : left;
    margin-right : 6px;
    line-height : 40px;
}
nav div.center div.left a{
    color : #b0b0b0;
    text-decoration : none;
}
nav div.right{
    float : right;
}
nav div.right div.shoppingCart{
    float : right;
    height : 40px;
    width : 120px;
    background-color : #424242;
    box-sizing : border-box;
    background-image : url("images/shoppingCart1.png");
    background-position : 20px center;
    background-repeat : no-repeat;
    margin-left : 20px;
}
nav div.right div.shoppingCart a{
    text-decoration : none;
    color : #b0b0b0;
    line-height : 40px;
    padding-left : 45px;
}
nav div.right div.login{
    float : right;
}
nav div.right div.login a,nav div.right div.login span{
    float : right;
    line-height : 40px;
    margin-right : 6px;
}
nav div.right div.login a{
    text-decoration : none;
    color : #b0b0b0;
}
nav div.center div.left a:hover,nav div.right div.login a:hover{
    color : #fff;
}
nav div.right div.shoppingCart:hover{
    background-color : #fff;
    background-image: url("images/shoppingCart2.png");
}
nav div.right div.shoppingCart a:hover{
    color : #ff6700;
}
/*主体*/
section{
    width : 1226px;
    margin : 0 auto;
}
/*logo 导航 搜索栏*/
section div.top{
    height : 100px;
}
section div.top a.logo{
    width : 234px;
    float : left;
    margin : 22px 0;
}
section div.nav{
    float : left;
    width : 697px;
}
section div.nav a{
    text-decoration : none;
    color : #333;
    line-height : 100px;
    padding-right : 15px;
    font-size : 16px;
}
section div.nav a:hover{
    color : #ff6700;
}
section div.search{
    float : right;
    margin : 25px 0;
}
section div.search form input{
    width : 223px;
    height : 48px;
    padding : 0;
    float : right;
    border : 1px solid #b0b0b0;
    font-size : 16px;
}
section div.search form input[type="submit"]{
    width : 48px;
    padding : 0;
    margin : 0;
    box-sizing : content-box;
    border-left : 0px solid #b0b0b0;
    background-color : #fff;
}
section div.search form input[type="submit"]:hover{
    background-color : #ff6700;
    border-color : #ff6700;
    color : #fff;
}
/* 主体 左栏*/
section div.main{
    position: relative;
    width : 100%;
    float : left;
}
section div.main div.leftBar{
    position : absolute;
    left : 0;
    top : 0;
    width : 234px;
    height : 420px;
    padding : 20px 0;
    background-color : rgba(0, 0, 0, 0.6);
    float : left;
}
section div.main div.leftBar a{
    float : left;
    height : 42px;
    width : 100%;
    text-decoration : none;
    color : #fff;
    line-height : 42px;
    padding : 0 30px;
    font-size : 14px;
    box-sizing : border-box;
}
section div.main div.leftBar a span{
    font-size : 16px;
    font-weight : bold;
    float : right;
}
section div.main div.leftBar a:hover{
    background-color : #ff6700;
}
/*轮播图*/
section div.run{
    position: relative;
    width : 100%;
    height : 460px;
    background-color : pink;
}
section div.run img{
    position : absolute;
    left : 0;
    right : 0;
    width : 100%;
    height : 100%;
}
section div.run a.runimg{
    opacity : 0;
    transition-duration: 1s;
}
section div.run div.left,section div.run div.right{
    width : 41px;
    height : 69px;
    position : absolute;
    left : 234px;
    top : 50%;
    margin-top : -35px;
    background-color : rgba(0, 0, 0, 0);
    text-align : center;
    line-height : 69px;
    font-size : 50px;
    color : #eee;
    border-radius : 0 5px 5px 0;
    cursor : pointer;
}
section div.run div.right{
    left : 100%;
    margin-left : -41px;
    border-radius : 5px 0 0 5px;
}
section div.run div.left:hover,section div.run div.right:hover{
    background-color : rgba(0, 0, 0, 0.5);
}
section div.run div.index{
    position : absolute;
    width : 120px;
    height : 10px;
    right : 30px;
    bottom : 20px;
}
section div.run div.index a{
    float : left;
    width : 6px;
    height : 6px;
    border : 2px solid rgba(0, 0, 0, 0.4);
    background-color : rgba(0, 0, 0, 0.4);
    margin : 0 6px;
}
section div.run div.index a:hover{
    background-color : rgba(255, 255, 255, 0.4)!important;
}
/*主题方块链接*/
section div.theme{
    float : left;
    height : 170px;
    width : 100%;
    margin-top : 14px;
}
section div.theme div.menu{
    width : 234px;
    height : 100%;
    float : left;
    margin-right : 2px;
}
section div.theme div.menu ul{
    margin : 0;
    padding : 0;
    list-style : none;
}
section div.theme div.menu ul a{
    color : rgba(255, 255, 255, 0.6);
    text-decoration : none;
    background-color : #5f5750;
    float : left;
    width : 78px;
    height : 85px;
    box-sizing : border-box;
    border : 1px solid rgba(255, 255, 255, 0.2);
    border-width : 0 1px 1px 0;
    font-size : 40px;
    text-align : center;
    line-height : 35px;
    padding-top : 12px;
}
section div.theme div.menu ul a:hover{
    color : rgba(255, 255, 255, 1);
}
section div.theme div.menu ul a p{
    margin : 0;
    font-size : 14px;
    line-height : 14px;
}

section div.theme div.product a{
    float : left;
    margin-left : 14px;
}
section div.theme div.product img{
    width : 316px;
    height : 170px;
    vertical-align : bottom;   
}