學習要點:
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; } }