div css制作簡單創(chuàng)意的保險產(chǎn)品推薦布局,產(chǎn)品網(wǎng)格布局代碼。鼠標(biāo)懸停圖片滑動按鈕高亮顯示效果代碼。
使用方法:
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>賠付最高可達(dá)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>最高年保額可達(dá)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>百萬守護(hù)意外保障</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>免費(fèi)領(lǐng)20萬意外險</strong>
<p>日常出行的保護(hù)傘</p>
<span>免費(fèi)領(lǐng)取</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>給父母更多的關(guān)愛</p>
<span>查看詳情</span>
</div>
</a>
</li>
</ul>
</div>