响应式布局---4. 案例：阿里百秀

1 技术选型

方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图：本设计图采用1280px设计尺寸

2 页面布局分析

• 屏幕缩放发现大屏幕和中屏幕布局一致，因此列定义为col-md-即可。
• 屏幕缩放发现小屏幕布局发生变化，因此需要为小屏幕根据需求改变布局。
• 屏幕缩放发现超小屏幕布局发生变化，因此需要为超小屏幕根据需求改变布局。
• 策略：我们先布局md以上的pc端布局，最后更加需求再修改小屏幕和超小屏幕布局。

3 页面制作

Bootstrap使用4步曲：

3.1 创建文件夹结构

• 一级：alibaixiu
• 二级：alibaixiu（css /images /upload /bootstrap /index.html）

• 三级：css（index.css）; bootstrap（css /fonts / js）

  3.1 创建html骨架结构和引入相关样式文件

3.2 书写内容

3.2.0 公共样式

3.2.1 修改container宽度

本设计图采用的是1280px设计，而bootstrap里面的container宽度最大为1170px,因此需要手动修改下container宽度,于是在index.css中写入：

/* 修改container的最大宽度为 1280px */

@media screen and (min-width: 1280px) {
    /* 其他的屏幕宽度还是根据bootstrap自己默认的样式 划分  */
    .container {
        width: 1280px;
    }
}

3.2.2 整体结构搭建

    

        
        

            
            
左侧
            
            
中间
            
            
右侧
        
    

3.2.3 左侧部分

    
    
    

        
            
        
    
    

        

            
            
            
生活馆
            
自然汇
            
科技湖
            
奇趣事
            
美食节
        
    

/* header */
header {
    padding-left: 0!important;
}

.logo {
    /* 由于插入的logo.png是透明的，所以需要为其添加背景颜色 */
    background-color: #429ad9;
}

.logo img {
    /* 保证图片等比例缩放 */
    width: 100%;
}

.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}

.nav a:hover {
    background-color: #fff;
    color: #333;
}

.nav a::before {
    /* 在before中修改字体图标位置 */
    vertical-align: middle;
    padding-right: 5px;
}

下次看第20节