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>米修線上 &copy; 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; }

4. clear: both 清除浮動