一．案例内容
#case {
padding: 40px 0;
background-color: #eee;
text-align: center;
}
#case h4 {
color: #666;
}
#case p {
color: #666;
line-height: 1.6;
}
<div class="jumbotron">
<div class="container">
<hgroup>
<h1>案例</h1>
<h4>和各大明星企业有着紧密合作...</h4>
</hgroup>
</div>
</div>
<div id="case">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case1.jpg" alt="">
<div class="caption">
<h4>中国移动通信</h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case2.jpg" alt="">
<div class="caption">
<h4>中国石化</h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case3.jpg" alt="">
<div class="caption">
<h4>中国联通</h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/case4.jpg" alt="">
<div class="caption">
<h4>中国电信</h4>
<p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
</div>
</div>
</div>
。。。。。。
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<p>企业培训 | 合作事宜 | 版权投诉</p>
<p>苏ICP 备12345678. © 2009-2016 瓢城企训网. Powered by Bootstrap.</p>
</div>
</footer>
#about {
background-color: #eee;
padding: 40px 15px;
}
#about a {
color: #0059b2;
}
#about .about {
background-color: #fff;
box-shadow: 2px 2px 3px #ccc;
}
#about h3 {
color: #333;
font-size: 18px;
border-bottom: 1px solid #eee;
padding: 20px 0;
margin: 0 0 10px 0;
}
#about p {
line-height: 2;
font-size: 13px;
}
#footer {
background-color: #666;
border-top: 1px solid #ccc;
padding: 20px;
text-align: center;
color: #eee;
}
/*没有小于768px，是因为Bootstrap3以移动端优先设计*/
/* 小屏幕（平板，大于等于768px） */
@media (min-width: 768px) {
#about h3 {
font-size: 19px;
}
#about p {
font-size: 14px;
}
}
/* 中等屏幕（桌面显示器，大于等于992px） */
@media (min-width: 992px) {
#about h3 {
font-size: 20px;
}
#about p {
font-size: 15px;
}
}
/* 大屏幕（大桌面显示器，大于等于1200px） */
@media (min-width: 1200px) {
#about h3 {
font-size: 22px;
}
#about p {
font-size: 16px;
}
}
<div class="jumbotron">
<div class="container">
<hgroup>
<h1>关于</h1>
<h4>本机构的成长介绍...</h4>
</hgroup>
</div>
</div>
<div id="about">
<div class="container">
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
<div class="list-group">
<a class="list-group-item" href="#1">1.机构介绍</a>
<a class="list-group-item" href="#2">2.加入我们</a>
<a class="list-group-item" href="#3">3.联系方式</a>
</div>
</div>
<div class="col-md-9 about">
<a name="1"></a>
<h3>机构简介</h3>
<p>瓢城企业培训有限公司是一家专业以智能化弱电工程为主的高科技民营企业，公司自创立以来一直专业致力于智能化弱电工程；始终坚持发扬"诚信、创新、沟通"为企业宗旨，以"技术、服务"为立业之本的团体精神，并形成一套完整的设计、安装、调试、培训、维护一站式服务体系。</p>
<a name="2"></a>
<h3>加入我们</h3>
<p>网络已深刻改变着人们的生活，本地化生活服务市场前景巨大，生活半径团队坚信本地化生活服务与互联网的结合将会成就一家梦幻的公司，我们脚踏实地的相信梦想，我们相信你的加入会让生活半径更可能成为那家梦幻公司！生活半径人有梦想，有魄力，强执行力，但是要实现这个伟大的梦想，需要更多的有创业精神的你一路前行。公司将提供有竞争力的薪酬、完善的福利（五险一金）、期权、广阔的上升空间。只要你有能力、有激情、有梦想，愿意付出，愿意与公司共同成长，请加入我们！</p>
<p>请发送您的简历到：hr@xxx.com，我们会在第一时间联系您！</p>
<a name="3"></a>
<h3>联系方式</h3>
<p>地址：江苏省盐城市亭湖区大庆中路1234 号</p>
<p>邮编：1234567</p>
<p>电话：010-88888888</p>
<p>传真：010-88666666</p>
</div>
</div>
</div>
</div>
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
