card效果的实现

这是css定义

<style type="text/css">

	.card {
		width: 200px;
		border:1px solid blue;
		box-shadow: 0 4px 8px 0 rgba(0,0, 0, 0.2), 0 6px20px 0 rgba(0,0, 0, 0.19);
		text-align: center;
		float: left;
		margin-right: 10px;
	}
	.header {
		color: gray;
		padding: 10px;
		font-size: 15px;
		height: 60px;
	}
	.body {
		border:1px solid blue;
		font-size: 15px;
		padding: 10px;
	}

</style>

这是页面定义

<div class="card">
					<div class="header" style="background-color: #4caf50;">
						<p><a title="查看详情" style="cursor: pointer; color:white" οnclick="viewXmInfo('${var.OMP_XM_ID}');">产品名称:<%=a.getGname()%></a></p>
					</div>
					<div class="body">
						<p>产品编号：<%=a.getGid()%></p>
						<p>产品介绍：<%=a.getGcontent()%></p>
						<p>产品数目：<%=a.getGnum()%></p>
						<p>产品价格：<%=a.getGprice()%></p>
						<p>选中状态：<a href="javascript:void(0)" class="label label-success"style="border-radius: .25em;"><input type="checkbox" name=<%=a.getGid()%>/></a></p>
					</div>
				</div>