Sử dụng CSS để tạo kiểu cho một đám mây thẻ
thẻ đám mây là mô tả trực quan về danh sách các mục. Bạn sẽ thường thấy các đám mây thẻ trên blog. Nó đã được phổ biến bởi các trang web như Flickr.
Đám mây thẻ là danh sách các liên kết thay đổi về kích thước và trọng lượng (đôi khi màu quá) tùy thuộc vào một số thuộc tính có thể đo lường. Hầu hết các đám mây thẻ được xây dựng dựa trên mức độ phổ biến hoặc số trang được gắn thẻ với thẻ cụ thể đó. Nhưng bạn có thể tạo một đám mây thẻ từ bất kỳ danh sách các mục nào trên trang web của bạn có ít nhất hai cách hiển thị chúng. Ví dụ:
- Một danh sách các bài viết theo thứ tự bảng chữ cái với các phong cách cho thấy sự phổ biến của các bài báo.
- Một danh sách các trang web theo thứ tự bảng chữ cái với các kiểu cho biết bạn thích cái nào nhất.
- Một danh sách các biên tập viên Web được liệt kê theo thứ tự giá với các phong cách cho biết mức độ gần gũi của từng trình soạn thảo theo một bộ tiêu chí được xác định trước.
- Một danh sách bạn bè với các phong cách cho biết khoảng cách từ nhà bạn đến nhà họ.
Bạn cần gì để xây dựng một đám mây thẻ?
Thật dễ dàng để tạo một đám mây thẻ, bạn chỉ cần hai thứ:
- Danh sách các mục (như bài viết trên Web, trang web hoặc bạn bè của bạn)
- Đo lường cho từng mục (như lượt xem trang mỗi ngày, xếp hạng 1-10 của bạn hoặc khoảng cách tới nhà bạn).
Hầu hết các đám mây thẻ là danh sách các liên kết, do đó, nó giúp ích nếu mỗi mục có một URL được liên kết với nó. Nhưng điều đó không bắt buộc phải tạo ra một hệ thống phân cấp trực quan.
Các bước để tạo một đám mây thẻ của các liên kết phổ biến
Trang web của tôi có các bài viết nhận lượt xem trang mỗi ngày và đây là chỉ số dễ sử dụng để tôi tạo một đám mây thẻ. Vì vậy, trong ví dụ này, chúng tôi sẽ tạo một đám mây thẻ từ một danh sách các bài viết, 25 bài viết hàng đầu trên trang web của tôi trong tuần của ngày 1 tháng 1 năm 2007.
- Xác định có bao nhiêu cấp độ bạn muốn trong hệ thống phân cấp của bạn.
- Mặc dù có thể có nhiều cấp độ trong đám mây của bạn vì bạn có các mục trong danh sách của mình, điều này trở nên tẻ nhạt đối với mã và sự khác biệt có thể rất nhỏ. Tôi khuyên bạn không nên có quá 10 cấp trong hệ thống phân cấp của mình.
- Quyết định điểm cắt cho mỗi cấp độ.
- Nó có thể đơn giản như cắt số lượt xem trang của bạn mỗi ngày thành 1/10 lát - nghĩa là. nếu trang lớn nhất trên trang web của bạn nhận được 100 lượt xem trang mỗi ngày, bạn có thể cắt nó thành 100+, 90-100, 80-90, 70-80, v.v. Tôi đã cắt nhỏ lượt xem trang của mình theo cách đó.
- Liệt kê các mục của bạn theo thứ tự xem trang và cung cấp cho chúng xếp hạng dựa trên bước 2
- Đừng lo lắng nếu bạn không có bất kỳ mục nào trong một số các khe, điều đó chỉ làm cho đám mây thú vị hơn.
- Khu nghỉ dưỡng của bạn trong danh sách theo thứ tự bảng chữ cái (hoặc bất kỳ thứ hai sắp xếp bạn muốn sử dụng).
- Đây là điều làm cho đám mây trở nên thú vị. Nếu bạn để nó được sắp xếp theo thứ hạng, thì nó sẽ chỉ là một danh sách có các mục lớn nhất ở trên xuống đến nhỏ nhất ở phía dưới.
- Viết HTML của bạn để xếp hạng là số lớp. class = "tag4"> Thêm tệp âm thanh trực tuyến
Khi bạn có HTML cho từng mục danh sách riêng lẻ và thứ tự bạn muốn hiển thị chúng, thì bạn cần đưa ra quyết định. Bạn có thể đặt các liên kết trong một đoạn văn và bạn sẽ hoàn thành. Nhưng điều này sẽ không được đánh dấu theo ngữ nghĩa và bất kỳ ai không có CSS đến với đám mây thẻ của bạn sẽ chỉ thấy một đoạn liên kết lớn. HTML cho loại danh sách này sẽ trông giống như sau:
Thêm tệp âm thanh trực tuyến Thẻ cơ bản cho trang web Phần mềm thiết kế web tốt nhất Tạo trang web cho trang web bị mất hoàn toàn Biểu tượng màu Thay vào đó, tôi khuyên bạn nên tạo đám mây thẻ của mình bằng cách sử dụng danh sách không theo thứ tự. Đó là một vài dòng mã HTML và CSS nhưng nó đảm bảo rằng nội dung sẽ có thể đọc được bất kể ai đến xem nó. HTML sẽ trông như thế này: Bây giờ chúng ta có được phần thú vị - các kiểu CSS. Khi bạn tạo kiểu cho đám mây thẻ, bạn thường thay đổi kích thước phông chữ và trọng số phông chữ. Bạn cũng có thể thay đổi màu sắc của phông chữ hoặc nền hoặc bất kỳ thuộc tính kiểu nào khác, nhưng kích thước và trọng lượng là truyền thống. Bạn cần 10 lớp kiểu, một cho mỗi thứ hạng thẻ: Tôi muốn bao gồm một số kiểu xung quanh đám mây: đặt chính giữa văn bản trên đám mây, đặt chiều cao dòng để đám mây có thể đọc được và đảm bảo rằng các thẻ neo không có đệm trên chúng: Cuối cùng, nếu bạn đang sử dụng phương thức tạo kiểu ngữ nghĩa (ví dụ: danh sách không theo thứ tự), bạn sẽ cần thêm hai dòng CSS nữa để danh sách không có dấu đầu dòng và không bị thụt lề:
Nhưng phong cách cho đám mây từ khóa ở đâu