# 第 20 章 项目实战--首页内容介绍[下][4] **学习要点：** 1.首页内容介绍[下] 主讲教师：李炎恢 本节课我们制作一下首页内容介绍的下半部分。 **一．首页内容介绍[下]** //先完成底部的 footer ``` <footer id="footer" class="text-muted"> <div class="container"> <p> 企业培训 | 合作事宜 | 版权投诉 </p> <p> 苏 ICP 备 12345678\. © 2009-2016 瓢城企训网. Powered by Bootstrap. </p> </div> </footer> ``` //底部 CSS ``` #footer { padding: 20px; text-align: center; background-color: #eee; border-top: 1px solid #ccc; } ``` //两段内容 ``` <div class="tab2"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 tab2-img"> <img src="img/tab2.png" alt="" class="auto img-responsive center-block"> </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" alt="" class="auto img-responsive center-block"> </div> <div class="text col-md-6 col-sm-6"> <h3>完美的管理方式</h3> <p> 最新的管理培训方案，让您的企业赶超同行。 </p> </div> </div> </div> </div> ``` //CSS 部分 ``` .tab2 { background: #eee; padding: 60px 20px; text-align: center; } .tab2 img { width: 40%; height: 40%; } .tab3 { padding: 40px 0; text-align: center; } .tab3 img { width: 65%; height: 65%; } .text h3 { font-size: 20px; } .text p { font-size: 14px; } /* 小屏幕（平板，大于等于 768px） */ @media (min-width: 768px) { .text h3 { font-size: 22px; } .text p { font-size: 15px; } .tab2-text { float: left; } .tab2-img { float: right; } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 992px) { .text h3 { font-size: 24px; } .text p { font-size: 16px; } .tab2-text { float: left; } .tab2-img { float: right; } } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: 1200px) { .text h2 { font-size: 26px; } .text p { font-size: 18px; } .tab2-text { float: left; } .tab2-img { float: right; } } ``` //JS 控制垂直居中 ``` $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px'); $(window).resize(function() { $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px'); }); $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px'); $(window).resize(function() { $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px'); }); ```