李炎恢的bootstrap项目实战首页内容下思路解析

底部做法与思路比较简单

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>

第二步先解决一个盒子的布局，其他照葫芦画瓢

<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）)的图片响应）代码如下：

图片居中怎么居中?利用bootstarp中center-block即可

文本如何居中？直接利用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;
}
}

李炎恢的bootstrap项目实战首页内容下思路解析相关推荐

李炎恢bootstrap写首页内容上思路解析
关于利用bootstrap做一张图片对应一段文字,这是李炎恢思路是一生二,二生三,三生万物的思路第一步做一个大盒子,这好比修房子,你要划出一块区域给我 <div class="ro ...
bootstrape实战案例_第二百五十二节，Bootstrap项目实战-首页
@charset "utf-8";/*通用--------------------------------------------------------------------- ...
第二百五十三节，Bootstrap项目实战-资讯
Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head><meta ...
10讲项目实战首页底部固定位置的分享、咨询功能
#10讲项目实战首页底部固定位置的分享.咨询功能 <!--整站建设步骤如下: 1.构建一个宽度100% 高度149px 这样一个长方形,为了保证浏览器的兼容,我们加了*{margin:0 ...
Bootstrap项目实战，响应式网站（李炎恢）
网站首页布局与实现一.文件准备 1.导入bootstrap 相关css 和js文件,以及jQuery <link rel="stylesheet" href=" ...
Vue3电商项目实战-首页模块7【26-首页主体-商品区块、27-首页主体-最新专题、28-首页主体-图片懒加载】
文章目录 26-首页主体-商品区块 27-首页主体-最新专题 28-首页主体-图片懒加载 26-首页主体-商品区块目的: 完成商品区域展示. 大致步骤: 准备一个商品盒子组件 home-goods ...
Android项目实战——智能农业开发及思路
一.前言智能农业这个项目是现在学习Android进行实战的必备之一,也是,智能农业这个项目虽说是移动开发的项目,但准确的来说更符合现在的物联网项目.智能农业项目需要用到模拟沙盘,我们需要从沙盘中获取 ...
Java练手项目实战——五子棋游戏实现思路及源码
目录一.实现功能二.实现思路 1.窗体设计 2.棋盘设计 3.棋子坐标存储设计 4.游戏状态设计 5.开始游戏与重新开始游戏的实现 6.悔棋的实现 7.认输的实现 8.游戏结束的判断,即是否有同色 ...
抖音实战~首页视频~下拉刷新
文章目录 1. 配置下拉刷新 2. 下拉刷新监听 3. tab监听索引 4. 控制台监控 5. 父子组件调用 6. 效果图 1. 配置下拉刷新在pages.json配置文件中添加如下配置: &quo ...

李炎恢的bootstrap项目实战首页内容下思路解析

李炎恢的bootstrap项目实战首页内容下思路解析相关推荐

最新文章

热门文章