CSS để tạo danh sách bắt mắt

• Có Thể 18, 2024

Danh sách là một yếu tố thiết kế web tuyệt vời vì chúng cho phép người dùng cuối dễ đọc. Hầu hết người dùng muốn câu trả lời nhanh chóng và sẽ chỉ lướt qua một trang web ban đầu để xem liệu nó có trả lời câu hỏi của họ không. Điều này đặc biệt đúng nếu họ vào trang web của bạn thông qua một công cụ tìm kiếm.

Việc sử dụng thẻ tiêu đề và danh sách là một cách tuyệt vời để cho phép mọi người dễ dàng xem nội dung chính của trang web của bạn. Nếu họ cảm thấy các danh sách và tiêu đề phụ là thú vị, có nhiều khả năng họ sẽ vẫn ở trên trang web của bạn. Tất nhiên, điều này dẫn đến giảm tỷ lệ "thoát" và giúp cải thiện uy tín và xếp hạng trang web của bạn trong các công cụ. Bất cứ điều gì cải thiện khả năng đọc, giúp mắt dễ dàng lướt qua, sẽ luôn có lợi cho một trang web. Một thiết kế tuyệt vời luôn giữ cho sự dễ đọc trong tâm trí.

CSS là một cách dễ dàng và rất hiệu quả để tạo danh sách thời trang với các dấu đầu dòng tùy chỉnh (điểm đánh dấu). Bạn có thể bao gồm các hình dạng khác nhau hoặc đồ họa tùy chỉnh đơn giản gắn vào logo, màu sắc hoặc chủ đề của trang web của bạn. Ví dụ: trên trang web tham quan ma, tôi đã tạo một biểu tượng ma nhỏ được sử dụng trong thanh điều hướng bên và trên các mục danh sách không có thứ tự trên trang chính. Nó đơn giản, nhưng rất dễ thương và gắn liền với chủ đề trang web, làm cho các yếu tố trang đó nổi bật.

Những lần khác, đạn có thể làm sao lãng nội dung quan trọng trong danh sách. Trong trường hợp đó, thuộc tính kiểu danh sách "không" có thể được sử dụng để xóa các điểm đánh dấu được tạo tự động.

Danh sách kiểu thuộc tính

Sử dụng thuộc tính kiểu danh sách để chọn loại điểm đánh dấu xuất hiện với từng mục danh sách. Các giá trị có sẵn là đĩa, hình tròn, hình vuông, số thập phân, chữ La Mã thấp, chữ La Mã, chữ Hy Lạp thấp hơn, chữ Latinh thấp hơn, chữ Latinh trên, chữ alpha thấp hơn, chữ alpha trên và chữ cái không.

Để chỉ định hình ảnh của riêng bạn làm điểm đánh dấu, hãy sử dụng thuộc tính hình ảnh kiểu danh sách như sau:

ul {list-style-image: url (fantename.jpg);
danh sách-phong cách-vị trí: bên ngoài;
}

Url có liên quan đến biểu định kiểu và phải trỏ đến thư mục chứa hình ảnh của bạn. Trong trường hợp này, hình ảnh sẽ nằm trong cùng thư mục với tệp css và html. Nếu bạn đặt hình ảnh của mình vào một thư mục riêng biệt, bạn cũng sẽ bao gồm: url (hình ảnh / hình ảnh.jpg)

Vị trí đánh dấu

Bạn cũng có thể tùy chỉnh vị trí đánh dấu. Trong ví dụ trên, thuộc tính bên ngoài làm cho viên đạn xuất hiện bên ngoài khu vực nội dung.
list-style-location: bên trong cho phép viên đạn bên trong khu vực nội dung để nó chạy vào nội dung danh sách.

Kỹ thuật tốc ký

Một cách nhanh chóng khác để định dạng danh sách bằng CSS là kỹ thuật tốc ký. Với phương pháp này, tất cả các thuộc tính danh sách được chỉ định trong một thuộc tính:

ul
{
list-style: circle url ("image.gif");
}

trong phương pháp tốc ký, tất cả các giá trị phải xuất hiện theo thứ tự được chỉ định như sau:

kiểu danh sách
list-style-location (bên trong, bên ngoài)
danh sách-phong cách hình ảnh

Sẽ không có vấn đề gì nếu bạn bỏ qua một giá trị, miễn là các giá trị khác vẫn đúng thứ tự.

Danh sách tùy chỉnh rất hữu ích và CSS giúp chúng dễ dàng đạt được. Chi tiết đơn giản biến đổi các trang web trung bình thành các trang web hoạt động hàng đầu.

Video HướNg DẫN: SÁNG MẮT CHƯA? (MV) | TRÚC NHÂN (#SMC?) | ตาสว่างหรือยัง (Có Thể 2024).