蓝色简洁的开发资源工具图标文字列表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"> <!--大标题--> <div class="titleBar"> <h3 class="caption">开发资源</h3> <p class="descript">提升云端开发效率</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">服务能力开放，业务组合创新</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的产品 </p> </a> <p class="api-detail"> <a href="#">弹性云服务器</a> | <a href="#">云硬盘</a> | <a href="#">镜像服务</a> | <a href="#">云解析服务</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="#"> 地区和终端节点 </a> </p> <p class="api-detail"> <a href="#"> 云当前可服务节点区域和各服务的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网关 </p> </a> <p class="api-detail"> <a href="#"> 提供高性能、高可用、高安全的API托管服务， 帮助用户轻松构建、管理和部署任意规模的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"> 企业服务 </a> | <a href="#" class="pc-link page_click_blank"> 人工智能 </a> | <a href="#" class="pc-link page_click_blank"> 生活服务 </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开发者门户，在线搜索、调测云开放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访问云产品和服务</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">开发工具</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="#"> 业务工具 </a> </p> <p class="api-detail"> <a href="#">OBS Browser工具 | obsutil工具 | RDS工具 | DES数据加密工具 | 软件开发云工具 | 文档数据库服务工具 | 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"> 生态工具 </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"> 组件库 | 图标库 </p> <p class="api-detail" style="height:22px;"> <a href="#">组件库</a> | <a href="#">图标库</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"> 开发者工具市场 </p> </a> <p class="api-detail"> <a href="#"> 监控工具 | 源代码控制 | 问题和缺陷跟踪 | 日志分析 | 测试工具 </a> </p> </div> </li> </ul> </div> </div> </div> </div> </div> </div>
