Danh sách W3.CSS
Danh sách cơ bản
Lớp w3-ul được sử dụng để hiển thị danh sách cơ bản:
- Jill
- Đêm
- Adam
Danh sách có viền
Lớp w3-border thêm đường viền xung quanh danh sách:
- Jill
- Đêm
- Adam
Tiêu đề danh sách
Một ví dụ về cách thêm phần tử tiêu đề bên trong mục danh sách:
Tên
- Jill
- Đêm
- Adam
Ví dụ
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »Danh sách 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
Ví dụ
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »Danh sách căn giữa
Lớp w3-center có thể được sử dụng để căn giữa các mục danh sách trong danh sách:
- Jill
- Đêm
- Adam
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
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
Ví dụ
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »Danh sách có thể di chuột
Lớp w3-hoverable thêm màu nền xám cho mỗi mục danh sách khi di chuột qua:
- Jill
- Đêm
- Adam
Ví dụ
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »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
Ví 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> Hãy tự mình thử »Mục danh sách có thể đóng
Nhấp vào "x" để đóng/ẩn mục danh sách:
- Jill
- Adam
- Đêm giao thừa
Ví dụ
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
Hãy tự mình thử »Mẹo: HTML × thực thể là biểu tượng ưa thích cho các nút đóng (chứ không phải chữ "X").
Danh sách có phần đệm
Các lớp đệm w3 có thể được sử dụng để thêm phần đệm vào danh sách các mục:
- Jill
- Đêm
- Adam
- Jill
- Đêm
- Adam
Ví 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>
Hãy tự mình thử »Danh sách hình đại diện
Ví 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>
Hãy tự mình thử »Mẹo: Bạn sẽ tìm hiểu thêm về các lớp w3-bar trong các chương W3.CSS Bars và W3.CSS Navigation 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 chiều rộng để thay đổi điều này.
Ví dụ
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »chiều rộng 30%:
- Jill
- Adam
chiều rộng 50%:
- Jill
- Adam
Chiều rộng 80%:
- 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
Danh sách nhỏ
Sử dụng lớp w3-small để hiển thị một danh sách nhỏ:
- Jill
- Đêm
- Adam
Danh sách lớn
Sử dụng lớp w3-large để hiển thị danh sách lớn:
- Jill
- Đêm
- Adam
Danh sách lớn
Sử dụng lớp w3-xlarge để hiển thị danh sách cực lớn:
- Jill
- Đêm
- Adam
XXDanh sách lớn
Sử dụng lớp w3-xxlarge để hiển thị danh sách XXLarge:
- Jill
- Đêm
- Adam
XXXDanh sách lớn
Sử dụng lớp w3-xxxlarge để hiển thị danh sách XXXLarge:
- Jill
- Đêm
- Adam
Ví dụ
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hãy tự mình thử »Danh sách khổng lồ
Sử dụng lớp w3-jumbo để hiển thị danh sách "jumbo" khổng lồ:
- Jill
- Đêm
- Adam
