div css3應(yīng)用開發(fā)產(chǎn)品網(wǎng)格布局代碼

使用方法：

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">一站式應(yīng)用開發(fā)</h3>

			<p class="descript">全生命周期的一站式研發(fā)服務(wù)，使軟件開發(fā)更加簡單高效。</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">
							為敏捷開發(fā)團(tuán)隊提供簡單高效的開發(fā)協(xié)作服務(wù)，包含多項目管理、敏捷迭代、需求管理、缺陷跟蹤、文檔管理、看板、報表統(tǒng)計分析等功能。
						</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">
							為軟件開發(fā)者提供基于Git的在線代碼托管服務(wù)，包括代碼克隆/下載/提交/推送/比較/合并/分支等功能。
						</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">
							提供可視化、可定制的自動交付流水線，幫助企業(yè)縮短交付周期，提升交付效率。
						</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">
							提供代碼質(zhì)量管理云服務(wù)，可在線進(jìn)行多種語言的代碼靜態(tài)檢查、代碼安全檢查、質(zhì)量評分、代碼缺陷改進(jìn)趨勢分析，輔助您管控代碼質(zhì)量。
						</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">編譯構(gòu)建</h2>

					<div class="layer-text">
						<p class="dev-text">
							提供配置簡單的混合語言構(gòu)建平臺，實現(xiàn)編譯構(gòu)建云端化，自定制可視化的自動化交付流水線，支撐企業(yè)實現(xiàn)持續(xù)交付，提升交付效率。
						</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">
							提供一體化測試解決方案，覆蓋測試需求、用例管理、測試任務(wù)管理、缺陷管理，多維度評估產(chǎn)品質(zhì)量，幫助您高效管理測試活動，保障產(chǎn)品高質(zhì)量交付。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a class="buy-now" href="#">
			一鍵購買
		</a>
	</div>
</div>