笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、和经验
响应式布局（阿里百秀项目为例）
使用一套代码自动响应浏览器窗口变化
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕(手机) | <768px |
| 小屏设备(平板) | >=768px~<992px |
| 中等屏幕(桌面显示器) | >=992px~<1200px |
| 宽屏设备(大桌面显示器) | >=1200px |
响应式布局容器
响应式需要一个父级作为布局容器，来配合子集元素实现变化
原理是，在不同屏幕尺寸下，通过媒体查询来改变布局容器大小，再更改里面子元素的排列方式和大小，从而实现不同屏幕尺寸下效果的变化
平时我们的响应式尺寸划分
- 超小屏幕(手机，小于768px) :设置宽度为100%
- 小屏幕(平板，大于等于768px) :设置宽度为750px
- 中等屏幕(桌面显示器，大于等于992px) : 宽度设置为970px
- 大屏幕(大桌面显示器，大于等于1200px) :宽度设置为1170px
但是我们也可以根据实际情况自己定义划分
响应式导航案例
需求：
- 当我们屏幕大于等于800像素，我们给nav宽度为800px,因为里面子盒子需要浮动，所 以nav需要清除浮动。
- nav里面包含8个小i盒子，每个盒子的宽度定为100px，高度为 30px,浮动- -行显示。
- 当我们屏幕缩放，宽度小于800像素的时候，nav盒子 宽度修改为100%宽度。
- nav里面的8个小i，宽度修改为33.33%，这样一行就只能显示3个小i ,剩余下行显示。
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 800px;
margin: 0 auto;
background: green;
overflow: hidden;
list-style: none;
}
.content li {
float: left;
width: 100px;
height: 30px;
font-size: 16px;
line-height: 30px;
color: #fff;
text-align: center;
}
/* 媒体查询变化 */
@media screen and (max-width: 799px) {
.content {
width: 100%;
}
.content li {
width: 33.33%;
}
}
</style>
<!-- 容器 -->
<ul class="content">
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
bootstrap开发框架
bootstrap简介
Bootstrap来自Twitter (推特) ,是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
- 中文官网: www.bootcss.com/
- 官网: getbootstrap.com/
框架:顾名思义就是一套架构， 它有一套比较完整的网页功能解决方案， 而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点
- 标准化的html+ css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈，不断的更新迭代
- 让开发更简单，提高了开发的效率
版本更迭
- 2.x.x:停止维护，兼容性好,代码不够简洁，功能不够完善。
- 3.x.x: 目前使用最多,稳定，但是放弃了IE6-1E7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB项目。
- 4.x.x :最新版，目前还不是很流行
使用方法
Bootstrap使用四步曲:
-
创建文件夹结构
index.html + css文件夹 + images文件夹 + bootstrap文件夹
-
创建html骨架结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 要求在使用IE浏览器的时候按照最新的edge内核来渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置：视口宽度和设备一致..... --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>网页标题</title> <!-- 引入Bootstrap --> <link href="./bootstrap/css/bootstrap.min.css"> <!-- 下面这两行解决ie9以下浏览器对html5新增标签的不识别，并号致CSS不起作用的问题,解决ie9以下浏览器对css3 Media Query的不识别 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> </body> </html> -
引入相关样式文件（上面代码已经引入）
-
书写内容
- 可以直接拿Bootstrap预先定义好的样式来使用
- 修改Bootstrap原来的样式，注意权重问题
- 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
Bootstrap布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container 容器，它提供了两个作此用处的 类。
- container类
- 响应式布局的容器固定宽度
- 大屏(>=1200px)宽度定为1170px
- 中屏(>=992px)宽度定为970px
- 小屏(>=768px)宽度定为750px
- 超小屏(100%)
- container-fluid类
- 流式布局容器，百分比宽度
- 占据全部父盒子宽度
- 适合制作移动端页面
栅格系统
也叫网格系统，指将页面宽度平均划分等宽的列，通过定义元素占有多少列来布局
Bootstrap提供了-套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport) 尺寸的增加，系统会自动分为最多12列。
参数选项
栅格系统使用行（row）和列（colimn）的组合来搭建结构，Bootstrap在行内使用.row类名可以实现行的效果
| 超小屏幕(手机)<768px | 小屏幕(平板)>=768px | 中等屏幕>=992px | 宽屏设备>=1200px | |
|---|---|---|---|---|
| .container最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs-数字 | .col-am-数字 | .col-md-数字 | .col-lg-数字 |
<div class="container">
<!-- 平均分布四列 -->
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<!-- 每列占用分数不同 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<!-- 总份数不足,剩余的份数空间会留空 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
<!-- 总份数超过12,宽度不够的会换行显示，类似于浮动 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-4">4</div>
</div>
<!-- 可以书写多个屏幕宽度下的份数，这样在不同宽度下会使用不同的份数显示 -->
<div class="row">
<div class="col-lg-6 col-md-6">1</div>
<div class="col-lg-2 col-md-6">2</div>
<div class="col-lg-2 col-md-6">3</div>
<div class="col-lg-4 col-md-6">4</div>
</div>
</div>
注意：
- 份数是按照屏幕（容器）宽度平均划分为12等份
.row可以去除容器的默认15px左右内边距- 每一列会默认存在一个15px的左右内边距
- 如果一行内所以列份数加起来<12，则剩余的份数会被空置
- 如果一行内所以列份数加起来>12，宽度不够的元素会换行（类似于浮动），后面的元素也会跟着换行
- 可以给列写多个屏幕尺寸下的类名，这样就可以自动适配不同尺寸
栅格嵌套（列嵌套）
列也可以当做行来使用，这是给列增加。row属性值即可
<div class="container">
<!-- 平均分布四列 -->
<div class="row">
<div class="col-lg-3 row">
<p class="col-lg-6">1</p>
<p class="col-lg-6">2</p>
</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
列偏移
给列添加.col-md-offset-数字可以设置列偏移，原理是通过给元素添加一个左边距
<div class="container">
<div class="row">
<!-- 左右布局 -->
<div class="col-lg-3">3</div>
<div class="col-lg-3 col-lg-offset-6">4</div>
<!-- 水平居中 -->
<div class="col-lg-8 col-lg-offset-2">4</div>
</div>
</div>
列排序
可以设置元素的移动col-md-push（向后推）col-md-pull（向前腿）
注意：这种情况依旧会收到html结构层叠用的影响，后面的元素依旧回压盖在前面元素上面
<div class="row">
<!-- 第一个向后推8份，第二个向前拉4份 -->
<div class="col-lg-4 col-lg-push-8">1</div>
<div class="col-lg-8 col-lg-pull-4">2</div>
</div>
bootstrap响应式工具
可以先泽元素在那种尺寸的屏幕下显示或者隐藏
显示内容
.visible-xs：仅在超小屏下显示，其他尺寸下不显示.visible-sm：仅在小屏下显示，其他尺寸下不显示.visible-md：仅在超中等屏下显示，其他尺寸下不显示.visible-lg：仅在大屏幕下显示，其他尺寸下不显示
隐藏内容
.hidden-xs：仅在超小屏下隐藏，其他尺寸下显示.hidden-sm：仅在小屏下隐藏，其他尺寸下显示.hidden-md：仅在超中等屏下隐藏，其他尺寸下显示.hidden-lg：仅在大屏幕下隐藏，其他尺寸下显示
<div class="row">
<!-- 仅在大屏幕下隐藏该元素 -->
<div class="col-lg-4 hidden-lg">1</div>
<!-- 仅在小屏幕下显示该元素 -->
<div class="col-lg-8 visible-sm">2</div>
</div>
阿里百秀项目制作
技术选型
- 方案：响应式开发，一套代码适配所有页面
- 技术：bootstrap框架
- 设计图：1280px设计尺寸
页面结构分析（大屏幕下为例）
从左到右可以分为三块，左侧阿里百秀导航、中间内容部分、右侧链接，从左到右可划分为2、7、3份
屏幕尺寸切换分析
- 屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了,md是 大于等于970以上
- 屏幕缩放发现小屏幕布局发生变化,因此我们需要为小屏幕根据需求改变布局
- 屏幕缩放发现超小屏幕布局又发生变化,因此我们需要为超小屏幕根据需求改变布局
策略：我们先布局md以上的pc端布局,最后根据实际需求在修改小屏幕和超小屏幕的特殊 布局样式
准备工作
- 搭建文件结构
- 修改HTML结构
- 引入样式文件（已经集成了初始化，不需要再次引入初始化）
- 书写内容
修改容器（conrianer）宽度
因为本效果图采取1280的宽度,而 Bootstrap里面 contaIner宽度最大为1170px,因此我们需要手动改下 contaIner宽度（让屏幕宽度达到1280px的时候容器宽度也达到1280px）
/* 设置在屏幕宽度 >= 1280px的情况下容器宽度设置为1280px */
@media screen and (min-width: 1280px) {
.container {
width: 1280px;
}
}
整体大结构
刚刚已经分析过，整体大结构可以分为三大块，左侧三分，中间7份，右侧3份
<div class="container">
<div class="row">
<header class="col-md-2">头部</header>
<main class="col-md-7">内容区域</main>
<saide class="col-md-3">右边栏</saide>
</div>
</div>
/* body样式 */
body {
background: #f5f5f5;
}
/* container样式 */
.container {
background: #ffffff;
}
左侧导航
结构分析：
从上到下可分为两块，最上面一个logo，下面一个导航栏，导航栏里面是用a标签制作即可
<!-- 头部开始 -->
<header class="col-md-2">
<!-- logo -->
<h1 class="logo">
<a href="index.html">
<img src="./images/logo.png" alt="">
</a>
</h1>
<!-- 导航栏 -->
<nav>
<a href="#" class="glyphicon glyphicon-camera
">生活馆</a>
<a href="#" class="glyphicon glyphicon-picture
">自然汇</a>
<a href="#" class="glyphicon glyphicon-phone">科技潮</a>
<a href="#" class="glyphicon glyphicon-sunglasses
">奇趣事</a>
<a href="#" class="glyphicon glyphicon-glass
">美食节</a>
</nav>
</header>
<!-- 头部结束 -->
/* body样式 */
body {
background: #f5f5f5;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
a {
text-decoration: none !important;
color: #666;
}
/* container样式 */
/* 整体页面背景色 */
.container {
background: #ffffff;
}
/* 去除边距 */
.container .row header {
padding-left: 0;
}
/* logo背景色 */
.container .row header .logo {
background: #3274a3;
}
/* a标签转块 */
.container .row header .logo a {
display: block;
}
/* logo图片宽度 */
.container .row header .logo a img {
width: 100%;
}
/* 导航背景和边框 */
.container .row header nav {
border-bottom: 1px solid #ccc;
background: #eeeeee;
}
/* a标签 */
.container .row header nav a {
display: block;
height: 50px;
padding-left: 30px;
font-size: 16px;
line-height: 50px;
}
/* 鼠标划过 */
.container .row header nav a:hover {
background: #ffffff;
color: #333;
}
/* 小图片 */
.container .row header nav a::before {
margin-right: 5px;
vertical-align: middle;
}
中间main区域
顶部新闻news区域
结构分析
一个大盒子包裹五个小盒子，盒子可以设置浮动效果，第一个盒子效果不同可以单独设置，每个盒子底部有一个文字
<!-- 头部新闻 list-unstyled清除ul样式 clearfix清除浮动 -->
<ul class="news list-unstyled clearfix">
<li>
<a href="#">
<img src="./images/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/1.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/2.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/3.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/4.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
</ul>
/* news区域 */
/* 整体样式 */
.container .row main .news {
width: 100%;
border-bottom: 1px solid #ccc;
}
/* 每个新闻块 */
.container .row main .news li {
float: left;
width: 25%;
height: 128px;
padding-right: 10px;
margin-bottom: 10px;
}
/* 第一个新闻块 */
.container .row main .news li:nth-child(1) {
width: 50%;
height: 266px;
}
/* 每个新闻 */
.container .row main .news li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* 新闻里面的图片 */
.container .row main .news li a img{
display: block;
width: 100%;
height: 100%;
}
/* 新闻里面的文字 */
.container .row main .news li a p {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 41px;
margin: 0;
padding: 5px 10px 0;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 12px;
line-height: 18px;
}
/* 第一个新闻的文字 */
.container .row main .news li:nth-child(1) a p {
padding-top: 0;
line-height: 41px;
font-size: 20px;
}
底部文章
结构分析
这个区域可以看作是一行结构，下面的结构都一样，写好一行之后直接复制就可以了。一行里面可以使用栅格布局，左侧为9份，右侧3份，样式可以使用bootstorp里面自定义的样式布局
<div class="main-bottom">
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted">alibaixiu 发布于 2015-11-23</p>
<p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) 标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3">
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
</div>
/* 新闻文章 */
.container .row main .main-bottom .row {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.container .row main .main-bottom .row div:nth-child(2) img {
padding-top: 10px;
}
侧边栏
结构分析：整体上下布局，两个a标签包裹
<!-- 右边栏开始 -->
<saide class="col-md-3">
<!-- 顶部 -->
<a href="#">
<img src="./images/zgboke.jpg" class="img-responsive">
</a>
<!-- 底部 -->
<a href="#">
<!-- 按钮预设样式、h4预设样式、p预设样式 -->
<button class="btn btn-primary">热搜</button>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
</a>
</saide>
<!-- 右边栏结束 -->
/* 侧边栏 */
.container .row saide a:nth-child(1) {
display: block;
margin-bottom: 20px;
}
.container .row saide a:nth-child(2) {
display: block;
border: 1px solid #ccc;
padding: 0 20px 20px;
}
.container .row saide a:nth-child(2) button {
border-radius: 0;
margin-bottom: 10px;
}
.container .row saide a:nth-child(2) p {
font-size: 12px;
}
其他屏幕样式修改
使用媒体查询来修改样式，使用响应式显示隐藏元素，下面贴出媒体查询部分
/* 媒体查询 */
/* 小屏幕及以上 */
@media screen and (min-width: 768px) {
.container .row header .logo img {
margin: 0 auto;
}
}
/* 小屏幕和超小屏幕 */
@media screen and (max-width: 991px) {
.container .row header nav a {
float: left;
width: 20%;
}
}
/* 超小屏幕 */
@media screen and (max-width: 767px) {
.container .row header nav a {
font-size: 14px;
}
.container .row main .news li {
width: 50%;
}
.container .row main .news li:nth-child(1) {
width: 100%;
}
.container .row main .main-bottom .row div h3 {
font-size: 16px;
}
}
整个代码
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>网页标题</title>
<!-- 引入Bootstrap -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<!-- 头部开始 -->
<header class="col-md-2">
<!-- logo -->
<h1 class="logo">
<a href="index.html">
<img src="./images/logo.png" class="img-responsive hidden-xs">
<span class="visible-xs">阿里百秀</span>
</a>
</h1>
<!-- 导航栏 -->
<nav>
<a href="#" class="glyphicon glyphicon-camera
">生活馆</a>
<a href="#" class="glyphicon glyphicon-picture
">自然汇</a>
<a href="#" class="glyphicon glyphicon-phone">科技潮</a>
<a href="#" class="glyphicon glyphicon-sunglasses
">奇趣事</a>
<a href="#" class="glyphicon glyphicon-glass
">美食节</a>
</nav>
</header>
<!-- 头部结束 -->
<!-- 内容区域开始 -->
<main class="col-md-7">
<!-- 头部新闻 list-unstyled清除ul样式 clearfix清除浮动 -->
<ul class="news list-unstyled clearfix">
<li>
<a href="#">
<img src="./images/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/1.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/2.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/3.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/4.jpg" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
</ul>
<!-- 底部文章 -->
<div class="main-bottom">
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
<!-- 一行新闻 -->
<div class="row">
<!-- 左侧文字9份 -->
<div class="col-sm-9">
<!-- 使用预设的h3样式 -->
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<!-- 使用预设的p样式 添加文字颜色类名 -->
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>
</div>
<!-- 右侧图片3份 -->
<div class="col-sm-3 hidden-xs" >
<!-- img添加响应式图片类名 -->
<img src="./images/3.jpg" class="img-responsive">
</div>
</div>
</div>
</main>
<!-- 内容区域结束 -->
<!-- 右边栏开始 -->
<saide class="col-md-3">
<!-- 顶部 -->
<a href="#">
<img src="./images/zgboke.jpg" class="img-responsive">
</a>
<!-- 底部 -->
<a href="#">
<!-- 按钮预设样式、h4预设样式、p预设样式 -->
<button class="btn btn-primary">热搜</button>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
</a>
</saide>
<!-- 右边栏结束 -->
</div>
</div>
</body>
</html>
/* 设置在屏幕宽度 >= 1280px的情况下容器宽度设置为1280px */
@media screen and (min-width: 1280px) {
.container {
width: 1280px;
}
}
/* body样式 */
body {
background: #f5f5f5;
}
/* h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
} */
a {
text-decoration: none !important;
color: #666;
}
/* container样式 */
/* 整体页面背景色 */
.container {
background: #ffffff;
}
/* 去除边距 */
.container .row header {
padding-left: 0;
}
/* logo背景色 */
.container .row header .logo {
margin: 0;
background: #3274a3;
}
/* a标签转块 */
.container .row header .logo a {
display: block;
}
.container .row header .logo a span {
display: block;
height: 50px;
width: 100%;
line-height: 50px;
font-size: 18px;
color: #fff;
text-align: center;
}
/* 导航背景和边框 */
.container .row header nav {
border-bottom: 1px solid #ccc;
background: #eeeeee;
}
/* a标签 */
.container .row header nav a {
display: block;
height: 50px;
padding-left: 30px;
font-size: 16px;
line-height: 50px;
}
/* 鼠标划过 */
.container .row header nav a:hover {
background: #ffffff;
color: #333;
}
/* 小图片 */
.container .row header nav a::before {
margin-right: 5px;
vertical-align: middle;
}
/* news区域 */
/* 整体样式 */
.container .row main .news {
width: 100%;
border-bottom: 1px solid #ccc;
}
/* 每个新闻块 */
.container .row main .news li {
float: left;
width: 25%;
height: 128px;
padding-right: 10px;
margin-bottom: 10px;
}
/* 第一个新闻块 */
.container .row main .news li:nth-child(1) {
width: 50%;
height: 266px;
}
/* 每个新闻 */
.container .row main .news li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* 新闻里面的图片 */
.container .row main .news li a img{
display: block;
width: 100%;
height: 100%;
}
/* 新闻里面的文字 */
.container .row main .news li a p {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 41px;
margin: 0;
padding: 5px 10px 0;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 12px;
line-height: 18px;
}
/* 第一个新闻的文字 */
.container .row main .news li:nth-child(1) a p {
padding-top: 0;
line-height: 41px;
font-size: 20px;
}
/* 新闻文章 */
.container .row main .main-bottom .row {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.container .row main .main-bottom .row div:nth-child(2) img {
padding-top: 10px;
}
/* 侧边栏 */
.container .row saide a:nth-child(1) {
display: block;
margin-bottom: 20px;
}
.container .row saide a:nth-child(2) {
display: block;
border: 1px solid #ccc;
padding: 0 20px 20px;
}
.container .row saide a:nth-child(2) button {
border-radius: 0;
margin-bottom: 10px;
}
.container .row saide a:nth-child(2) p {
font-size: 12px;
}
/* 媒体查询 */
/* 小屏幕及以上 */
@media screen and (min-width: 768px) {
.container .row header .logo img {
margin: 0 auto;
}
}
/* 小屏幕和超小屏幕 */
@media screen and (max-width: 991px) {
.container .row header nav a {
float: left;
width: 20%;
}
}
/* 超小屏幕 */
@media screen and (max-width: 767px) {
.container .row header nav a {
font-size: 14px;
}
.container .row main .news li {
width: 50%;
}
.container .row main .news li:nth-child(1) {
width: 100%;
}
.container .row main .main-bottom .row div h3 {
font-size: 16px;
}
}
补充
多行文本超出省略号：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
