div css3制作四大保障险介绍单排产品列表布局，鼠标悬停3D翻转显示内容详情。这是一款简洁常用的图片列表布局代码。

使用方法

1、head引入css文件

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

2、body引入部分

<!--学历的好处-->
<div class="baozhang">
	<div class="part1 part5">
		<div class="title">
			<h4>四大保障险介绍</h4>
			<p>详细条款内容以合同为准</p>
		</div>
		
		<div class="tBox">
		
			<div class="picBox">
				<div class="clearfix" id="posBox">
				
					<div class="fl roll">
						<div class="box-img">
							<img src="img/t1.jpg" width="232" height="430" alt=""/> 
						</div>
						<div class="box-content">
							<p class="t1">全额奖学金</p>
							<p class="t2">由中国人保财险提供保障</p>
							<p class="t3"></p>
							<p class="t4">为了鼓励学员勤奋学习，让学员学有所获，尚德机构与中国人保合作设立了全额奖学金，保期内可报考科目总数的75%及以上科目，成绩在70分（含70分）及以上，则可以进行奖学金申请。</p>
						</div>
					</div>
					
					<div class="fl roll">
						<div class="box-img"><img src="img/t2.jpg" width="232" height="430" alt=""/> </div>
						<div class="box-content">
							<p class="t1">不过理赔险</p>
							<p class="t2">与中国人保财险进行合作</p>
							<p class="t3"></p>
							<p class="t4">不过理赔险，简单地说就是：你考得不好？赔！当然了，赔偿是有条件的，前提是要学习，也要去考试哦！（具体点击在线咨询）学习是一项自我增值的过程，而保险让学历提升有了更多保障。有这项保障助你报名无忧哟！</p>
						</div>
					</div>
					
					<div class="fl roll">
						<div class="box-img"><img src="img/t3.jpg" width="232" height="430" alt=""/> </div>
						<div class="box-content">
							<p class="t1">政策保障险</p>
							<p class="t2">由中国人保财险提供保障</p>
							<p class="t3"></p>
							<p class="t4">大家都知道自考政策会不断变化，像是专业停考，户籍限制报考等，而尚德机构推出的政策保障险就能为你轻松解除政策变化的担忧哦！</p>
						</div>
					</div>
				
					<div class="fl roll">
						<div class="box-img"><img src="img/t4.jpg" width="232" height="430" alt=""/> </div>
						<div class="box-content" onClick="interactive.openGreatBear('0', '')">
							<p class="t1">30天不满意退课险</p>
							<p class="t2">与中国人保财险进行合作</p>
							<p class="t3"></p>
							<p class="t4">如果报名后24小时后—30天内，不管什么原因，只要满足理赔条件就可以发起理赔，获得保险公司赔付！就是这么简单！只要你确实有体验、学习，觉得不满意就可以退学</p>
						</div>
					</div>
				
				</div>
			</div>
		</div>
	</div>
	
	<div class="anniuk"> <div class="anniu">点击快速咨询详情</div></div>
	
</div>
<!--学历的好处 End-->

资源出处：https://www.moyublog.com/codes/57.html