W3.CSS 卡片
John
建築師和工程師
W3.CSS 卡片類
W3.CSS 提供以下類來顯示紙質卡片
| 類 | 定義 |
|---|---|
| w3-card | 與 w3-card-2 相同 |
| w3-card-2 | 用於任何 HTML 內容的容器（2px 邊框陰影） |
| w3-card-4 | 用於任何 HTML 內容的容器（4px 邊框陰影） |
彩色卡片
要顯示彩色卡片，只需新增 w3-color 類
w3-card
w3-card-2
w3-card-4
卡片內容
Header
一些文字.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
在卡片內新增容器以建立不同的部分
示例
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h1>頁首</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
</div>
<footer class="w3-container w3-blue">
<h5>頁尾</h5>
</footer>
</div>
自己試試 »
照片卡片
義大利/奧地利阿爾卑斯山
示例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>義大利/奧地利阿爾卑斯山</p>
</div>
</div>
自己試試 »
懸停效果
w3-hover-shadow 類會在懸停時新增陰影效果——這會讓任何元素在滑鼠懸停時看起來都像卡片（與 w3-card-4 風格相同）。
將滑鼠懸停在我身上！
更多示例
好友請求
John Doe
示例
<div class="w3-card-4 w3-dark-grey">
<div class="w3-container w3-center">
<h3>好友請求</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>
<button class="w3-button w3-green">接受</button>
<button class="w3-button w3-red">拒絕</button>
</div>
</div>
自己試試 »
John Doe
1 條新好友請求
Mighty Schools 執行長。市場營銷和廣告。尋求新工作和新機會。
示例
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div class="w3-container">
<p>1 條新好友請求</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>Mighty Schools 總裁/執行長...</p>
</div>
<button class="w3-button w3-block w3-dark-grey">+ 連線</button>
</div>
自己試試 »
天氣小部件
倫敦 60° F
週一
週二
週三
示例
<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
<img src="img_london.jpg" alt="Lights" style="width:100%">
<div class="w3-xlarge w3-display-bottomleft w3-padding">LONDON 60° F</div>
</div>
<div class="w3-row">
<div class="w3-third w3-center">
<h3>週一</h3>
<img src="img_weather_sun.jpg" alt="sun">
</div>
<div class="w3-third w3-center">
<h3>週二</h3>
<img src="img_weather_cloud.jpg" alt="cloud">
</div>
<div class="w3-third w3-center w3-margin-bottom">
<h3>週三</h3>
<img src="img_weather_clouds.jpg" alt="clouds">
</div>
</div>
</div>
自己試試 »
