Tạo danh sách số thứ tự bằng CSS3

CSS3 ordered list styles

Tạo style cho ordered lists luôn là một nhiệm vụ khá khó khăn. Bạn phải loại bỏ style mặc định của trình duyệt và thêm vào đó những style phù hợp với website của mình. Trong bài viết này bạn sẽ tìm hiểu làm thế nào để tinh chỉnh ordered lists bằng CSS3.

CSS

1Vào Mẫu >> chỉnh sửa HTML và chèn đoạn CSS dưới đây trước thẻ ]]></b:skin>

ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol {
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

2Chọn 1 trong 3 style dưới đây và dán sau đoạn code trên.

Style 1: Rounded-shaped numbers

.rounded-list a{position:relative;display:block;padding:.4em .4em .4em 2em;*padding:.4em;margin:.5em 0;background:#ddd;color:#444;text-decoration:none;border-radius:.3em;transition:all .3s ease-out}
.rounded-list a:hover{background:#eee}
.rounded-list a:hover:before{transform:rotate(360deg)}
.rounded-list a:before{content:counter(li);counter-increment:li;position:absolute;left:-1.3em;top:50%;margin-top:-1.3em;background:#87ceeb;height:2em;width:2em;line-height:2em;border:.3em solid #fff;text-align:center;font-weight:bold;border-radius:2em;transition:all .3s ease-out}

Style 2: Rectangle-shaped numbers

.rectangle-list a{position:relative;display:block;padding:.4em .4em .4em .8em;*padding:.4em;margin:.5em 0 .5em 2.5em;background:#ddd;color:#444;text-decoration:none;transition:all .3s ease-out}
.rectangle-list a:hover{background:#eee}
.rectangle-list a:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#fa8072;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold}
.rectangle-list a:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out}
.rectangle-list a:hover:after{left:-.5em;border-left-color:#fa8072}

Style 3: Circle-shaped numbers

.circle-list li{padding:2.5em;border-bottom:1px dashed #ccc}
.circle-list h2{position:relative;margin:0}
.circle-list p{margin:0}
.circle-list h2:before{content:counter(li);counter-increment:li;position:absolute;z-index:-1;left:-1.3em;top:-.8em;background:#f5f5f5;height:1.5em;width:1.5em;border:.1em solid rgba(0,0,0,.05);text-align:center;font:italic bold 1em/1.5em Georgia,Serif;color:#ccc;border-radius:1.5em;transition:all .2s ease-out}
.circle-list li:hover h2:before{background-color:#ffd797;border-color:rgba(0,0,0,.08);border-width:.2em;color:#444;transform:scale(1.5)}

• DEMO

HTML

Khi viết bài bạn viết theo cú pháp sau

<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                       
</ol>

Chỉnh sửa:
rounded-list tương ứng với style 1
rectangle-list tương ứng với style 2
circle-list tương ứng với style 3

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by rtd/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm