藍(lán)色簡潔的產(chǎn)品應(yīng)用服務(wù)圖標(biāo)文字列表div網(wǎng)格布局效果代碼。這是一款實用的產(chǎn)品圖標(biāo)文字排版樣式。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代碼
<div class="bg-grey">
<div class="developer-application-block">
<div class="titleBar">
<h3 class="caption">應(yīng)用服務(wù)</h3>
<p class="descript">為開發(fā)者提供應(yīng)用支持和管理部署等全面的服務(wù)</p>
</div>
<div class="AGrid-row gap developer-application">
<div class="col-sm-6">
<div class="tile">
<div class="layer-figure">
<h3 class="title">應(yīng)用支持</h3>
</div>
<div class="layer-text">
<ul>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-es.png">
</div>
<h3 class="title">
云搜索服務(wù)
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-cpts.png">
</div>
<h3 class="title">
云性能測試服務(wù) CPTS
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-apm.png" style="top: 0px;">
</div>
<h3 class="title">
應(yīng)用性能管理 APM
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-smn.png" style="top: 0px;">
</div>
<h3 class="title">
消息通知服務(wù) SMN
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-msgsms.png">
</div>
<h3 class="title">
消息&短信 MSGSMS
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-voice.png">
</div>
<h3 class="title">
語音通話 VoiceCall
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-workplace.png">
</div>
<h3 class="title">
數(shù)字化辦公
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/application-cloudvc.png">
</div>
<h3 class="title">
會議
</h3>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="tile">
<div class="layer-figure">
<h3 class="title">管理與監(jiān)控</h3>
</div>
<div class="layer-text">
<ul>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-lts.png">
</div>
<h3 class="title">
云日志服務(wù) LTS
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-ces.png">
</div>
<h3 class="title">
云監(jiān)控服務(wù) CES
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-iam.png" style="top: 0px;">
</div>
<h3 class="title">
統(tǒng)一身份認(rèn)證服務(wù) IAM
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-kms.png" style="top: 0px;">
</div>
<h3 class="title">
數(shù)據(jù)加密服務(wù) DEW
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-cts.png">
</div>
<h3 class="title">
云審計服務(wù) CTS
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-workspace.png">
</div>
<h3 class="title">
云桌面 Workspace
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-dbss.png">
</div>
<h3 class="title">
數(shù)據(jù)庫安全服務(wù) DBSS
</h3>
</a>
</div>
</li>
<li class="col-sm-6">
<div class="application-box">
<a href="#">
<div class="application-img">
<img src="statics/images/management-hss.png">
</div>
<h3 class="title">
主機安全服務(wù) HSS
</h3>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
//鼠標(biāo)懸停，圖標(biāo)上移,這里使用了img移動來實現(xiàn)，你也可以css：hover背景來實現(xiàn)。
$('.developer-application .layer-text .application-box').hover(
function() {
$(this)
.find('img')
.css('top', '-36px');
},
function() {
$(this)
.find('img')
.css('top', '0px');
}
);
})
</script>
產(chǎn)品服務(wù)圖標(biāo)文字列表div布局代碼 
