TwitterFacebookRSS
You are here: Home » Wordpress » Tùy biến hiển thị tag ul cho danh sách sắp xếp không theo thứ tự

Tùy biến hiển thị tag ul cho danh sách sắp xếp không theo thứ tự

By: trongnguyen on May. 3, 2011 with 2 Comments

Thông thường để tạo tạo một danh sách (list) trong bài viết trên Blog chúng ta sẽ dùng các thẻ HTML sau:

  • ol – order list: dành cho danh sách các mục có đánh số theo thứ tự 1, 2, 3 hoặc a, b, c; I, II, III…
  • – unordered list dành cho danh sách không sắp xếp theo thứ tự

Trong bài viết hôm nay tôi sẽ cùng các bạn tùy biến hiển thị danh sách ul – danh sách sắp xếp không theo thứ tự xin mời bạn theo dõi các bước thực hiện bên dưới.

 

Lựa chọn icon cho mỗi mục trong danh sách

Do chúng ta sẽ dùng icon làm biểu tượng cho mỗi mục trong danh sách nên bạn hãy vào trang softicons.com và download 1 biểu tượng thích hợp (tôi đã tìm kiếm trên trang này với từ khóa arrow và download về biểu tượng sau):

Tùy biến hiển thị tag ul cho danh sách sắp xếp không theo thứ tự http://www.softicons.com/download/web-icons/web-2.0-green-icons-by-axialis-team/png/16/Arrow%20Next.png

Tùy biến mã

Tiếp theo bạn sẽ tùy biến phần hiển thị cho thẻ ul qua đoạn mã CSS sau:

#list2 {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0 0 0 20px;
padding-bottom:5px;
}
#list2 li{
background:transparent url(“http://nguyenhuutrong.com/images/list-items/list-item-1.png”) no-repeat scroll left 2px;
padding-left:22px;
padding-bottom:5px;
margin:0;
}

Bạn hãy thay url bằng trong thẻ li bằng đường dẫn tới file icon của bạn.

Ở đoạn mã CSS trên chúng ta đã thực hiện việc tùy biến cho 2 thẻ chính sau:

  • ul – định dạng chung cho danh sách không sắp xếp theo thứ tự
  • li –  định dạng của từng mục trong danh sách trên, chúng ta dùng 1 hình ảnh là list-item-1.png làm icon cho mỗi mục trong danh sách.

Sử dụng danh sách trong bài viết

Sau khi tùy biến mã CSS cho các thẻ ul, mỗi khi muốn tạo một danh sách sắp xếp không theo thứ tự bạn hãy sử dụng cấu trúc sau:

<ul id=”list2”>

<li>Mục 1 trong danh sách</li>

<li>Mục 2 trong danh sách</li>

</ul>


No related posts.

Tags:

Chào mừng bạn tới Blog của tôi, nơi chúng ta sẽ cùng sẻ chia những kinh nghiệm về việc xây dựng và phát triển website với Wordpress, kiến thức về Online marketing và ký sự sau mỗi chuyến đi khám phá những miền đất mới lạ.

No related posts.

Did you like this article? Share it below!


2 Comments to “Tùy biến hiển thị tag ul cho danh sách sắp xếp không theo thứ tự”

  • August 13, 2012 at 22:13
    trường tiểu học says:

    hay quá, thanks bạn nhiều lắm, bài viết đọc rất dễ hiểu

    Reply
    • August 13, 2012 at 23:38
      trongnguyen says:

      Cảm ơn lời động viên của bạn :)

      Reply

Post comment