Cách thực hiện - Nhóm danh sách có huy hiệu
Tìm hiểu cách tạo Nhóm danh sách có Huy hiệu bằng cách sử dụng CSS.
Nhóm danh sách có huy hiệu
- Hộp thư đến 2
- 5 khác
- Đã lưu
- Chất liệu
- Cũ
Cách tạo nhóm danh sách
Bước 1) Thêm HTML:
Ví dụ
<ul>
<li>Inbox <span class="badge">2</span></li>
<li>Other <span class="badge">5</span></li>
<li>Saved</li>
<li>Stuff</li>
<li>Old</li>
</ul>
Bước 2) Thêm CSS:
Ví dụ
/* Transform a basic list into a customized list group */
ul.list-group {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.list-group li {
border: 1px solid #ddd;
margin-top:
-1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
}
/* Style badges inside the list group */
ul.list-group .badge {
background-color: red;
color:
#fff;
font-weight: bold;
border-radius: 50%;
padding: 5px 10px;
text-align: center;
margin-left: 5px;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn về danh sách CSS của chúng tôi để tìm hiểu thêm về danh sách HTML và cách tạo kiểu cho chúng.