div css開發工具圖標文字列表布局

藍色簡潔的開發資源工具圖標文字列表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>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

340 11099 43