项目实战--首页内容介绍[下][4]

一．首页内容介绍[下]

#footer {

         background-color: #eee;

         border-top: 1px solid #ccc;

         padding: 20px;

         text-align: center;

}

 

<footer id="footer">

         <div class="container">

                   <p>企业培训 | 合作事宜 | 版权投诉</p>

                   <p>苏ICP 备12345678. © 2009-2016 瓢城企训网. Powered by Bootstrap.</p>

         </div>

</footer>

 

.tab2 {

         background-color: #eee;

         padding: 60px 20px;

         text-align: center;

}

.tab2 img {

         width: 40%;

         height: 40%;

}

 

 

.tab3 {

         padding: 60px 20px;

         text-align: center;

}

.tab3 img {

         width: 65%;

         height: 65%;

}

 

.text h3 {

         font-size: 20px;

}

.text p {

         font-size: 14px;

}

 

/*没有小于768px，是因为Bootstrap3以移动端优先设计*/

 

/* 小屏幕（平板，大于等于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;

         }

}

 

/* 大屏幕（大桌面显示器，大于等于1200px） */

@media (min-width: 1200px) {

         .text h3 {

                   font-size: 26px;

         }

         .text p {

                   font-size: 18px;

         }

}

 

<div class="tab2">

         <div class="container">

                   <div class="row">

                            <div class="col-md-6 col-sm-6 tab2-img">

                                     <img src="img/tab2.png" class="auto img-responsive center-block" alt="">

                                     //图片居中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" class="auto img-responsive center-block" alt="">

                            </div>

                            <div class="text col-md-6 col-sm-6">

                                     <h3>完美的管理方式</h3>

                                     <p>最新的管理培训方案，让您的企业赶超同行。</p>

                            </div>

                   </div>

         </div>

</div>

         //设置文字垂直居中，谷歌浏览器加载图片的顺序问题，导致高度无法获取

    //(图片的高度-文本的高度)/2

$(window).load(function () {

         $('.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');

});

 

$(window).load(function () {

$('.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');

});