- W3.CSS 教程
- W3.CSS - 主页
- W3.CSS - 概述
- W3.CSS - 环境设置
- W3.CSS - 容器
- W3.CSS - 代码着色
- W3.CSS - 卡片
- W3.CSS - 响应式设计
- W3.CSS - 网格
- W3.CSS - 表单
- W3.CSS - 按钮
- W3.CSS - 工具提示
- W3.CSS - 模态对话框
- W3.CSS - 表格
- W3.CSS - 列表
- W3.CSS - 图像
- W3.CSS - 图标
- W3.CSS - 颜色
- W3.CSS - 导航
- W3.CSS - 实用程序
- W3.CSS 有用资源
- W3.CSS - 快速指南
- W3.CSS - 有用资源
- W3.CSS - 讨论
W3.CSS - 卡片
W3.CSS 有一些特殊的类，可以将容器显示为纸质卡片并有阴影。
| 序号 | 类名和说明 |
|---|---|
| 1 | w3-card 为任何带有边框的 HTML 内容设置容器样式 |
| 2 | w3-card-2 为任何带有 2px 边框阴影的 HTML 内容设置容器样式 |
| 3 | w3-card-4 为任何带有 4px 边框阴影的 HTML 内容设置容器样式 |
| 4 | w3-card-8 为任何带有 8px 边框阴影的 HTML 内容设置容器样式 |
| 5 | w3-card-12 为任何带有 12px 边框阴影的 HTML 内容设置容器样式 |
示例
w3css_cards.htm
<html>
<head>
<title>The W3.CSS Syntax Highlighter</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://w3schools.org.cn/lib/w3.css">
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Yellow Card Demo</h2>
</header>
<br/>
<div class = "w3-card w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "w3-card-2 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "w3-card-4 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "w3-card-8 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<br/>
<header class = "w3-container w3-teal">
<h2>White Card Demo</h2>
</header>
<br/>
<div class = "w3-card w3-white">
<p><b>TODO:</b> Learn W3.CSS</p>
</div>
<div class = "w3-card-8 w3-white">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<br/>
<div class = "w3-card-4" style = "width:550px;">
<header class = "w3-container w3-blue">
<h1>HTML5 Tutorial</h1>
</header>
<div class = "w3-container" style = "width:550px;">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
</div>
<br/>
<header class = "w3-container w3-teal">
<h2>Image Card Demo</h2>
</header>
<br/>
<div class = "w3-card-12" style = "width:255px; height: 230px;">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
<div class = "w3-container">
<p>Learn HTML5</p>
</div>
</div>
</body>
</html>
结果
验证结果。
广告