您的位置：首页 > 代码 > DIV|CSS

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

DIV|CSS 次 2020-12-05

提供专业的DIV+CSS开发工具，包括图标、文字、列表等布局元素，助力您轻松构建美观且高效的网页界面。我们的工具简洁易用，让您在网页设计中事半功倍。

报错

DIV与CSS开发工具，图标文字列表布局指南

蓝色简洁的开发资源工具图标文字列表div布局样式代码。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

查看演示

扫码下载(5.00点)

VIP会员下载(快速)

使用方法：

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>

文件目录

本资源来自：代码 » DIV|CSS » div css开发工具图标文字列表布局

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步帝国CMS模板，感谢支持！

点击这里复制本文地址以上内容由墨鱼部落格整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

通用的网页底部导航div布局代码

« 上一篇 2020年12月05日

创意的产品服务圆形布局代码

下一篇 » 2020年12月05日

1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。