- Tham gia
- 28/02/2015
- Bài viết
- 17,149
- Được Like
- 12,745
Làm đẹp cho Bullet List 2
Như bài trước, bài viết này cũng 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.
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.
Chúc các bạn thành công.
Như bài trước, bài viết này cũng 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.
Mã:
.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 */
}
.baseHtml ul {
list-style: none; /* Remove default numbering */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.baseHtml ul ul {
margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.message .baseHtml ol li {
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;
}
.message .baseHtml ol li hover{
background: #eee;
}
.message .baseHtml ol li: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;
}
.message .baseHtml ol li:after {
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.message .baseHtml ol li:hover:after {
left: -.5em;
border-left-color: #fa8072;
}
.message .baseHtml ul li {
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;
}
.message .baseHtml ul li hover {
background: #eee;
}
.message .baseHtml ul li:before {
content: '*';
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;
}
.message .baseHtml ul li:after {
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.message .baseHtml ul li:hover:after {
left: -.5em;
border-left-color: #fa8072;
}
Chúc các bạn thành công.
Nguồn: vnnet.org
Bài viết liên quan
Bài viết mới