第 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.  
  16. <div class="tab3">
  17.     <div class="container">
  18.         <div class="row">
  19.             <div class="col-md-6 col-sm-6">
  20.                 <img src="img/tab3.png" alt="" class="auto
  21.                 img-responsive center-block">
  22.             </div>
  23.             <div class="text col-md-6 col-sm-6">
  24.                 <h3>完美的管理方式</h3>
  25.                 <p> 最新的管理培训方案，让您的企业赶超同行。 </p>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </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.  
  9. /* 小屏幕（平板，大于等于 768px） */ @media (min-width: 768px) { .text h3 {
  10.  
  11.         font-size: 22px;
  12.     } .text p { font-size: 15px;
  13.     } .tab2-text { float: left;
  14.     } .tab2-img { float: right;
  15.     } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 992px) { .text h3 {
  16.         font-size: 24px;
  17.     } .text p { font-size: 16px;
  18.     } .tab2-text { float: left;
  19.     } .tab2-img { float: right;
  20.     } } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: 1200px) { .text h2 {
  21.         font-size: 26px;
  22.     } .text p { font-size: 18px;
  23.     } .tab2-text { float: left;
  24.     } .tab2-img { float: right;
  25.     } }

//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.  
  6. $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
  7. $(window).resize(function() {
  8.     $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
  9. });