10/26/12

Tạo phong cách cho số thứ tự và gạch đầu dòng trong bài viết?

10/26/12


Khi viết blog , đánh số thứ tự (ol) và danh sách Bullet (ul) là một phần quan trọng để giúp cho bài viết tốt hơn, trình tự hơn. Để thay đổi giao diện của số thứ tự và danh sách này, chúng ta sẽ sử dụng CSS để thay đổi màu số thứ tự và danh sách khi rê chuột đến. Thủ thuật này gồm hai phần
  1. Làm thế nào để thay đổi giao diện của danh sách bullet (ul)
  2. Làm thế nào để thay đổi giao diện của số thứ tự (ol)
Làm thế nào để thay đổi giao diện của danh sách bullet (ul)
  • Vào blogger > Chỉnh Sửa HTMLL
  • Chèn code bên dưới vào trước thẻ ]]></b:skin>

.post ul {list-style-type: circle;
    }
.post ul li {
line-height: 1.5em;      
color:#289728;
}
.post ul li:hover {
       color:#0080ff;
list-style-type: disc;
}
.post ul p { color:#555555;
             line-height:1.4em;  }
Bạn có thể thay đổi màu cho phù hợp với sở thích và blog của mình
  • Lưu lại

Khi post bài các bạn chỉ cần sử dụng chức năng  trên thanh công cụ hoặc soạn thảo theo cú pháp bên dưới
<ul>
<li>Dòng 1</li>
<li>Dòng 2</li>
</ul>
Trong trường hợp không thành công bạn thử chèn <p> vào sau <li> và </p> vào trước </li>
<ul>
<li><p>Dòng 1</p></li>
<li><p>Dòng 2</p></li>
</ul> 
Làm thế nào để thay đổi giao diện của số thứ tự (ol)
Tương tự dán code sau vào trước thẻ  ]]></b:skin>

.post ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
.post ol li {
line-height: 1.4em;
font: italic 1em Georgia, Times, serif;
  color: #289728;
}
.post ol li:hover {
font:bold italic 1em Georgia, Times, serif;
  color: #0080ff;
}
.post ol p {
  font: normal 1em Arial, Helvetica, sans-serif;
  color: #555555;
  line-height:1.4em;
}
Thay đổi màu cho phù hợp
  • Lưu lại
Bạn dùng chức năng để thực hiện thủ thuật này

Chúc bạn thành công!
Tin liên quan
XEM TRÊN MOBILE

No comments:

Post a Comment

300x250