QQ客服
当前位置 : 首页 > 代码 > 网页特效 > div css > div css3应用开发产品网格布局代码

原创商用 div css3应用开发产品网格布局代码

div基于css3属性制作一站式应用开发研发服务产品列表网格布局展示,鼠标悬停列表突出高亮显示代码。
www.28365365.com,bet28365365体育投注,bet28365365娱乐场
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、body引入HTML代码

<div class="bg-white">
	<div class="developer-toolbag-block">
		<div class="titleBar">
			<h3 class="caption">一站式应用开发</h3>

			<p class="descript">全生命周期的一站式研发服务,使软件开发更加简单高效。</p>
		</div>
		<div class="AGrid-row  tool-package">
			<div class="col-sm-6 ">
				<div class="tile center-layer">
					<div class="layer-figure">
						<img src="statics/images/DevCloud-ProjectMan.png">
					</div>
					<h2 class="dev-list">项目管理</h2>

					<div class="layer-text">
						<p class="dev-text">
							为敏捷开发团队提供简单高效的开发协作服务,包含多项目管理、敏捷迭代、需求管理、缺陷跟踪、文档管理、看板、报表统计分析等功能。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即体验</p>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 ">
				<div class="tile center-layer">
					<div class="layer-figure">
						<img src="statics/images/DevCloud-CobeHub.png">
					</div>
					<h2 class="dev-list">代码托管</h2>

					<div class="layer-text">
						<p class="dev-text">
							为软件开发者提供基于Git的在线代码托管服务,包括代码克隆/下载/提交/推送/比较/合并/分支等功能。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即体验</p>
							</a>
						</div>
					</div>

				</div>
			</div>
			<div class="col-sm-6 ">
				<div class="tile center-layer">
					<div class="layer-figure">
						<img src="statics/images/DevCloud-CloudPipeline.png">
					</div>
					<h2 class="dev-list">流水线</h2>

					<div class="layer-text">
						<p class="dev-text">
							提供可视化、可定制的自动交付流水线,帮助企业缩短交付周期,提升交付效率。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即体验</p>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 ">
				<div class="tile center-layer">
					<div class="layer-figure">
						<img src="statics/images/DevCloud-CodeCheck.png">
					</div>
					<h2 class="dev-list">代码检查</h2>

					<div class="layer-text">
						<p class="dev-text">
							提供代码质量管理云服务,可在线进行多种语言的代码静态检查、代码安全检查、质量评分、代码缺陷改进趋势分析,辅助您管控代码质量。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即体验</p>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 ">
				<div class="tile center-layer">
					<div class="layer-figure">
						<img src="statics/images/DevCloud-CloudBuild.png">
					</div>
					<h2 class="dev-list">编译构建</h2>

					<div class="layer-text">
						<p class="dev-text">
							提供配置简单的混合语言构建平台,实现编译构建云端化,自定制可视化的自动化交付流水线,支撑企业实现持续交付,提升交付效率。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即体验</p>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 ">
				<div class="tile center-layer">
					<div class="layer-figure">
						<img src="statics/images/DevCloud-TestMan.png">
					</div>
					<h2 class="dev-list">测试管理</h2>

					<div class="layer-text">
						<p class="dev-text">
							提供一体化测试解决方案,覆盖测试需求、用例管理、测试任务管理、缺陷管理,多维度评估产品质量,帮助您高效管理测试活动,保障产品高质量交付。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即体验</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a class="buy-now" href="#">
			一键购买
		</a>
	</div>
</div>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×
www.28365365.com

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了