|
技术要点：
1. 并列使用col-md-4，例如<div class="col-md-4">
2.图片缩放使用class="img-responsive"，例如 <img src="image/bbs2.png" class="img-responsive" alt="">
3.取消链接下划线 #bbs a{text-decoration: none;}
4.选中显示区域边框
#bbs .col-md-4:hover{
padding: 15px;
background:#f1f1f1;
box-shadow:1px 1px 4px #ccc;
}
1.效果
2. html代码
<div id="bbs">
<div class="container">
<div class="row">
<a href="http://www.baidu.com" target="_blank">
<div class="col-md-4">
<img src="image/bbs1.png" class="img-responsive" alt="">
<h3>前端学习</h3>
<p>学习bootstrap,vue</p>
</div>
</a>
<a href="http://www.baidu.com" target="_blank">
<div class="col-md-4">
<img src="image/bbs2.png" class="img-responsive" alt="">
<h3>后端学习</h3>
<p>学习springboot,springCloud</p>
</div>
</a>
<a href="http://www.baidu.com" target="_blank">
<div class="col-md-4">
<img src="image/bbs3.png" class="img-responsive" alt="">
<h3>全栈开发</h3>
<p>学习全部技术</p>
</div>
</a>
</div>
</div>
</div>
3. css
/*BBS*/
#bbs{
padding: 80px 0;
text-align: center;
}
#bbs img{
margin:0 auto;
}
#bbs h3{
font-weight:bold;
}
#bbs a{
color: #212121;
text-decoration: none;
}
#bbs .col-md-4{
padding: 15px;
}
#bbs .col-md-4:hover{
padding: 15px;
background:#f1f1f1;
box-shadow:1px 1px 4px #ccc;
}
| 
转播
