카드를 표시
존
건축가 및 엔지니어
| 수업 | 정의 |
|---|---|
| W3 카드 | (테두리) 모든 HTML 콘텐츠에 대한 컨테이너 |
| W3 카드-2 | 모든 HTML 콘텐츠 컨테이너 (2 픽셀의 보더 그림자) |
| W3 카드-4 | 모든 HTML 콘텐츠 컨테이너 (4 픽셀 보더 그림자) |
| W3 카드-8 | 모든 HTML 콘텐츠 컨테이너 (8px 보더 그림자) |
| W3 카드-12 | 모든 HTML 콘텐츠 컨테이너 (12 픽셀 경계 그림자) |
| W3 카드-16 | 모든 HTML 콘텐츠 컨테이너 (16px 경계 그림자) |
| W3 카드-24 | 모든 HTML 콘텐츠 컨테이너 (24 픽셀 경계 그림자) |
컬러 카드
W3 카드 클래스와 종이 같은 카드를 만들고 색상을 추가 할 W3 컬러 클래스를 사용 :
W3 카드-2
W3 카드-4
W3 카드-8
사진 카드
하르, 노르웨이 트롤의 혀
예
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> »그에게 자신을보십시오 카드 내용
머리글
일부 텍스트 .. LOREM의 ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
예
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> »그에게 자신을보십시오 호버 효과
W3-호버 그림자 클래스는 마우스 오버에 그림자 효과를 추가 -이 모든 요소 (W3 카드-4와 같은 스타일) 마우스 오버에 카드처럼 보이게됩니다.
저 위에 마우스를 올려!
더 예
친구 요청
존 도
예
<div class="w3-card-8 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-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> »그에게 자신을보십시오 존 도
1 새 친구 요청
마이티 학교에서 CEO. 마케팅 및 광고. 새로운 일자리와 새로운 기회를 찾는.
예
<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-btn-block
w3-dark-grey">+ Connect</button>
</div> »그에게 자신을보십시오