Materialise CSS卡片 _MaterializeCSS

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.srcmini.com"> www.srcmini.com< /a> < /div> < /div> < /div> < div class = "col s12 m6"> < div class = "card blue-grey lighten-4"> < div class = "card-image"> < img src = "http://www.srcmini.com/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.srcmini.com"> www.srcmini.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 = "http://www.srcmini.com/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.srcmini.com"> www.srcmini.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 CSS卡片】输出