响应式布局---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;
}

3.2.4 中间部分

<!-- article -->
<article class="col-md-7">
    <!-- 新闻 -->
    <div class="news"></div>
    <!-- 发表 -->
    <div class="publish"></div>
</article>

新闻模块

做响应式不必太关心高度，把高度写定，不必担心屏幕缩放时高度满足不了自适应，因为屏幕变化时布局模式会改变。主要关心宽度，让宽度满足自适应。

<!-- 新闻 -->
<div class="news clearfix">
    <!-- bootstrap已经定义好了清除浮动 -->
    <ul>
        <!-- 注意第一个li和其他几个li样式的不同 -->
        <li>
            <a href="#">
                <img src="upload/lg.png" alt="">
                <p>阿里百秀</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="upload/1.jpg" alt="">
                <p>奇了 程度一小区护士长得像马云 市民纷纷求合影</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="upload/2.jpg" alt="">
                <p>奇了 程度一小区护士长得像马云 市民纷纷求合影</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="upload/3.jpg" alt="">
                <p>奇了 程度一小区护士长得像马云 市民纷纷求合影</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="upload/4.jpg" alt="">
                <p>奇了 程度一小区护士长得像马云 市民纷纷求合影</p>
            </a>
        </li>
    </ul>
</div>

/* 新闻 */
.news li {
    width: 25%;
    float: left;
    height: 128px;
    /* 提前采用了C3盒子模型 为了使图片之间留有空隙，且又不会出现盒子被记下来的情况 (千万不可以用margin，否则会有li被挤掉下来)*/
    padding-right: 10px;
    margin-bottom: 10px;
}

.news li:nth-child(1) {
    width: 50%;
    height: 266px;
}

.news li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.news li a img {
    height: 100%;
    width: 100%;
}

.news li a p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41px;
    padding: 5px 10px;
    /* 去除bootstrap中p默认的下外边距 */
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;
}

.news li:nth-child(1) p {
    /* 第一个li里面的p */
    padding: 0 10px;
    line-height: 41px;
    font-size: 20px;
}

发表模块

bootstrap中如果需要某个像素（本例需要24px）的标题，可以打开booststrap网站-->css--->排版：发现24px的标题对应的是h3，所以可以直接用j3进行处理。
修改文字颜色（本例需要灰色）：可以打开booststrap网站-->css--->辅助类--->情境文本颜色：复制灰色对应的类名class="text-muted"，并应用就可以了。

<!-- 发表 -->
<div class="publish">
    <!-- 该模块小屏幕以上结构都不变 -->
    <div class="row">
        <div class="col-sm-9">
            <!-- 24px的标题 -->
            <h3>生活馆 关于指甲的10个健康知识 你知道几个</h3>
            <!-- 将p的类容变成灰色 class="text-muted"-->
            <p class="text-muted">alibaixiu 发布于 2015-11-23</p>
            <p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) 标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</p>
        </div>
        <div class="col-sm-3 pic">
            <img src="upload/3.jpg" alt="">
        </div>
    </div>
</div>

/* 发表 */
.publish {
    border-top: 1px solid #ccc;
}

.publish .row {
    border-bottom: 1px solid #ccc;
}

.pic {
    margin-top: 10px;
}

.pic img {
    width: 100%;
}

3.2.5 左侧部分

<!-- aside -->
<aside class="col-md-3">
    <a href="#" class="banner">
        <img src="upload/zgboke.jpg" alt="">
    </a>
    <a href="#" class="hot">
        <!-- btn btn-primary是按钮样式 -->
        <span class="btn btn-primary">热搜</span>
        <!-- text-primary是颜色样式(辅助类) -->
        <h4 class="text-primary">欢迎加入中国播客联盟</h4>
        <!-- text-primary是颜色样式(辅助类) -->
        <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
    </a>
</aside>

/* 左侧部分 */
.banner img {
    width: 100%;
}

.hot {
    display: block;
    padding: 0 20px 20px;
    margin-top: 20px;
    border: 1px solid #ccc;
}

.hot span {
    /* 修改bootstrap预先定义的按钮类btn btn-primary */
    border-radius: 0;
    margin-bottom: 20px;
}

.hot p {
    font-size: 12px;
}

到此中等屏幕以上布局完成了。

下次看第24节

posted @ 2020-01-07 15:55 deer_cen 阅读(767) 评论(0) 收藏举报

刷新页面返回顶部

deer_cen