W3.CSS 카드
남자
건축가 및 엔지니어
W3.CSS 카드 클래스
W3.CSS는 종이와 같은 카드를 표시하기 위해 다음 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3 카드 | w3-card-2와 동일 |
| w3-카드-2 | 모든 HTML 콘텐츠용 컨테이너(2px 테두리가 있는 그림자) |
| w3-카드-4 | 모든 HTML 콘텐츠에 대한 컨테이너(4px 테두리가 있는 그림자) |
컬러 카드
To display colored cards, just add w3-color class:
w3-card
w3-card-2
w3-card-4
Example (White Cards)
<div class="w3-card">
<p>w3-card</p>
</div>
Example (Yellow Cards)
<div class="w3-card w3-yellow">
<p>w3-card</p>
</div>
Card Content
Header
Some text.. 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.
Add containers inside the card to create different sections:
Example
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div>
Photo Card
The Italian / Austrian Alps
Example
<div class="w3-card-4">
<img src="img_snowtops.jpg"
alt="Alps">
<div class="w3-container w3-center">
<p>The Italian / Austrian Alps</p>
</div>
</div>
Hover Effect
The w3-hover-shadow class adds a shadow effect on hover - this will make any element look like a card on mouse-over (same style as w3-card-4).
Hover over me!
Example
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div>
More Examples
Friend Request
John Doe
Example
<div class="w3-card-4 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-button w3-green">Accept</button>
<button class="w3-button w3-red">Decline</button>
</div>
</div>
John Doe
1 new friend request
CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.
Example
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-button
w3-block
w3-dark-grey">+ Connect</button>
</div>
Weather Widget
LONDON 60° F
MON
TUE
WED
Example
<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>MON</h3>
<img src="img_weather_sun.jpg"
alt="sun">
</div>
<div class="w3-third w3-center">
<h3>TUE</h3>
<img
src="img_weather_cloud.jpg" alt="cloud">
</div>
<div class="w3-third
w3-center w3-margin-bottom">
<h3>WED</h3>
<img src="img_weather_clouds.jpg"
alt="clouds">
</div>
</div>
</div>