本文主要是介绍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: 200 px;
box-shadow: 0 4 px 8 px 0 rgba( 0, 0, 0, 0.2), 0 6 px 20 px 0 rgba( 0, 0, 0, 0.19);
text-align: center;
float: left;
margin-right: 10 px;
}
.header {
color: #fff;
padding: 10 px;
font-size: 15 px;
height: 60 px;
}
.body {
padding: 10 px;
}
.body p {
margin-left: 5 px;
}
</ 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
这篇关于html5卡片效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
