html5卡片效果

叁歲伎倆 2022-06-14 03:43 239阅读 0赞

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

</ body>

</ html>

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

html5卡片效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关玻璃形态卡片悬停效果

相关 CSS卡片渐变悬停效果

相关列表卡片效果

相关卡片点击特效Html5

相关 html5卡片平行视差效果,HTML5 粉红色晶矿平行视差动效

相关 html5烟花绽放效果

相关 HTML5拖拽效果

相关 recyclerview 实现卡片滑动效果

相关 html5卡片效果

相关 css实现折叠卡片效果