Làm thế nào để sử dụng hình ảnh trong danh sách cho HTML5 và CSS3 Lập trình

Nó không phải là một nền, nhưng bạn cũng có thể sử dụng hình ảnh cho các mục danh sách cho trang web HTML5 và CSS3 của bạn. Đôi khi, bạn có thể muốn có một số loại bullet đặc biệt cho danh sách của bạn.

Trên trang này, một số giống ớt đã được liệt kê. Đối với loại danh sách này, một hạt tiêu tiêu biểu là chỉ là điều. Tất nhiên, CSS là câu trả lời:

listImages. html
Danh sách-style-image: url ("pepper.gif");}

Hoa tiêu yêu thích của tôi

Green
Habenero
Arrivivi Gusano

Thuộc tính dạng danh sách-style-image cho phép bạn để đính kèm một hình ảnh vào một mục danh sách. Để tạo các đạn tùy chỉnh:

1. Bắt đầu với một hình ảnh tùy chỉnh.

   Hình ảnh Bullet nên nhỏ, vì vậy bạn có thể phải làm gì đó ít. Hình ảnh sẽ được cắt tỉa theo chiều rộng thích hợp, nhưng nó sẽ có chiều cao của hình gốc, vì vậy làm cho nó nhỏ.

2. Xác định danh sách-style-image với một thuộc tính url.

   Bạn có thể đặt hình ảnh dưới dạng danh sách-kiểu-hình ảnh, và tất cả các viên đạn sẽ được thay thế bằng hình ảnh đó.

3. Kiểm tra danh sách trong trình duyệt của bạn.

   Hãy chắc chắn mọi thứ đang hoạt động chính xác. Kiểm tra để xem trình duyệt có thể tìm thấy hình ảnh, kích thước là đúng, và mọi thứ trông giống như bạn mong đợi.

Nếu bạn không muốn sử dụng một hình ảnh, CSS có một số kiểu khác mà bạn có thể áp dụng cho các mục trong danh sách của bạn. Sử dụng quy tắc kiểu danh sách kiểu để đặt danh sách của bạn thành một trong nhiều kiểu. Xem tài liệu CSS chính thức cho một danh sách đầy đủ, nhưng các kiểu kiểu thông dụng nhất là đĩa, hình tròn, hình vuông, thập phân, trên roman, thấp hơn-roman, trên latin, và latin thấp.

Lưu ý rằng bạn có thể áp dụng kiểu dáng số cho một mục trong danh sách được sắp thứ tự hoặc không có thứ tự, vì vậy sự phân biệt giữa các loại danh sách này ít quan trọng hơn so với trước đây.