藍色的教育平臺服務(wù)列表介紹bootstrap響應(yīng)式布局。這是一款通用的圖標(biāo)文字列表布局代碼。
使用方法:
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>中國財經(jīng)?政法教育資源共享平臺</h4>
<ul class="list-inline">
<li><a href="#">學(xué)位論文庫</a></li>
<li><a href="#">特色資源庫</a></li>
<li><a href="#">機構(gòu)知識庫</a></li>
<li><a href="#">商業(yè)數(shù)據(jù)庫</a></li>
<li><a href="#">財經(jīng)博導(dǎo)庫</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>中國財經(jīng)教育E-MOOC聯(lián)盟</h4>
<ul class="list-inline">
<li><a href="#">中國財經(jīng)教育E-MOOC平臺</a></li>
<li><a href="#">財經(jīng)資源及信息素養(yǎng)平臺</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>教學(xué)案例平臺</h3>
<div class="yuan">
<img src="images/tuc_3.png" />
</div>
</div>
<div class="col-xs-9 col-lg-12">
<h4>中國經(jīng)管實驗教學(xué)案例平臺</h4>
<ul class="list-inline">
<li><a href="#">中國經(jīng)管實驗教學(xué)案例庫</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>