div基于css3属性制作一站式应用开发研发服务产品列表网格布局展示，鼠标悬停列表突出高亮显示代码。

使用方法

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>

资源出处：https://www.moyublog.com/codes/174.html