- 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.tw/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>
結果
驗證結果。
廣告