div css3應(yīng)用開(kāi)發(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)用開(kāi)發(fā)</h3>

			<p class="descript">全生命周期的一站式研發(fā)服務(wù)，使軟件開(kāi)發(fā)更加簡(jiǎn)單高效。</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">項(xiàng)目管理</h2>

					<div class="layer-text">
						<p class="dev-text">
							為敏捷開(kāi)發(fā)團(tuán)隊(duì)提供簡(jiǎn)單高效的開(kāi)發(fā)協(xié)作服務(wù)，包含多項(xiàng)目管理、敏捷迭代、需求管理、缺陷跟蹤、文檔管理、看板、報(bào)表統(tǒng)計(jì)分析等功能。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗(yàn)</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">
							為軟件開(kāi)發(fā)者提供基于Git的在線代碼托管服務(wù)，包括代碼克隆/下載/提交/推送/比較/合并/分支等功能。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗(yàn)</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">
							提供可視化、可定制的自動(dòng)交付流水線，幫助企業(yè)縮短交付周期，提升交付效率。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗(yàn)</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)行多種語(yǔ)言的代碼靜態(tài)檢查、代碼安全檢查、質(zhì)量評(píng)分、代碼缺陷改進(jìn)趨勢(shì)分析，輔助您管控代碼質(zhì)量。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗(yàn)</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">
							提供配置簡(jiǎn)單的混合語(yǔ)言構(gòu)建平臺(tái)，實(shí)現(xiàn)編譯構(gòu)建云端化，自定制可視化的自動(dòng)化交付流水線，支撐企業(yè)實(shí)現(xiàn)持續(xù)交付，提升交付效率。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗(yàn)</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">測(cè)試管理</h2>

					<div class="layer-text">
						<p class="dev-text">
							提供一體化測(cè)試解決方案，覆蓋測(cè)試需求、用例管理、測(cè)試任務(wù)管理、缺陷管理，多維度評(píng)估產(chǎn)品質(zhì)量，幫助您高效管理測(cè)試活動(dòng)，保障產(chǎn)品高質(zhì)量交付。
						</p>
						<div class="layer-btn">
							<a href="#">
								<p>立即體驗(yàn)</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a class="buy-now" href="#">
			一鍵購(gòu)買
		</a>
	</div>
</div>