html卡片布局样式 - 好文

效果图如下

代码如下
<!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"> .cardBox { 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; padding: 5px; padding-top: 15px; } .headerBox {
color: #fff; padding: 10px; font-size: 15px; height: 60px; } .bodyBox { padding:
10px; } .bodyBox p { margin-left: 5px; } </style> </head> <body> <div> <div
class="cardBox"> <div class="headerBox" style="background-color: #4caf50;"> <p>
<a title="查看详情" style="cursor: pointer; color:white" onclick=
"viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a> </p> </div> <div class="bodyBox"> <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=
"cardBox"> <div class="headerBox" style="background-color: #5BC0DE;"> <p>项目名称二</
p> </div> <div class="bodyBox"> <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="cardBox"> <div class="headerBox" style="background-color:
#5BC0DE;"> <p>项目名称三</p> </div> <div class="bodyBox"> <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="cardBox"> <div class="headerBox"
style="background-color: #5BC0DE;"> <p>项目名称四</p> </div> <div class="bodyBox"> <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=
"cardBox"> <div class="headerBox" style="background-color: #5BC0DE;"> <p>项目名称四</
p> </div> <div class="bodyBox"> <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="cardBox"> <div class="headerBox" style="background-color:
#5BC0DE;"> <p>项目名称四</p> </div> <div class="bodyBox"> <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="cardBox"> <div class="headerBox"
style="background-color: #5BC0DE;"> <p>项目名称五</p> </div> <div class="bodyBox"> <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> <div> <div
class="cardBox"> <div class="headerBox" style="background-color: #4caf50;"> <p>
<a title="查看详情" style="cursor: pointer; color:white" onclick=
"viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a> </p> </div> <div class="bodyBox"> <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> </body>
</html>

热门工具换一换