微信掃碼登錄 ×
div css開發(fā)工具圖標(biāo)文字列表布局

div css開發(fā)工具圖標(biāo)文字列表布局

收藏
div css開發(fā)工具圖標(biāo)文字列表布局
藍(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>

使用聲明

1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請(qǐng)勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途,織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

x
×
×

注冊(cè)

QQ注冊(cè) 立即下載 微信注冊(cè) 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了