Element Card 卡片的具体使用

组件— 卡片

基础用法

 
  卡片名称
  操作按钮
 
 
  {{'列表内容 ' + o }}
 



 .text {
  font-size: 14px;
 }

 .item {
  margin-bottom: 18px;
 }

 .clearfix:before,
 .clearfix:after {
  display: table;
  content: "";
 }
 .clearfix:after {
  clear: both
 }

 .box-card {
  width: 480px;
 }

简单卡片

 
  {{'列表内容 ' + o }}
 



 .text {
  font-size: 14px;
 }

 .item {
  padding: 18px 0;
 }

 .box-card {
  width: 480px;
 }

带图片

 
  
   ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zaGFkb3cuZWxlbWVjZG4uY29tL2FwcC9lbGVtZW50L2hhbWJ1cmdlci45Y2Y3YjA5MS01NWU5LTExZTktYTk3Ni03ZjRkMGIwN2VlZjYucG5n)
   
    好吃的汉堡
    
     {{ currentDate }}
     操作按钮
    
   
  
 



 .time {
  font-size: 13px;
  color: #999;
 }
 
 .bottom {
  margin-top: 13px;
  line-height: 12px;
 }

 .button {
  padding: 0;
  float: right;
 }

 .image {
  width: 100%;
  display: block;
 }

 .clearfix:before,
 .clearfix:after {
   display: table;
   content: "";
 }
 
 .clearfix:after {
   clear: both
 }

卡片阴影

 
  
   总是显示
  
 
 
  
   鼠标悬浮时显示
  
 
 
  
   从不显示
  
 

Attributes：

到此这篇关于Element Card 卡片的具体使用的文章就介绍到这了,更多相关Element Card 卡片内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！