字体图标库 及 首页底部的制作
1. 字体图标库
(1). 搜索网址: http://www.fontawesome.com.cn/
(2). 下载最新版本的解压包 把文件夹 fonts 和 css 文件夹里 font-awesome.min.css 引入到项目里面
(3). 点击网址的 图标库 搜索需要的图标
2. body的内容
<section id="features">
<div class="box bg-light">
<i class="fa fa-users fa-3x"></i>
<h3>讲师介绍</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nostrum cupiditate vero beatae velit aliquam adipisci quos sequi dolorem mollitia doloremque, illum culpa!</p>
</div>
<div class="box bg-primary">
<i class="fa fa-leanpub fa-3x"></i>
<h3>课程详情</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nostrum cupiditate vero beatae velit aliquam adipisci quos sequi dolorem mollitia doloremque, illum culpa!</p>
</div>
<div class="box bg-light">
<i class="fa fa-graduation-cap fa-3x" aria-hidden="true"></i>
<h3>学员反馈</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nostrum cupiditate vero beatae velit aliquam adipisci quos sequi dolorem mollitia doloremque, illum culpa!</p>
</div>
</section>
<div class="clr"></div>
<footer id="main-footer">
<p>米修在线 © 2021, All Rights Reaerved</p>
</footer>
3. css 的样式
/* features */
.box {
float: left;
width: 33.3%;
padding: 50px;
text-align: center;
}
.box i{
margin-bottom: 10px;
}
.bg-light {
background-color: #f4f4f4;
color: #333;
}
.bg-primary {
background-color: #f7c08a;
color: #333;
}
.clr {
clear: both;
}
/* fppter */
#main-footer {
text-align: center;
background-color: #333;
color: #ffffff;
padding: 20px;
}
