底部做法与思路比较简单
1. 直接用footer标签做一块区域
<footer id="foot">
<div class="container">
<p>
阿里巴巴集团|淘宝网|天猫|聚划算|全球速卖通|阿里巴巴国际交易市场|1688|阿里妈妈|阿里旅行 · 去啊|阿里云计算|YunOS|阿里通信|一淘|万网|高德|UC|友盟虾米 | 天天动听 | 来往 | 钉钉 | 支付宝</p>
<p>关于淘宝合作伙伴营销中心廉正举报联系客服开放平台诚征英才联系我们网站地图法律声明© 2003-2016 Taobao.com 版权所有</p>
<p>网络文化经营许可证：浙网文[2013]0268-027号|增值电信业务经营许可证：浙B2-20080224-1|信息网络传播视听节目许可证：1109364号| 互联网违法和不良信息举报电话:0571-81683755 blxx@list.alibaba-inc.com</p>
</div>
</footer>
2.设置这个footer标签的边框线 与边框线的距离
#foot{
background-color: rgb(243,243,243);
color: #666;
border-top:1px solid #ccc;
padding: 20px;
}
注意：不要设置高度直接设置padding
第二类型和我们遇到上一次的情况一样，思路也是1分2,2分4,4分6的做法
第一步设置一个大的div
<div class="tab1">
</div>
第二步先解决一个盒子的布局，其他照葫芦画瓢
<div class="tab2">
<div class="container">
<div class="row">
<div ><!--一分为二，也就是图片一个盒子，文本一个盒子-->
<img src="img/tab2.png" alt="">
</div>
<div>
<h3>强大的学习体系</h3>
<p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
</div>
</div>
</div>
</div>
第三步利用栅格系统来分布div布局12分分做两下
<div class="tab2"><div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 tab2-img">
<img src="img/tab2.png" class="" alt="">
</div>
<div class="text col-md-6 col-sm-6 tab2-text">
<h3>强大的学习体系</h3>
<p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
</div>
</div>
</div>
</div> 第四步 重复上面做法
div class="tab3">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="img/tab3.png" class="" alt="">
</div>
<div class="text col-md-6 col-sm-6">
<h3>完美的管理方式</h3>
<p>最新的管理培训方案，让您的企业赶超同行。</p>
</div>
</div>
</div>
</div>
因为图片的太大，那么解决的办法？
百分比来设置，原因很简单，你的网页如果只有手机那么大时，它会等比列缩小。
.tab2 img {
width: 40%;
height: 40%;
}
.tab3 img {
width: 65%;
height: 65%;
}
那么没设置高度时，你怎么让它也可以等比缩小？方法就是直接在img的class属性加上img-responsive(联想记忆法 热 (re) 死 (s)老婆(po)的脑门（n）是陈思诚(si)唱唯（v）一（e）)的图片响应）代码如下：
<img src="img/tab3.png" class="auto img-responsive " alt="">
图片居中怎么居中?利用bootstarp中center-block即可
<img src="img/tab3.png" class="auto img-responsive center-block " alt="">
文本如何居中？直接利用text-align:center;
.tab3 {
padding: 60px 20px;
text-align: center;
}
这里又出现一个问题就是移动端页面时，响应式不够好？如何解决？
方法如下：媒体自适应中调如下：
@media (min-width: 768px) {
.tab-h2 {
font-size: 26px;
}
.tab-p {
font-size: 16px;
}
.text h3 {
font-size: 22px;
}
.text p {
font-size: 15px;
}
.tab2-text {
float: left;
}
.tab2-img {
float: right;
}
.jumbotron h1 {
font-size: 30px;
}
.jumbotron h4 {
font-size: 16px;
}
.info-content h4 {
font-size: 16px;
}
}
/* 中等屏幕（桌面显示器，大于等于992px） */
@media (min-width: 992px) {
.tab-h2 {
font-size: 28px;
}
.tab-p {
font-size: 17px;
}
.text h3 {
font-size: 24px;
}
.text p {
font-size: 16px;
}
.jumbotron h1 {
font-size: 33px;
}
.jumbotron h4 {
font-size: 17px;
}
.info-content h4 {
font-size: 18px;
}
}
/* 大屏幕（大桌面显示器，大于等于1200px） */
@media (min-width: 1200px) {
.tab-h2 {
font-size: 30px;
}
.tab-p {
font-size: 18px;
}
.text h3 {
font-size: 26px;
}
.text p {
font-size: 18px;//此行设置大屏幕的字体大小
}
.jumbotron h1 {
font-size: 36px;
}
.jumbotron h4 {
font-size: 18px;
}
.info-content h4 {
font-size: 20px;
}
}