第 20 章 项目实战—首页内容介绍[下][4]

学习要点:

1.首页内容介绍[下]

主讲教师:李炎恢

本节课我们制作一下首页内容介绍的下半部分。

一.首页内容介绍[下]

//先完成底部的 footer

  1. <footer id="footer" class="text-muted">
  2. <div class="container">
  3. <p> 企业培训 | 合作事宜 | 版权投诉 </p>
  4. <p> 苏 ICP 备 12345678\. © 2009-2016 瓢城企训网. Powered by
  5. Bootstrap. </p>
  6. </div>
  7. </footer>

//底部 CSS

  1. #footer { padding: 20px; text-align: center; background-color: #eee; border-top: 1px solid #ccc;
  2. }

//两段内容

  1. <div class="tab2">
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-md-6 col-sm-6 tab2-img">
  5. <img src="img/tab2.png" alt="" class="auto
  6. img-responsive center-block">
  7. </div>
  8. <div class="text col-md-6 col-sm-6 tab2-text">
  9. <h3>强大的学习体系</h3>
  10. <p> 经过管理学大师层层把关、让您的企业突飞猛进。 </p>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. <div class="tab3">
  16. <div class="container">
  17. <div class="row">
  18. <div class="col-md-6 col-sm-6">
  19. <img src="img/tab3.png" alt="" class="auto
  20. img-responsive center-block">
  21. </div>
  22. <div class="text col-md-6 col-sm-6">
  23. <h3>完美的管理方式</h3>
  24. <p> 最新的管理培训方案,让您的企业赶超同行。 </p>
  25. </div>
  26. </div>
  27. </div>
  28. </div>

//CSS 部分

  1. .tab2 { background: #eee; padding: 60px 20px; text-align: center;
  2. } .tab2 img { width: 40%; height: 40%;
  3. } .tab3 { padding: 40px 0; text-align: center;
  4. } .tab3 img { width: 65%; height: 65%;
  5. } .text h3 { font-size: 20px;
  6. } .text p { font-size: 14px;
  7. }
  8. /* 小屏幕(平板,大于等于 768px) */ @media (min-width: 768px) { .text h3 {
  9. font-size: 22px;
  10. } .text p { font-size: 15px;
  11. } .tab2-text { float: left;
  12. } .tab2-img { float: right;
  13. } } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media (min-width: 992px) { .text h3 {
  14. font-size: 24px;
  15. } .text p { font-size: 16px;
  16. } .tab2-text { float: left;
  17. } .tab2-img { float: right;
  18. } } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: 1200px) { .text h2 {
  19. font-size: 26px;
  20. } .text p { font-size: 18px;
  21. } .tab2-text { float: left;
  22. } .tab2-img { float: right;
  23. } }

//JS 控制垂直居中

  1. $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
  2. $(window).resize(function() {
  3. $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
  4. });
  5. $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
  6. $(window).resize(function() {
  7. $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
  8. });

原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/43.html