html5卡片效果

最新推荐文章于 2024-06-14 09:00:00 发布

Amare丶

最新推荐文章于 2024-06-14 09:00:00 发布

阅读量9.8k

点赞数 2

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

html5 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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