Thẻ W3.CSS
John
Kiến trúc sư và kỹ sư
Các lớp thẻ W3.CSS
W3.CSS cung cấp các lớp sau để hiển thị các thẻ giống như giấy:
| Lớp học | Định nghĩa |
|---|---|
| thẻ w3 | Tương tự như w3-card-2 |
| w3-thẻ-2 | Vùng chứa cho bất kỳ nội dung HTML nào (bóng viền 2px) |
| w3-thẻ-4 | Vùng chứa cho bất kỳ nội dung HTML nào (bóng viền 4px) |
Thẻ màu
Để hiển thị thẻ màu, chỉ cần thêm lớp màu w3- :
thẻ w3
w3-thẻ-2
w3-thẻ-4
Nội dung thẻ
tiêu đề
Một số văn bản.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Thêm vùng chứa bên trong thẻ để tạo các phần khác nhau:
Ví dụ
<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> Hãy tự mình thử »Thẻ ảnh
Dãy Alps của Ý/Áo
Ví dụ
<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> Hãy tự mình thử »Hiệu ứng di chuột
Lớp w3-hover-shadow thêm hiệu ứng đổ bóng khi di chuột - điều này sẽ làm cho bất kỳ phần tử nào trông giống như một tấm thẻ khi di chuột qua (cùng kiểu với w3-card-4).
Di chuột qua tôi!
Ví dụ
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Hãy tự mình thử »Thêm ví dụ
Yêu cầu kết bạn
John Doe
Ví dụ
<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>Hãy tự mình thử » John Doe
1 yêu cầu kết bạn mới
Giám đốc điều hành tại Mighty Schools Tiếp thị và quảng cáo. Tìm kiếm một công việc mới và cơ hội mới.
Ví dụ
<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> Hãy tự mình thử »Tiện ích thời tiết
THỨ HAI
THỨ 3
THỨ TƯ
Ví dụ
<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> Hãy tự mình thử »