HTML&CSS实战项目------电商站首页布局

项目源自表严肃，他的个人网站：https://biaoyansu.com/

预览：

预览

HTML代码：

    
    
    
    


    

        

            

                首页
            
            

                我的订单
                收藏夹
                登录
                注册
            
        
    
    

        

            

                香菇街
            
            

                
                搜索
            
            

                我的购物车
            
        
    
    

        

            

                
item/item
                
item/item
                
item/item
                
item/item
                
item/item
                
item/item
                
item/item
                
item/item
                
item/item
            
            

                

                    
                
                

                    

                        
                    
                    

                        
                    
                
            
            

                

                    

                    你好，欢迎剁手~
                
                

                    公告
                    

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aliquid commodi distinctio dolore doloremque eaque earum esse, hic magni minus necessitatibus nulla numquam possimus provident, quo similique voluptate voluptates!
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aliquid commodi distinctio dolore doloremque eaque earum esse, hic magni minus necessitatibus nulla numquam possimus provident, quo similique voluptate voluptates!
                    
                
            
        
    
    

        

            
女装
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
            
男装
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
            
童装
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
            
随便看看
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
        
    
    

        

            item
            item
            item
            item
            

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            
        
    

CSS代码：

*{
    box-sizing: border-box;
    transition: background-color 200ms;
}

body{
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    background-color: #f9f9f9;
}

a{
    text-decoration: none;
}

img{
    display: block;
    max-width: 100%;
}
.container{
    display: block;
    max-width: 1080px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearf:after,
.clearf:before{
    content: " ";
    display: block;
    clear: both;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9{
    display: block;
    position: relative;
    min-height: 1px;
    float: left;
}
.col-1 {
    width: 10%;
}
.col-2 {
    width: 20%;
}
.col-3 {
    width: 30%;
 }
.col-4 {
    width: 40%;
  }
.col-5 {
    width: 50%;
   }
.col-6 {
    width: 60%;
}
.col-7 {
    width: 70%;
}
.col-8 {
    width: 80%;
}
.col-9 {
    width: 90%;
}

.top-nav{
    background-color: #eee;
}

.top-nav .item{
    display: inline-block;
    padding: 6px 10px;
    color: #666;
}
.top-nav .item:hover{
    color: #333;
}

.header{
    padding: 20px 0;
}
.header .logo{
    font-size: 30px;
}

.header .search-bar{
    border: 2px solid #dd182b;
    background-color: #dd182b;
}
.header .search-bar input,
.header .search-bar button{
    border: 0;
    display: block;
    float: left;
    padding: 10px;
    outline: 0;
}
.header .search-bar input{
    width: 80%;
}
.header .search-bar input:focus{
    box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.4);
}
.header .search-bar button{
    width: 20%;
    background-color: #dd182b;
    color: #fff;
}
.header .search-bar button:hover{
    background-color: #ce1829;
}
.header .car{
    text-align: center;
}
.header .car a{
    padding: 10px;
    float: right;
    background-color: #fff;
    border: 2px solid #eee;
    width: 80%;
    color: #dd182b;
}

.main-promote .cat{
    background-color: #6e6568;
    color: #fff;
}
.main-promote .cat .item{
    padding: 14px 20px;
}
.main-promote .cat .item:hover{
    background: rgba(0,0,0,0.2);
}

.main-promote .info{
    padding: 10px;
    background-color: #fff;
    color: #888;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.main-promote .info >*{
    margin-bottom: 10px;
}
.main-promote .info .avatar{
    width: 50px;
    height: 50px;
    background-color: #aaa;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}
.cat-promote .title:before{
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 22px;
    background-color: #dd182b;
    margin-right: 10px;
}
.cat-promote .title{
    font-size: 22px;
}
.cat-promote .item{
    padding: 5px;
}

.cat-promote .card{
    height: 300px;
    background-color: #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.footer{
    text-align: center;
    color: #999;
    background-color: #eee;
    padding: 30px 0;
}
.foot a{
    color: #999;
}