html5卡片效果

< 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,375p>

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>加工量：0p>

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>加工量：0p>

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>加工量：0p>

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>加工量：0p>

div>

div>

body>

html>

有修改，原文转自：http://blog.csdn.net/tyutjavalily/article/details/52159389