Làm đẹp cho Bullet List

[PVS]

Làm đẹp cho Bullet List

Bài viết này sẽ hướng dẫn các bạn làm đẹp cho Bullet List nhìn trông bắt mắt và thú vị hơn.

Dạng mặc định

Sau khi thay đổi
​

Cách làm như sau: Các bạn chỉ cần thêm đoạn code dưới đây vào template EXTRA.css và lưu lại là xong.

.message 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);
}

.message ol ol{
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.message .baseHtml ol li {
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;
}
.message .baseHtml ol li hover{
    background: #eee;
}
.message .baseHtml ol li:hover:before{
    transform: rotate(360deg);
}
.message .baseHtml ol li: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;
}
.message .baseHtml ul li {
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;
}
.message .baseHtml ul li hover{
    background: #eee;
}
.message .baseHtml ul li:hover:before{
    transform: rotate(360deg);
}
.message .baseHtml ul li:before {
    content: '*';
    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;
}

Chúc các bạn thành công.

Nguồn: mamcongnghe.com​

 

[kamchatka]

nếu mình thay nó thành icon thì sau nhỉ , mong được giúp đỡ

 

[PVS]

thì phải thay code thôi bạn

 

[dothinh]

thì phải thay code thôi bạn

Mình làm bị lỗi phần đánh số thứ tự, nó ra toàn số 1 -_-

 

[PVS]

code này là css mà bạn, nó đâu có làm thay đổi cấu trúc của mấy code gốc đâu @@, mình làm vẫn bình thường mà @@

 

[kamchatka]

thì phải thay code thôi bạn

cho mình xin cái đó đi bác @PVS

 

[PVS]

mình chưa thấy ai làm cả, không biết có thay được không nữa ^^!

 

[kamchatka]

bác mần thử đi xem thế nào

 

[PVS]

mình giốt code lắm ^^