Materialize CSS 卡片

2025年3月17日 | 阅读 3 分钟

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

索引类名描述
1)card用于将 div 元素标识为 Materialize 卡片容器。 必须在“外部”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 标识为小型卡片。 高度：300px;
10)card-medium用于将 div 标识为中型卡片。 高度：400px;
11)card-large用于将 div 标识为大型卡片。 高度：500px;

示例

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

立即测试

输出

Materialize Cards 1
下一个主题Materialize CSS 芯片





相关帖子




Logo

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们
Tpoint Tech Facebook PageTpoint Tech X PageTpoint Tech Linkedin PageTpoint Tech Telegram ChannelTpoint Tech Youtube ChannelTpoint Tech instagram Page
教程
Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程HTML 教程 JavaScript 教程jQuery 教程Spring 教程
面试题
Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys
在线编译器
C R C++ Php Java Html Swift Python JavaScript TypeScript
最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们
© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。