蓝色的教育平台服务列表介绍bootstrap响应式布局。这是一款通用的图标文字列表布局代码。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" href="css/style.css" rel="stylesheet" />
2、body引入部分
<div class="shou_zhu" style="background: url(images/san.png);" >
<div class="container">
<div align="center">
<h2><span>三大主题</span></h2>
<div class="xian1"></div>
<div class="xian2"></div>
</div>
<div class="col-lg-4" align="left">
<div class="thumbnail" align="center">
<div class="col-xs-3 col-lg-12">
<h3>资源共享平台</h3>
<div class="yuan">
<img src="images/tuc_1.png" />
</div>
</div>
<div class="col-xs-9 col-lg-12">
<h4>中国财经•政法教育资源共享平台</h4>
<ul class="list-inline">
<li><a href="#">学位论文库</a></li>
<li><a href="#">特色资源库</a></li>
<li><a href="#">机构知识库</a></li>
<li><a href="#">商业数据库</a></li>
<li><a href="#">财经博导库</a></li>
<li><a href="">外文期刊库</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4" align="center">
<div class="thumbnail" align="center">
<div class="col-xs-3 col-lg-12">
<h3>E-MOOC平台</h3>
<div class="yuan">
<img src="images/tuc_2.png" />
</div>
</div>
<div class="col-xs-9 col-lg-12">
<h4>中国财经教育E-MOOC联盟</h4>
<ul class="list-inline">
<li><a href="#">中国财经教育E-MOOC平台</a></li>
<li><a href="#">财经资源及信息素养平台</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4" align="right">
<div class="thumbnail" align="center">
<div class="col-xs-3 col-lg-12">
<h3>教学案例平台</h3>
<div class="yuan">
<img src="images/tuc_3.png" />
</div>
</div>
<div class="col-xs-9 col-lg-12">
<h4>中国经管实验教学案例平台</h4>
<ul class="list-inline">
<li><a href="#">中国经管实验教学案例库</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>