html5卡片效果

最新推荐文章于 2025-06-04 19:12:01 发布

Amare丶

最新推荐文章于 2025-06-04 19:12:01 发布

阅读量1w

点赞数 2

分类专栏： html5 文章标签： html5 web

html5 专栏收录该内容

2 篇文章

订阅专栏

<!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