第 20 章項目實戰--首頁內容介紹[上][3] · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 20 章項目實戰--首頁內容介紹[上][3] **學習要點：** 1.首頁內容介紹[上] 主講教師：李炎恢本節課我們輪播圖的下方，設計一個內容介紹，內容介紹分兩部分，本次為上半部分。 **一．首頁內容介紹[上]** //關于上節課輪播圖，手冊上其實有一個更好的方案，并不需要通過額外的代碼控制。 ``` <a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" data-slide="next" class="carousel-controlright"> <span class="glyphicon glyphicon-chevron-right"></span> </a> ``` //內容介紹上 ``` <div class="tab1"> <div class="container"> <h2 class="tab-h2">「為什么選擇瓢城企業培訓」</h2> <p class="tab-p"> 強大的師資力量，完美的實戰型管理課程，讓您的企業實現質的騰飛！ </p> <div class="row"> <div class="col-md-6 col"> <div class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="img/tab1-1.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">課程內容</h4> <p class="text-muted"> 其他：高校不知名的講師編寫，沒有任何實戰價值的教材！ </p> <p> 其他：知名企業家、管理學大師聯合編寫的具有實現性教材！ </p> </div> </div> </div> <div class="col-md-6 col"> <div class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="img/tab1-2.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">師資力量</h4> <p class="text-muted"> 其他：非歐美正牌大學畢業的、業界沒有知名度的講師！ </p> <p> 其他：美國哈佛、耶魯等世界一流高校、享有聲譽的名牌專家！ </p> </div> </div> </div> <div class="col-md-6 col"> <div class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="img/tab1-3.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">課時安排</h4> <p class="text-muted"> 其他：無法保證上課效率、沒有時間表，任務無法完成！ </p> <p> 其他：保證正常的上課效率、制定一張時間表、當天的任務當天完成！ </p> </div> </div> </div> <div class="col-md-6 col"> <div class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="img/tab1-4.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">服務團隊</h4> <p class="text-muted"> 其他：社會招聘的、服務水平參差不齊的普通員工！ </p> <p> 其他：內部培養、經受過良好高端服務培訓的高標準員工！ </p> </div> </div> </div> </div> </div> </div> ``` //對應的 CSS 部分 ``` body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaheiUI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; } .tab-h2 { font-size: 20px; color: #0059B2; text-align: center; letter-spacing: 1px; } .tab-p { font-size: 15px; color: #999; text-align: center; letter-spacing: 1px; margin: 20px 0 40px 0; } .tab1 { margin: 30px 0; color: #666; } .tab1 .media-heading { margin: 5px 0 20px 0; } .tab1 .text-muted { color: #999; text-decoration: line-through; } .tab1 .media-heading { margin: 5px 0 20px 0; } .tab1 .text-muted { color: #999; text-decoration: line-through; } .tab1 .col { padding: 20px; } /* 小屏幕（平板，大于等于 768px） */ @media (min-width: 768px) { .tab-h2 { font-size: 26px; } .tab-p { font-size: 16px; } } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: 992px) { .tab-h2 { font-size: 28px; } .tab-p { font-size: 17px; } } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: 1200px) { .tab-h2 { font-size: 30px; } .tab-p { font-size: 18px; } } ```