div css培訓(xùn)認(rèn)證單排列表布局

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="bg-white">
	<div class="developer-train-block">
		<div class="titleBar">
			<h3 class="caption">開發(fā)者培訓(xùn)認(rèn)證</h3>
			<p class="descript">云主機(jī)提供專業(yè)的培訓(xùn)認(rèn)證內(nèi)容，助您提升專項(xiàng)技能，成就職場新機(jī)遇！</p>
		</div>
		<div class="developer-train">
			<div class="col-sm-4 ">
				<div class="tile part4-layer">
					<div class="layer-figure">
						<h3 class="title">專業(yè)的培訓(xùn)認(rèn)證體系</h3>
					</div>
					<div class="layer-text">
						<p class="dev-text">云主機(jī)精心打造專業(yè)的認(rèn)證體系，為您擴(kuò)展職場發(fā)展的機(jī)遇，成為您技術(shù)能力的證明。</p>
					</div>
					<div class="buttond">
						<a href="#">
							<p>
								查看詳情</p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-sm-4 ">
				<div class="tile part4-layer">
					<div class="layer-figure">
						<h3 class="title">精心打造的培訓(xùn)課程</h3>
					</div>
					<div class="layer-text">
						<p class="dev-text">云計(jì)算、大數(shù)據(jù)、數(shù)據(jù)庫等一站式在線學(xué)習(xí)平臺。</p>
					</div>
					<div class="buttond">
						<a href="#">
							<p>
								查看詳情</p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-sm-4 ">
				<div class="tile part4-layer">
					<div class="layer-figure">
						<h3 class="title">真實(shí)環(huán)境的在線實(shí)踐</h3>
					</div>
					<div class="layer-text">
						<p class="dev-text">由淺入深的云產(chǎn)品、云生態(tài)架構(gòu)及解決方案相關(guān)的動手實(shí)驗(yàn)，帶您快速開啟云主機(jī)體驗(yàn)之旅。</p>
					</div>
					<div class="buttond">
						<a href="#">
							<p>
								查看詳情</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>