div css保險產(chǎn)品網(wǎng)格布局代碼

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="pro_recommend">
	<h2>保險產(chǎn)品推薦</h2>
	<ul>
		<li>
			<a href="#" class="goods-li-a" target="_blank">
				<img class="item-img" src="statics/images/pic_p01.jpg">
				<div class="item-text">
					<strong>安享康健2018</strong>
					<p>保120種疾病<br>賠付最高可達116萬</p>
					<span>查看詳情</span>
				</div>
				<i class="i-p-hot"></i>
			</a>
		</li>
		<li>
			<a href="#" class="goods-li-a" target="_blank">
				<img class="item-img" src="statics/images/pic_p02.jpg">
				<div class="item-text">
					<strong>醇享人生個人高端醫(yī)療保險</strong>
					<p>最高年保額可達800萬<br>不限醫(yī)保范圍的高端醫(yī)療</p>
					<span>查看詳情</span>
				</div>

			</a>
		</li>
		<li>
			<a href="#" class="goods-li-a" target="_blank">
				<img class="item-img" src="statics/images/pic_p03.jpg">
				<div class="item-text">
					<strong>兒童綜合保障</strong>
					<p>教育+大病+住院+意外<br> 4合1全面保障</p>
					<span>查看詳情</span>
				</div>
				<i class="i-p-new"></i>
			</a>
		</li>
		<li>
			<a href="#" class="goods-li-a" target="_blank">
				<img class="item-img" src="statics/images/pic_p06.jpg">
				<div class="item-text">
					<strong>百萬守護意外保障</strong>
					<p>最高300萬意外綜合保障<br> 4合1全面保障</p>

					<span>查看詳情</span>
				</div>

			</a>
		</li>
		<li>
			<a href="#" class="goods-li-a" target="_blank">
				<img class="item-img" src="statics/images/pic_p04.jpg">
				<div class="item-text">
					<strong>免費領20萬意外險</strong>
					<p>日常出行的保護傘</p>
					<span>免費領取</span>
				</div>
				<i class="i-p-free"></i>

			</a>
		</li>
		<li>
			<a href="#" class="goods-li-a" target="_blank">
				<img class="item-img" src="statics/images/pic_p05.jpg">
				<div class="item-text">
					<strong>中老年防癌險</strong>
					<p>給父母更多的關愛</p>

					<span>查看詳情</span>
				</div>

			</a>
		</li>
	</ul>
</div>