Hiển thị W3.CSS
Các lớp hiển thị cho phép bạn hiển thị các phần tử HTML ở các vị trí cụ thể bên trong các phần tử HTML khác:
Trên cùng bên trái
Trên cùng bên phải
Dưới cùng bên trái
Góc phải ở phía dưới
Bên trái
Phải
Ở giữa
Các lớp hiển thị W3.CSS
W3.CSS cung cấp các lớp hiển thị sau:
| Lớp học | Định nghĩa |
|---|---|
| w3-hiển thị-container | Vùng chứa cho các lớp w3-display- |
| w3-display-topleft | Hiển thị nội dung ở góc trên cùng bên trái của w3-display-container |
| w3-display-topright | Hiển thị nội dung ở góc trên bên phải của w3-display-container |
| w3-display-bottomleft | Hiển thị nội dung ở góc dưới bên trái của w3-display-container |
| w3-hiển thị-dưới cùng bên phải | Hiển thị nội dung ở góc dưới bên phải của w3-display-container |
| w3-hiển thị-trái | Hiển thị nội dung ở bên trái (giữa bên trái) của w3-display-container |
| w3-hiển thị-phải | Hiển thị nội dung ở bên phải (giữa bên phải) của w3-display-container |
| w3-hiển thị-giữa | Hiển thị nội dung ở giữa (giữa) của w3-display-container |
| w3-display-topmiddle | Hiển thị nội dung ở giữa trên cùng của w3-display-container |
| w3-display-bottommiddle | Hiển thị nội dung ở giữa dưới cùng của w3-display-container |
| w3-hiển thị-vị trí | Hiển thị nội dung tại một vị trí được chỉ định trong w3-display-container |
| w3-hiển thị-hover | Hiển thị nội dung khi di chuột bên trong w3-display-container |
| w3-trái | Di chuyển một phần tử sang trái (float: left) |
| w3-phải | Di chuyển một phần tử sang bên phải (float: right) |
| w3-show | Hiển thị một phần tử (hiển thị: khối) |
| ẩn w3 | Ẩn một phần tử (hiển thị: không có) |
| w3-mobile | Thêm khả năng phản hồi đầu tiên trên thiết bị di động cho bất kỳ thành phần nào. Hiển thị các phần tử dưới dạng phần tử khối trên thiết bị di động |
Ví dụ
Ví dụ
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
Hãy tự mình thử »Ví dụ tương tự như trên với phần đệm được thêm vào:
Trên cùng bên trái
Trên cùng bên phải
Dưới cùng bên trái
Góc phải ở phía dưới
Bên trái
Phải
Ở giữa
Ví dụ
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Hãy tự mình thử »Hiển thị văn bản bên trong hình ảnh:
Trên cùng bên trái
Trên cùng bên phải
Dưới cùng bên trái
Góc phải ở phía dưới
Hàng đầu giữa
Bên trái
Phải
Ở giữa
Dưới giữa
Ví dụ
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Hãy tự mình thử »Hiển thị di chuột
Lớp w3-display-hover hiển thị nội dung khi di chuột bên trong w3-display-container (chuyển từ ẩn sang hiển thị).
Trên cùng bên trái
Trên cùng bên phải
Dưới cùng bên trái
Góc phải ở phía dưới
Bên trái
Phải
Di chuột qua hộp này!
Hàng đầu giữa
Dưới giữa
Ví dụ
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div
class="w3-display-topright w3-display-hover">Top Right</div>
<div
class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div
class="w3-display-right w3-display-hover">Right</div>
<div
class="w3-display-middle">Mouse over this box!</div>
<div
class="w3-display-topmiddle w3-display-hover">Top Mid</div>
<div
class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>Hãy tự mình thử »Các lớp w3-display-hover có thể được kết hợp với các lớp hiệu ứng và hoạt hình để tạo ra các hiệu ứng di chuột thú vị:
Quần kaki, $19,99
Ví dụ
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png"
alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button
w3-black">John Doe</button>
</div>
</div> Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về hoạt ảnh và hiệu ứng sau trong hướng dẫn này.
Hiển thị một lá cờ
Với một chút trí tưởng tượng, các lớp w3-display-class có thể được sử dụng để tạo cờ:
Ví dụ
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Hãy tự mình thử »Lớp học nổi
Lớp w3-left thả nổi một phần tử sang bên trái, lớp w3-right thả nổi một phần tử sang bên phải:
w3-trái
w3-phải
Ví dụ
<div class="w3-bar w3-light-grey">
<div class="w3-left
w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>Hãy tự mình thử »Lưu ý: Xóa các float bằng lớp w3-clear hoặc đặt chúng bên trong w3-container , như trong ví dụ trên (tự động xóa các float).
Ẩn và hiển thị
Buộc một phần tử được hiển thị hoặc ẩn với lớp w3-show hoặc w3-hide .
Ví dụ
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p> Hãy tự mình thử »Các lớp này thường được sử dụng để chuyển đổi giữa các phần tử ẩn và hiển thị:
Lớp w3-mobile
Lớp w3-mobile bổ sung khả năng phản hồi ưu tiên thiết bị di động cho bất kỳ phần tử nào.
Nó thêm display:block và width:100% vào một phần tử trên màn hình rộng dưới 600px.
