响应式布局---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骨架结构和引入相关样式文件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
        解决ie9以下浏览器对html5新增标签不识别，并导致css不起作用的问题 这里采用的线上的形式，也可以下载下来采用线下的形式
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        解决ie9以下浏览器对css3 Media Query 的不识别问题
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入首页的css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

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 整体结构搭建

<body>
    <div class="container">
        <!-- container默认两边有padding值，而row可以消除containtainer两边的padding值 即row里面的内容可以占据container的padding部分-->
        <div class="row">
            <!-- header -->
            <header class="col-md-2">左侧</header>
            <!-- article -->
            <article class="col-md-7">中间</article>
            <!-- aside -->
            <aside class="col-md-3">右侧</aside>
        </div>
    </div>
</body>

3.2.3 左侧部分

<!-- header -->
<header class="col-md-2">
    <!-- 每个列col也有一个默认的左右padding值导致里面的内容无法贴合该盒子 所以先手动修改左边的padding值 右边的先不改-->
    <!-- 注意：修改的时候不要用col-md-2这个类名，这个类名不可动 应该利用header标签 同时注意提权  可以在审查元素里面查看-->
    <div class="logo">
        <a href="#">
            <img src="images/logo.png" alt="">
        </a>
    </div>
    <div class="nav">
        <ul>
            <!-- bootstrap的官网的组件中找到照相机字体图标对应的类名(glyphicon glyphicon-camera)引入即可 -->
            <!-- 字体图标的实现原理可以在检查元素中查看：a里面有一个before(bootstrap已经内部设定好的) 只要给a添加这个样式，就会给a生成一个before的伪元素 即在伪元素里将这个字体图标设定好了-->
            <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
            <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
            <li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
            <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
            <li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li>
        </ul>
    </div>
</header>

/* 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节

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

1 技术选型

2 页面布局分析

3 页面制作

3.1 创建文件夹结构

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

3.2 书写内容

3.2.0 公共样式

3.2.1 修改container宽度

3.2.2 整体结构搭建

3.2.3 左侧部分

猜你喜欢