Web_7 电商站首页布局

1 效果演示

电商首页效果.gif

2 CSS技巧

【1】通用CSS样式
编写html之前可以先规范好通用的CSS样式，比如网页的整体布局居中，可以使用container包裹器包裹，设定container的max-width为1080px，使网页自适应浏览器宽度；比如左右浮动的样式、母元素清除浮动的样式；设置多列并列的样式等，然后直接在div中添加类选择器就可以了；
【2】卡片组
把一整块内容放到container中，.col-x使其多列并列；
设置item的padding，将内容作为一个整体设置背景色等样式，使每个卡片有间隔——内容与内容之前的padding间隔；
【3】快捷键
Shift + Ctrl + I // 打开网页控制台
Ctrl + D //多光标同步输入
Shift+Alt + F //代码自动对齐
【4】图片生成器
https://dummyimage.com/1000x500/00bcd4/fff
直接修改网址中的颜色和尺寸即可
【5】添加背景颜色
在网页结构化分时，可以巧妙地给所有元素添加一个透明的背景颜色，这样可以通过颜色的深浅结构清晰的分辨出网页结构

*{
    background: rgba(255, 0, 0, .1); 
}

image.png

3 代码

3.1 index.html

    
    
    
    
    
    
    



    
    

        

            

                首页
            
            

                我的订单
                收藏夹
                登录
                注册
            
        
    
    
    

        

            
香菇街
            
搜索
            
我的购物车
        
    
    
    

        

            

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

                
                

                    

                        
                    
                    

                        
                    
                
            
            

                

                    

                    
                    
你好，欢迎剁手~
                
                

                    
公告
                    

                        Lorem hupajju ddhak molestiae alias fugiat, incidunt illum. Magni ex assumenda veritatis quo
                        vel. Nesciunt magni placeat ipsum quia praesentium?
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta totam quos ducimus veritatis
                        voluptatum distinctio sint, consequatur corrupti vitae. Qui quos id, omnis inventore alias
                        tempore ipsam voluptatibus odit accusantium?
                
            
        
    
    
    

        

            
女装
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            

        
        

            
美妆
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            

        
        

            
男装
            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
            

        
    
    
    

        

            链接
            链接
            链接
            链接

            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        
    

3.2 index.css

/*通用CSS，包括网页字体、颜色，container容器居中、大小，浮动，清除浮动，并列等*/
*{
    -webkit-box-sizing: border-box; /*以border开始算宽度*/
    box-sizing: border-box;
    transition:background 500ms;
}
body{
    font-size:14px;
    color:#444;
    background:#f9f9f9;
    line-height:1.7;
}
a{
    text-decoration: none;
}
/*图片宽度为母元素的宽度*/
img{
    display:block;
    max-width:100%;
}
.container{
    max-width:1080px;/*若窗口大于1080，就显示为1080；若窗口小于1080，就自适应为窗口的大小*/
    margin:0 auto;/*居中*/
}
.fl{
    float:left;
}
.fr{
    float:right;
}
/*清除浮动，否则高度为0，无法设置css样式*/
.clear-float:after,
.clear-float: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;
    float:left;
    min-height:1px;
}
.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:#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;
    color:#dd182d;
}
.header .search-bar{
    border:2px solid #dd182d;
    background:#dd182d;
}
.header .search-bar input,
.header .search-bar button{
    display:block;
    float:left;
    border:0;
    padding:10px;
    outline:0;
}
.header .search-bar input{
    width:80%;
}
.header .search-bar button{
    width:20%;
    background:#dd182d;
    color:#fff;
}
.header .search-bar input:focus{
    box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
}
.header .search-bar button:hover{
    cursor:pointer;
    background:#ce1829;

}
.header .cart{
    text-align: center;
}
.header .cart a{
    float:right;/*设置浮动后默认为块级元素*/
    padding:10px;
    background:#fff;
    border:2px solid #eee;
    width:80%;
    color:#dd182d;
}
/*主促销区*/
.main-promote{
    background:#dedede;
} 
.main-promote .cat{
    background:#6e6568;
    color:#fff;

}
.main-promote .cat .item{
    padding:14px 20px;
}
.main-promote .cat .item:hover{
    background:rgba(0,0,0,.1);
}
.main-promote .info{
    padding:10px;
    background:#fff;
    color:#888;
    box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.main-promote .info .avatar{
    width:50px;
    height:50px;
    background:#777;
    border-radius:50%;
    float:left;
    margin-right:10px;
}
.main-promote .info >*{
    margin-bottom:10px;
}
/*类别促销区*/
.sub-promote .title:before{/*小红杠*/
    content:"";
    display:inline-block;
    vertical-align:middle;/*纵向居中*/
    width:5px;
    height:30px;
    background:#dd182d;
    margin-right:10px;
}
.sub-promote .title{
    font-size:22px;
}
.sub-promote .item{
    padding:5px;
}
.sub-promote .card
{
    height:300px;
    background:#ccc;
    border-radius: 5px;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.sub-promote .card:hover{
    background:rgba(212, 208, 208, 0.842)
}
.sub-promote .card2{
    background:#7e7edd;
}
/*页脚*/
.footer{
    margin-top:30px;
    padding:30px 0;
    text-align: center;
    color:#999;
    background:#eee;
    
}
.footer a{
    color:#999;
}