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

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

收藏
div css3应用开发产品网格布局代码
div基于css3属性制作一站式应用开发研发服务产品列表网格布局展示,鼠标悬停列表突出高亮显示代码。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 迷茫
  • 上传时间 6年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。