W3.CSS Cards (卡片)
W3.CSS提供了以下用于顯示紙質(zhì)卡的類：
| 類 | 定義 |
|---|---|
| w3-card
|
與 w3-card-2 相同 |
| w3-card-2 | 任何 HTM L內(nèi)容的容器（2px帶陰影的陰影） |
| w3-card-4
|
任何 HTML 內(nèi)容的容器（4px帶邊框的陰影） |
彩色卡片
要顯示彩色卡片，只需添加 w3-color 類：
實(shí)例（黃卡）
<div class="w3-card w3-yellow">
<p>w3-card</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
卡內(nèi)容
在卡內(nèi)添加容器以創(chuàng)建不同的部分：
實(shí)例
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h1>標(biāo)頭</h1>
</header>
<div class="w3-container">
<p>一些文字.. </p>
</div>
<footer class="w3-container w3-blue">
<h5>頁腳</h5>
</footer>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
相片卡
實(shí)例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="阿爾卑斯山">
<div class="w3-container w3-center">
<p>意大利/奧地利阿爾卑斯山</p>
</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
懸停效果
在 w3-hover-shadow 類添加懸停陰影效果-這會讓任何元素看起來像鼠標(biāo)懸停（相同的樣式 w3-card-4）的卡片。
實(shí)例
<p>將鼠標(biāo)懸停在我身上！</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多例子
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>約翰·杜</h3>
</header>
<div class="w3-container">
<p>1個(gè)新朋友請求</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>Mighty Schools的首席執(zhí)行官。市場營銷和廣告學(xué)學(xué)者。尋求新工作和新機(jī)會。</p>
</div>
<button class="w3-button w3-block w3-dark-grey">+ 連接</button>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<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">倫敦60°華氏度</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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：