藍(lán)色簡潔的開發(fā)資源工具圖標(biāo)文字列表div布局樣式代碼。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、body引入HTML代碼
<div class="bg-grey">
<div class="content-block content-block1">
<!--大標(biāo)題-->
<div class="titleBar">
<h3 class="caption">開發(fā)資源</h3>
<p class="descript">提升云端開發(fā)效率</p>
</div>
<!--主體-->
<div class="AGrid-row developer-community">
<!--api-->
<div class="col-sm-4 slider-item">
<div class="aui-tile" style="height: 635px;">
<div class="api-box">
<p class="caption">OpenAPI</p>
<p class="info">服務(wù)能力開放，業(yè)務(wù)組合創(chuàng)新</p>
</div>
<div class="api-list">
<ul>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/11.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
開放API的產(chǎn)品
</p>
</a>
<p class="api-detail">
<a href="#">彈性云服務(wù)器</a> |
<a href="#">云硬盤</a> |
<a href="#">鏡像服務(wù)</a> |
<a href="#">云解析服務(wù)</a> |
<a href="#">云容器引擎</a>...
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/12.png">
</div>
<div class="api-text">
<p class="api-title">
<a href="#">
地區(qū)和終端節(jié)點(diǎn)
</a>
</p>
<p class="api-detail">
<a href="#">
云當(dāng)前可服務(wù)節(jié)點(diǎn)區(qū)域和各服務(wù)的Endpoint
</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/13.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
API網(wǎng)關(guān)
</p>
</a>
<p class="api-detail">
<a href="#">
提供高性能、高可用、高安全的API托管服務(wù)， 幫助用戶輕松構(gòu)建、管理和部署任意規(guī)模的API。
</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/14.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
API市場
</p>
</a>
<p class="api-detail">
<a href="#" class="pc-link page_click_blank">
視頻與通信
</a>|
<a href="#" class="pc-link page_click_blank">
企業(yè)服務(wù)
</a>
|
<a href="#" class="pc-link page_click_blank">
人工智能
</a>
|
<a href="#" class="pc-link page_click_blank">
生活服務(wù)
</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/api-explorer.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
API Explorer
</p>
</a>
<p class="api-detail">
<a href="#">
云API開發(fā)者門戶，在線搜索、調(diào)測云開放API
</a>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--sdk-->
<div class="col-sm-4 slider-item">
<div class="aui-tile" style="height: 635px;">
<div class="api-box">
<p class="caption">SDKs</p>
<p class="info">通過SDK訪問云產(chǎn)品和服務(wù)</p>
</div>
<div class="sdk-list">
<ul>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700037_7961.png">
</div>
<div class="api-text">
<p class="api-title">
Java SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700050_4732.png">
</div>
<div class="api-text">
<p class="api-title">
Python SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700065_3809.png">
</div>
<div class="api-text">
<p class="api-title">
.NET SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700079_3590.png">
</div>
<div class="api-text">
<p class="api-title">
PHP SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700091_9319.png">
</div>
<div class="api-text">
<p class="api-title">
Android SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700103_9465.png">
</div>
<div class="api-text">
<p class="api-title">
iOS SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700240_6436.png">
</div>
<div class="api-text">
<p class="api-title">
Node.js SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700114_5581.png">
</div>
<div class="api-text">
<p class="api-title">
C SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1519700143_5988.png">
</div>
<div class="api-text">
<p class="api-title">
Go SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1510854466_1781.png">
</div>
<div class="api-text">
<p class="api-title">
C# SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 ">
<div class="api-img">
<img src="statics/images/1532311990_3697.png">
</div>
<div class="api-text">
<p class="api-title">
Lua SDK
</p>
</div>
</li>
</a>
<a href="#">
<li class="col-sm-6 " style="width: 100%;">
<div class="api-img">
<img src="statics/images/1519700570_7012.png">
</div>
<div class="api-text">
<p class="api-title">
BrowserJS SDK
</p>
</div>
</li>
</a>
</ul>
</div>
</div>
</div>
<!--tools-->
<div class="col-sm-4 slider-item">
<div class="aui-tile" style="height: 635px;">
<div class="api-box">
<p class="caption">開發(fā)工具</p>
<p class="info">提高資源配置及管理效率</p>
</div>
<div class="developer-list">
<ul>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/1530195015_2261.png">
</div>
<div class="api-text">
<p class="api-title">
<a href="#">
CLI </a>
</p>
<p class="api-detail">
<a href="#">OpenStack CLI工具 | FunctionGraph CLI工具 </a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/1530195028_8953.png">
</div>
<div class="api-text">
<p class="api-title">
<a href="#">
業(yè)務(wù)工具 </a>
</p>
<p class="api-detail">
<a href="#">OBS Browser工具 | obsutil工具 | RDS工具 | DES數(shù)據(jù)加密工具 | 軟件開發(fā)云工具 | 文檔數(shù)據(jù)庫服務(wù)工具 | Serverless Sandbox | DevCloud第三...</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/01.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
代碼示例
</p>
</a>
<p class="api-detail">
<a href="#">
</a>
<a href="#">
SDK示例 | 工具示例 | 其他
</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/23.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
生態(tài)工具
</p>
</a>
<p class="api-detail">
<a href="#">
</a>
<a href="#">
terraform 工具 | ansible 工具 | kubernetes 工具 ...
</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/24.png">
</div>
<div class="api-text">
<p class="api-title api-title-pc">
組件庫 | 圖標(biāo)庫
</p>
<p class="api-detail" style="height:22px;">
<a href="#">組件庫</a> |
<a href="#">圖標(biāo)庫</a>
</p>
</div>
</li>
<li class="col-sm-12 ">
<div class="api-img">
<img src="statics/images/25.png">
</div>
<div class="api-text">
<a href="#">
<p class="api-title">
開發(fā)者工具市場
</p>
</a>
<p class="api-detail">
<a href="#">
監(jiān)控工具 | 源代碼控制 | 問題和缺陷跟蹤 | 日志分析 | 測試工具
</a>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
