Home > Html5 & Css3 > CSS đếm số item theo chỉ mục

CSS đếm số item theo chỉ mục

Ví dụ: chúng ta có một yêu cầu hiển thị danh sách theo chỉ mục

1. danh mục 1
1.1. danh mục con 1.1
1.1.1. danh mục con 1.1.1
1.2. danh mục con 1.2

2. danh mục 2

……

Không cần phải code, cũng ko cần phải dùng jquery để đọc các node, css hoàn toàn có thể làm được điều này

# Bước 1:
các bạn khai báo file css đặt tên format_list.css


ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

# Bước 2 tạo một file.html
– gọi file format_list.css vào trong phần header của file.html

– Test nội dung file html
css counter list items

// các bạn sẽ thấy output theo thứ tự & sub thứ tự thật tuyệt vời
1. Coffee
1.1. Black tea
1.2. Green tea
2. Milk

Chúc các bạn thành công
nhantam
thiết kế web Panpic

Advertisements
Categories: Html5 & Css3
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: