Màn hình 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
Đúng
Tên đệm
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 | Xác định |
|---|---|
| w3-display-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 cùng bên phải của w3-display-container |
| w3-display-bottomleft | Hiển thị nội dung ở góc dưới cùng bên trái của w3-display-container |
| w3-display-bottomright | Hiển thị nội dung ở góc dưới cùng bên phải của w3-display-container |
| w3-display-left | Hiển thị nội dung ở bên trái (giữa bên trái) của w3-display-container |
| w3-display-right | Hiển thị nội dung ở bên phải (giữa bên phải) của w3-display-container |
| w3-display-middle | 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 ở dưới cùng giữa của w3-display-container |
| w3-display-position | Hiển thị nội dung ở một vị trí được chỉ định trong w3-display-container |
| w3-display-hover | Hiển thị nội dung khi di chuột bên trong w3-display-container |
| w3-left | Làm nổi một phần tử sang trái (float: left) |
| w3-phải | Làm nổi một phần tử sang bên phải (float: right) |
| w3-show | Hiển thị một phần tử (display: block) |
| w3-ẩn | Ẩn một phần tử (hiển thị: không có) |
| w3-di động | Thêm khả năng đáp ứng ưu tiên thiết bị di động cho bất kỳ phần tử 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 |
Các ví dụ
Thí 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>
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
Đúng
Tên đệm
Thí 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>
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
Top Mid
Bên trái
Đúng
Tên đệm
Bottom Mid
Thí 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>
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ị).
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Di chuột qua hộp này!
Top Mid
Bottom Mid
Thí 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>
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 ảnh để tạo ra các hiệu ứng di chuột thú vị:
Khaki pants, $19.99
Thí 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>
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.
Displaying A Flag
With a little bit of imagination, the w3-display-classes can be used to create a flag:
Example
<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>
Floating Classes
The w3-left class floats an element to the left, the w3-right class floats an element to the right:
w3-left
w3-right
Example
<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>
Note: Clear floats with the w3-clear class or put them inside a w3-container, like in the example above (clears floats automatically).
Hide and Show
Force an element to be shown or hidden with the w3-show or w3-hide class.
Example
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
These classes are often used to toggle between hiding and showing elements:
Example
Hello!
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<button class="w3-button w3-mobile">Link</button>