移动Web-03-流式布局

移动端布局核心
1.水平方向不能出现滚动条(禁止缩放，元素宽度超过视口的宽度)
2.需要适配宽度，高度使用固定值（高度允许出现滚动条）

百分比布局（流式布局）：宽度使用百分比，高度使用px
3.移动端盒子模型使用内减模型： box-sizing: border-box;
避免由于border和padding导致的水平滚动条的问题

拓展:
手机端的a标签会有背景颜色
解决方法:给a标签添加如下代码

-webkit-tap-highlight-color: transparent;

京东首页-练习案例

html

    
    
    
    
    
    
    
    



    
    

        
        

            
            
            登录
        
        
        

            
        
        
        

            

                
京东超市
                
京东超市
                
京东超市
                
京东超市
                
京东超市
                
京东超市
                
京东超市
                
京东超市
                
京东超市
                
京东超市
            
        
        
        

            热门  价格太贵买不起
            更多
        
        
        

            
            
            
        
        
        

            

            

                
                    二手寻宝
                    跳蚤市场逛一逛
                    
                    
                
                
                    二手寻宝
                    跳蚤市场逛一逛
                    
                    
                
            
            

                
                    爱是一道光
                    绿到你发慌
                    
                
                
                    爱是一道光
                    绿到你发慌
                    
                
                
                    爱是一道光
                    绿到你发慌
                    
                
                
                    爱是一道光
                    绿到你发慌
                    
                
            
        
        
        

            
            
            
            
            
        
    

c’ss

/* 版心 */
.container{
    width: 100%;
    /* 限制pc端版心范围 */
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
}

/* 1-搜索栏 */
.top-bar{
    /* 固定定位相对于页面，想要居中显示也要限制版心范围 */
    min-width: 320px;
    max-width: 750px;
  
    position: fixed;
    top:0;
    width: 100%;
    height: 44px;
    background-color: #E72E27;
    padding: 0px 50px;
}

.top-bar .menu{
    position: absolute;
    left: 14px;
    top:14px;
    width: 20px;
    height: 18px;
    background: url(../images/jd_icons.png) no-repeat;
    background-size: 250px 200px;
}

.top-bar input{
    width: 100%;
    height: 30px;
    margin-top: 7px;
    padding-left: 10px;
    border-radius: 15px;
}

.top-bar .login{
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 12px 12px auto;
    color: #fff;
}

/* 2-banner栏 */
.banner{
    width: 100%;
    /* 注意点：固定定位fixed会脱标
       解决方案：设置元素margin撑开脱标的高度
    */
    margin-top: 44px;
}

.banner img{
    width: 100%;
}

/* 3.导航栏 */

.nav-bar{
    width: 100%;
    height: 175px;
}


.nav-bar ul{
    width: 100%;
}

.nav-bar ul>li{
    float: left;
    width: 20%;
    text-align: center;
}

.nav-bar ul>li img{
    display: block;
    width: 40px;
    height: 40px;
    margin: 10px auto 5px;
}

/* 4.京东快报 */
.jd-news{
    width: 100%;
    height: 16px;
    background: url(../images/jd_icons.png) no-repeat 8px -22px;
    background-size: 250px 200px;
    text-align: center;
}

.jd-news>span>span{
    color: red;
}

.jd-news a{
    float: right;
    padding: 0px 5px;
    border-left: 1px solid #E0E0E0;
}

/* 5.活动列表 */
.adv-list{
    width: 100%;
    margin: 10px 0px;
}

.adv-list a{
    display: block;
    float: left;
    width: 50%;
    padding: 0px 5px;
}

.adv-list a:nth-child(n+2){
    width: 25%;
    border-left: 1px solid #e0e0e0;
    
}

.adv-list a img{
    width: 100%;
}

/* 6.商品列表 */

.good-list{
    width: 100%;
    /* 解决底部栏固定定位脱标问题 */
    margin-bottom: 44px;
}

/* 商品头部 */
.good-list .good-title{
    width: 100%;
    height: 35px;
    background-color: #F5F5F5;
}

.good-list .good-title img{
    display: block;
    height: 100%;
    margin: 0 auto;
}

/* 商品列表01 */
.good-list .good-list01{
    width: 100%;
}

.good-list .good-list01 a{
    display: block;
    float: left;
    width: 50%;
    text-align: center;
}

.good-list .good-list01 a:nth-child(2){
    border-left: 1px solid #e0e0e0;
}

.good-list .good-list01 a span{
    display: block;
}

.good-list .good-list01 a span:nth-child(1){
    font-size: 16px;
}

.good-list .good-list01 a span:nth-child(2){
    color: #779CFF;
}

.good-list .good-list01 a img{
    float: left;
    width: 50%;
    padding: 5px;
}

/* 商品列表02 */

.good-list .good-list02{
    width: 100%;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.good-list .good-list02 a{
    display: block;
    float: left;
    width: 25%;
    text-align: left;
    padding: 5px;
}

.good-list .good-list02 a:nth-child(n+2){
    border-left: 1px solid #e0e0e0;
}

.good-list .good-list02 a span{
    display: block;
}

.good-list .good-list02 a span:nth-child(1){
    font-size: 16px;
}

.good-list .good-list02 a span:nth-child(2){
    color: green;
}

.good-list .good-list02 a img{
    width: 100%;
}

/* 7.底部栏 */
.bottom-bar{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 44px;
    background-color: #fff;
}

.bottom-bar a{
    float: left;
    width: 20%;
}

.bottom-bar a img{
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto;
}