html5卡片效果

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>卡片效果</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.card {
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
float: left;
margin-right: 10px;
}
.header {
color: #fff;
padding: 10px;
font-size: 15px;
height: 60px;
}
.body {
padding: 10px;
}
.body p {
margin-left: 5px;
}
</style>
</head>

<body>
<div class="card">
<div class="header" style="background-color: #4caf50;">
<p><a title="查看详情" style="cursor: pointer; color:white" onclick="viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a></p>
</div>
<div class="body">
<p>项目经理:成柯</p>
<p>项目主管:王江</p>
<p>项目状态:<a href="javascript:void(0)" class="label label-success" style="border-radius: .25em;">启动</a></p>
<p>异常状态:<span style="color:green">无异常</span></p>
<p>加工量:1,817,375</p>
</div>
</div>

<div class="card">
<div class="header" style="background-color: #5BC0DE;">
<p>项目名称二</p>
</div>
<div class="body">
<p>项目经理:朱焕宏</p>
<p>项目主管:朱焕宏</p>
<p>项目状态:<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a></p>
<p>异常状态:<span style="color:green">无异常</span></p>
<p>加工量:0</p>
</div>
</div>

<div class="card">
<div class="header" style="background-color: #5BC0DE;">
<p>项目名称三</p>
</div>
<div class="body">
<p>项目经理:朱焕宏</p>
<p>项目主管:朱焕宏</p>
<p>项目状态:<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a></p>
<p>异常状态:<span style="color:green">无异常</span></p>
<p>加工量:0</p>
</div>
</div>

<div class="card">
<div class="header" style="background-color: #5BC0DE;">
<p>项目名称四</p>
</div>
<div class="body">
<p>项目经理:朱焕宏</p>
<p>项目主管:朱焕宏</p>
<p>项目状态:<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a></p>
<p>异常状态:<span style="color:green">无异常</span></p>
<p>加工量:0</p>
</div>
</div>

<div class="card">
<div class="header" style="background-color: #5BC0DE;">
<p>项目名称五</p>
</div>
<div class="body">
<p>项目经理:朱焕宏</p>
<p>项目主管:朱焕宏</p>
<p>项目状态:<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a></p>
<p>异常状态:<span style="color:green">无异常</span></p>
<p>加工量:0</p>
</div>
</div>
</body>

</html>


有修改,原文转自:http://blog.csdn.net/tyutjavalily/article/details/52159389
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值