Danh sách W3.CSS
Danh sách cơ bản
Lớp w3-ul được sử dụng để hiển thị một danh sách cơ bản:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách có viền
Lớp w3-border thêm đường viền xung quanh danh sách:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tiêu đề danh sách
Một ví dụ về cách thêm một phần tử tiêu đề bên trong mục danh sách:
Tên
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Liệt kê dưới dạng thẻ
Các lớp w3-card- number có thể được sử dụng để hiển thị danh sách dưới dạng thẻ:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách ở giữa
Lớp w3-center có thể được sử dụng để căn giữa các mục danh sách trong một danh sách:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách màu
Các lớp màu w3 có thể được sử dụng để thêm màu vào danh sách:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Mục danh sách màu
Các lớp màu w3 có thể được sử dụng để thêm màu vào mục danh sách:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách có thể lưu trữ
Lớp w3-hoverable thêm màu nền xám vào từng mục danh sách khi di chuột qua:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Nếu bạn muốn một màu di chuột cụ thể, hãy thêm bất kỳ lớp w3-hover- color nào vào mỗi phần tử <li>:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
Mục danh sách có thể đóng
Nhấp vào "x" để đóng / ẩn một mục danh sách:
- Jill
- Adam
- đêm
Thí dụ
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
Mẹo: HTML & times; entity là biểu tượng ưu tiên cho các nút đóng (thay vì chữ "X").
Danh sách có đệm
Các lớp w3-padding có thể được sử dụng để thêm padding vào danh sách các mục:
- Jill
- đêm
- Adam
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
Danh sách hình đại diện
Thí dụ
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
Mẹo: Bạn sẽ tìm hiểu thêm về các lớp w3-bar trong các chương Thanh W3.CSS và Điều hướng W3.CSS của chúng tôi .
Chiều rộng danh sách
Danh sách có chiều rộng 100% theo mặc định. Sử dụng thuộc tính width để thay đổi điều này.
Thí dụ
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30% chiều rộng:
- Jill
- Adam
50% chiều rộng:
- Jill
- Adam
80% chiều rộng:
- Jill
- Adam
Danh sách nhỏ
Sử dụng lớp w3-tiny để hiển thị một danh sách nhỏ:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách nhỏ
Sử dụng lớp w3-small để hiển thị một danh sách nhỏ:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách lớn
Sử dụng lớp w3-large để hiển thị một danh sách lớn:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách XLarge
Sử dụng lớp w3-xlarge để hiển thị một danh sách cực lớn:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXDanh sách lớn
Sử dụng lớp w3-xxlarge để hiển thị danh sách XXLarge:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXDanh sách lớn
Sử dụng lớp w3-xxxlarge để hiển thị danh sách XXXLarge:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Danh sách Jumbo
Sử dụng lớp w3-jumbo để hiển thị một danh sách "jumbo" khổng lồ:
- Jill
- đêm
- Adam
Thí dụ
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>