div css开发工具图标文字列表布局

使用方法：

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>