个性化阅读
专注于IT技术分析

Materialise CSS卡片

Materialize CSS提供了不同的CSS类, 以应用各种预定义的视觉和行为增强来显示各种类型的卡。

Index 班级名称 Description
1) card 用于将div元素标识为实现卡片容器。在”外部” div上是必需的。
2) card-content 它用于将div标识为卡片内容容器, 并且在”内部” div上是必需的。
3) card-title 它用于将div标识为卡片标题容器, 并且在”内部”标题div上是必需的。
4) card-action 它用于将div识别为卡片操作容器, 并为操作文本分配适当的文本特征。在”内部”动作div上需要;内容直接进入div内部, 没有中间容器。
5) card-image 它用于将div识别为卡片图像容器, 并且在”内部” div上是必需的。
6) card-reveal 它用于将div标识为显示的文本容器。
7) activator 它用于将div标识为显示的文本容器和要显示的图像。它用于显示与图像有关的上下文信息。
8) card-panel 它用于将div识别为带有阴影和填充的简单卡片。
9) card-small 用于将div识别为小型卡片。高度:300像素;
10) card-medium 用于将div识别为中型卡。高度:400像素;
11) card-large 用于将div识别为大型卡片。高度:500像素;

例子

让我们以一个示例来演示如何使用卡类来展示各种类型的卡。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-content">
                  <span class = "card-title"><h3>srcmini</h3></span>
                  <p>srcmini offers Industrial and Summer Training on Java, PHP, .Net, Hadoop, Data Analytics, R Programming, SAP, Android, Python, Oracle, Seleninum, Linux, C++ and many more technologies.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "https://www.srcmini02.com">
                     www.srcmini02.com</a>
               </div>
            </div>
         </div>
         
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image">
                  <img src = "html5-mini-logo.jpg">                
               </div>
               
               <div class = "card-content">                  
                  <p>srcmini offers Industrial and Summer 
				  Training on Java, PHP, .Net, Hadoop, Data Analytics, R Programming, SAP, Android, Python, Oracle, Seleninum, Linux, C++ and many more technologies.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "https://www.srcmini02.com">
                    www.srcmini02.com</a>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image waves-effect waves-block waves-light">
                  <img class = "activator" src = "html5-mini-logo.jpg">                
               </div>
               
               <div class = "card-content activator">                  
                  <p>Click the image to reveal more information.</p>
               </div>
               
               <div class = "card-reveal">
                  <span class = "card-title grey-text text-darken-4">HTML5
                     <i class = "material-icons right">close</i></span>
                  <p>srcmini offers Industrial and Summer Training on Java, PHP, .Net, Hadoop, Data Analytics, R Programming, SAP, Android, Python, Oracle, Seleninum, Linux, C++ and many more technologies.</p>
               </div>
               
               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "https://www.srcmini02.com">
                     www.srcmini02.com</a>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "row">
         <div class = "col s12 m3">
            <div class = "card-panel teal">
               <span class = "white-text">Simple Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card small teal">
               <span class = "white-text">Small Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card medium teal">
               <span class = "white-text">Medium Card</span>
            </div>
         </div>
         
         <div class = "col s12 m3">
            <div class = "card large teal">
               <span class = "white-text">Large Card</span>
            </div>
         </div>
      </div>     	  
   </body>   
</html>

立即测试

输出

Materialise卡片1
赞(0)
未经允许不得转载:srcmini » Materialise CSS卡片

评论 抢沙发

评论前必须登录!