Sử dụng tuyệt vời các danh sách HTML trong thiết kế web
Bạn có thể tìm thấy danh sách được thiết kế tốt trên Internet. Các nhà thiết kế đã sử dụng chúng trong nhiều thập kỷ để phối hợp thông tin trang và bố cục, và trong web ngày nay, bạn có thể thấy sự sáng tạo tuyệt vời trong cách các nhà thiết kế web đang sử dụng danh sách. Chúng bao gồm menu điều hướng, liên kết hồ sơ, lưu trữ, nhiệm vụ / danh sách kiểm tra và hàng tấn sử dụng khác!
Trong bài đăng này, tôi sẽ giới thiệu các loại danh sách HTML khác nhau, với các mẹo về thiết kế chúng, đặc biệt là về cách thêm một cạnh duy nhất vào danh sách của bạn. Ngoài ra, tôi sẽ đưa bạn qua một vài ví dụ về các trang web có thiết kế danh sách tuyệt vời và cuối cùng bạn sẽ nhận được một danh sách các trang web có danh sách HTML được thiết kế độc đáo. Không còn nghi ngờ gì nữa về cách làm cho danh sách đơn giản của bạn trông độc đáo và hãy bắt đầu tận dụng tối đa chúng từ hôm nay!
Các yếu tố danh sách
Các nhà thiết kế web liên tục nhảy từ nhóm này sang nhóm khác, do đó làm cho phong cách trang web thay đổi theo thời gian, nhưng danh sách đã đứng trước thử thách của thời gian và rất có thể sẽ xuất hiện trong sự đổi mới trong tương lai của World Wide Web.
Trước khi kiểm tra các ví dụ tôi muốn đề cập đến một vài điểm với danh sách HTML. Có một vài loại danh sách khác nhau mà bạn có thể sử dụng trong công việc thiết kế của riêng bạn. Phần lớn các nhà thiết kế web tập trung vào Danh sách không theo thứ tự được mở bằng
nhưng cũng có hai biến thể ít phổ biến khác: Danh sách đặt hàng và Định nghĩa dữ liệu. Tôi đã đi sâu vào chi tiết bên dưới.
Danh sách không theo thứ tự ()
Có thể là một trong những yếu tố được sử dụng nhiều nhất trong các tiêu chuẩn HTML4 / HTML5. Danh sách không có thứ tự sẽ xuất dữ liệu theo cùng một cách với danh sách được sắp xếp, tuy nhiên bạn sẽ không thấy bất kỳ dấu số nào ở bên cạnh. Thay vào đó, mỗi mục được đưa ra một vòng tròn nhỏ hoặc đĩa và chia nhỏ thành một dòng mới. Biểu tượng này cũng có thể được thay đổi với thuộc tính kiểu kiểu danh sách tìm thấy trong CSS.
Dưới đây là mã ví dụ của danh sách không có thứ tự:
- Mục 1
- Mục 2
- Mục 3
Danh sách không có thứ tự là phương thuốc hoàn hảo để xây dựng liên kết điều hướng. Vì bạn có thể dễ dàng lồng toàn bộ danh sách trong bất kỳ mục danh sách nó là một vấn đề đơn giản để tạo liên kết điều hướng phụ cũng. Sau khi xóa kiểu danh sách, bạn sẽ để lại một thành phần mục trống. Từ đây, bạn có thể định kiểu các liên kết neo để xuất hiện dưới dạng các thành phần khối trên trang của mình, do đó điền vào thiết kế menu điều hướng và với một số mã jQuery, bạn có thể đặt một tiêu đề đẹp cho trang web của mình.
Thông thường nhất bạn sẽ tìm thấy danh sách không có thứ tự ở giữa các bài viết web hoặc hướng dẫn cài đặt. Hãy chú ý rằng Google và các bot tìm kiếm khác không xử lý nội dung trang của bạn theo cách khác, vậy bạn SEO không nên bị ảnh hưởng cho dù bạn chọn loại danh sách nào.
Danh sách đặt hàng ()
Khi bạn cần đặt một bộ dữ liệu, có thể thiết lập khung bố cục của riêng bạn từ đầu, nhưng theo cách này, bạn sẽ cần phải thêm từng số tăng dần bằng tay, có thể gây mệt mỏi. Danh sách đặt hàng là tuyệt vời cho giữ các nhiệm vụ được đánh số theo hàng mà không có bất kỳ vít-up. Thứ tự của các mục danh sách nội bộ của bạn () sẽ ra lệnh làm thế nào dữ liệu được trình bày.
Dưới đây là mã ví dụ của danh sách được đặt hàng:
- Mục 1
- Mục 2
- Mục 3
Cũng có thể thay đổi bộ đếm từ số thường thành một số tùy chọn khác. Bao gồm các chữ cái và chữ số La Mã, đến tên một vài. Các nhà thiết kế web sẽ sử dụng danh sách theo thứ tự cho danh sách cụ thể theo nội dung. Dữ liệu công thức, nhiệm vụ hàng ngày, yêu thích, hoặc là người dùng đăng nhập hàng đầu / gần đây chỉ là một vài ví dụ. Thường thì bạn sẽ thấy bình luận blog được xây dựng bằng cách sử dụng danh sách theo thứ tự để giữ mỗi bình luận theo một chuỗi được đánh số.
Danh sách định nghĩa dữ liệu ()
Danh sách định nghĩa không được nhìn thấy thường xuyên nữa (không giống như chúng đã từng phổ biến). Chúng từng được nhìn thấy với các nhà thiết kế web tạo ra các định dạng phức tạp của liên kết hoặc nội dung hộp. Các thẻ danh sách dữ liệu (
) ngày nay thường bị hiểu lầm bởi các lập trình viên. Trong HTML4.01 danh sách dữ liệu thông số kỹ thuật đã được sử dụng để ghép các mục với mô tả của họ. Chúng được gọi là danh sách định nghĩa.
Dưới đây là mã ví dụ của danh sách định nghĩa dữ liệu:
- Mục 1
- Sự miêu tả
- Mục 2
- Sự miêu tả
- Mục 3
- Sự miêu tả
Tuy nhiên, với danh sách dữ liệu thông số kỹ thuật HTML5 mới đã được sao chép. Không có bất kỳ sự khác biệt nào với cú pháp trong cách bạn sử dụng các yếu tố, tuy nhiên mục đích của chúng đã được cập nhật dưới dạng danh sách mô tả bao gồm một hoặc nhiều thuật ngữ dữ liệu () theo sau là một hoặc nhiều định nghĩa dữ liệu (
).
Một ví dụ mạnh mẽ từ bài viết của Bác sĩ HTML5 là một danh sách định dạng siêu dữ liệu. Bên trong một dl
liệt kê yếu tố bạn sẽ định nghĩa một thuật ngữ, chẳng hạn như tên của bạn, sau đó mỗi lần tiếp theo thẻ định nghĩa có thể mô tả dữ liệu về bạn, có thể là tuổi tác, nghề nghiệp, thị trấn / thành phố hiện tại, v.v ... Cuối cùng bất kỳ tập hợp dữ liệu nào có cặp khóa / giá trị đều khớp với danh sách mô tả. Bạn có thể sử dụng nhiều thuật ngữ dữ liệu trong danh sách, nhưng W3C nói rằng mỗi thuật ngữ nên là duy nhất trong danh sách.
Bây giờ chúng tôi đã đóng đinh 3 kiểu danh sách phổ biến, hãy chuyển sang một số ví dụ! Các nhà thiết kế web đã rất sáng tạo với danh sách của họ trong những năm gần đây. Tôi đã lập danh mục 7 trang web yêu thích của tôi dưới đây với trọng tâm cụ thể về cách sử dụng danh sách sáng tạo của họ.
Điều hướng danh sách đơn giản
Menu điều hướng đơn giản hơn nhiều để xây dựng với các kỹ thuật CSS hiện đại. Đây là lý do tại sao danh sách không có thứ tự và thậm chí danh sách theo thứ tự đã trở thành một lựa chọn phổ biến. Một trong những ví dụ yêu thích của tôi về điều này xuất hiện trên blog truyền thông xã hội, Mashable.
Về phía trên tiêu đề của họ, bạn sẽ nhận thấy 2 bộ liên kết chính. Trực tiếp trên đầu logo của họ là một danh sách nhỏ không có thứ tự chứa các liên kết cộng đồng như Câu chuyện hàng đầu, Chủ đề xu hướng và Con người. Nhà thiết kế đã tạo ra một phong cách di chuột mượt mà với nền tảng và màu sắc vững chắc.
Ngay bên dưới này bạn sẽ thấy các liên kết điều hướng phụ của họ. Menu điều hướng này dẫn đến các danh mục blog như Social Media hoặc Tech. Cả hai danh sách không có thứ tự được chứa trong một HTML5 thành phần để giữ mọi thứ nội tuyến với mẫu. Các hiệu ứng di chuột được thêm vào đây hiển thị một góc tròn xung quanh menu điều hướng phụ. Mỗi liên kết hiển thị dưới dạng một thành phần khối và chiếm rất nhiều không gian của menu điều hướng phụ.
Tính năng phần mềm liệt kê
Đây có thể là một trong những ví dụ yêu thích của tôi về danh sách theo kiểu. Các nhà phát triển web và các công ty phần mềm sử dụng chúng trong các thiết kế web công ty riêng của họ. Ví dụ của tôi tập trung vào trang Những điều của Bộ luật Văn hóa, một ứng dụng danh sách việc cần làm. Họ đã xây dựng một bộ định dạng của các mục và tính năng bạn có thể tìm thấy trong Things.
Toàn bộ bộ sưu tập được chứa trong một Hình ảnh được thêm vào như Các yếu tố được kết hợp với nhau rất đẹp và tôi rất ngưỡng mộ đạo đức làm việc của Bộ luật Văn hóa. Họ đã chứng minh cung cấp các thiết kế tuyệt vời trong nhiều năm, đặc biệt là cho Things. Nếu bạn kiểm tra bất kỳ thư mục biểu tượng nào, chẳng hạn như Trình tìm biểu tượng, thật đơn giản để chọn ra một bộ phần mềm miễn phí và từ đây bạn có thể mô phỏng một thiết kế và mã hóa một kiểu danh sách tương tự trong CSS. Nếu bạn quan tâm hơn nữa đến thiết kế của họ, trang Things for iPhone thực sự sử dụng danh sách mô tả. Mỗi biểu tượng là đặt làm thuật ngữ định nghĩa và các mô tả được đặt ở bên phải. Đây không phải là cách được khuyến nghị để sử dụng các thẻ này, nhưng nó hoạt động tốt trong một số trường hợp! Người dùng WordPress rất quen thuộc với hệ thống danh mục / thẻ. Nó đã hoạt động tốt trong hầu hết các hình thức truyền thông xã hội cho đến nay, nhưng ban đầu nó bắt nguồn từ thế giới blog. Thẻ rất tốt để hiển thị một vài bài viết thích hợp liên quan đến chủ đề. Danh mục rộng hơn nhiều và được sử dụng để bao gồm phần lớn hơn của bài viết của bạn. Ví dụ tốt nhất tôi có thể nghĩ đến là Tạp chí Smashing và thiết kế lại trang chủ mới của họ. Ở đầu bạn sẽ nhận thấy một tab có nhãn “Tạp chí” với một biểu tượng thẻ nhỏ treo bên cạnh. Di chuột qua đây để hiển thị một danh sách ẩn các danh mục như mã hóa, thiết kế, đồ họa, v.v ... Mỗi danh mục cũng được tạo kiểu với hiệu ứng di chuột CSS3 lạ mắt để xuất hiện dưới dạng các nút bóng. Nhìn vào mã bạn sẽ nhận thấy họ đã đặt hộp này ở khu vực cột bên trái. Nó đã cho Tôi luôn là một fan hâm mộ lớn của thiết kế Digg cổ điển. Nó bao gồm mọi thứ bạn mong đợi từ một trang web tin tức với khả năng xã hội tuyệt vời. Một mảnh thực sự thú vị cho thiết kế cũ của họ là thiết lập cột chân trang sử dụng danh sách định nghĩa. Thật không may, nhóm Digg đã ra mắt thiết kế v4 trực tiếp, nhưng Internet là một nơi hoài cổ và với Lưu trữ Internet Wayback, chúng tôi có thể đưa ra một thiết kế cũ hơn của Digg từ tháng 8 năm 2007. Mẫu này có nhiều yếu tố giao diện người dùng tuyệt vời, nhưng cụ thể hơn, hãy tập trung vào khu vực chân trang. Bạn sẽ nhận thấy mỗi cột thực sự được chia thành một yếu tố danh sách dữ liệu. Những cột này là được đặt để hiển thị dưới dạng các khối và nổi cạnh nhau với chiều rộng được xác định trước. Các thuật ngữ dữ liệu hoạt động như tiêu đề trong danh sách và chỉ xuất hiện một lần trên mỗi cột. Theo tôi đây là cách tốt hơn và gọn gàng hơn để xây dựng danh sách mô tả của bạn. Có thể sử dụng nhiều hơn một thuật ngữ cho mỗi danh sách, nhưng điều này thường làm rối HTML của bạn và bạn có thể mất dấu mã rất nhanh. Hai cột đầu tiên chứa 6-7 liên kết được liệt kê bên dưới nhau dưới dạng thuật ngữ dữ liệu để mô tả văn bản tiêu đề, nhưng sau này bạn sẽ thấy các cột tách khỏi định dạng mặc định. Ví dụ, bên dưới Công cụ & API của Digg có chỉ có hai định nghĩa dữ liệu. Đây thực sự là 2 đoạn có chứa một liên kết nội bộ và một câu. Chắc chắn không có gì sai với đánh dấu này, và nó thực sự là một hệ thống rất sáng tạo và bền vững để xây dựng các cột chân trang. Tôi chắc chắn nếu bạn lướt qua kho lưu trữ các trang của Digg, bạn sẽ tìm thấy nhiều ví dụ tuyệt vời hơn về danh sách. Danh sách không phải luôn luôn được kết hợp cho phong cách thiết kế. Có những lúc thực sự nội dung yêu cầu các mục danh sách để tạo thành một danh sách dữ liệu thực tế. Danh sách việc cần làm là ví dụ hoàn hảo cho những hiện tượng này. Tuy nhiên, không có nhiều trình quản lý tác vụ được xây dựng trên web nên rất khó tìm thấy các ví dụ tuyệt vời. Flow App là một trong những dịch vụ như vậy với bảng điều khiển người dùng đẹp. Nếu bạn có thời gian tôi khuyên bạn nên đăng ký tài khoản miễn phí để cung cấp cho ứng dụng bản demo. Ngay cả khi bạn không có kế hoạch trả tiền, đây vẫn là một ứng dụng web rất thú vị để giải quyết và thậm chí bạn có thể lấy ra một số cảm hứng thiết kế. Nếu bạn đã đăng nhập, menu dưới cùng bên trái sắp xếp bộ sưu tập danh sách của bạn. Đây là những nhiệm vụ mà bạn có thể sắp xếp lại, chỉnh sửa, gắn thẻ và kiểm tra là hoàn thành. Nhấp vào danh sách mặc định đầu tiên “Những thứ cơ bản” sẽ mở ra nội dung trong khung bên phải, tại đây toàn bộ cấu trúc danh sách được xây dựng với một danh sách không có thứ tự. Mỗi mục chứa một lượng lớn bối cảnh bên trong. Mỗi thanh bạn thấy đi qua quà một mục danh sách được thêm vào tổng thể Cùng với nhiều nhà thiết kế đồng nghiệp, tôi là một người nghiện Dribbble lớn. Trang web này được xây dựng rất đẹp và có một số nhà thiết kế đồ họa giỏi nhất từ khắp nơi trên thế giới. Nếu bạn không quen thuộc với mạng thì Dribbble là một cộng đồng xã hội chỉ dành cho những nhà thiết kế web chia sẻ những bức ảnh về công việc mới nhất của họ. Mọi thứ trở nên thú vị nếu bạn chuyển sự chú ý của bạn xuống phía dưới bên phải của khu vực thanh bên của nó. Ở đây chúng tôi có một danh sách theo thứ tự với lớp “danh sách người chơi“. Nó có tính năng tân binh là những nhà thiết kế mới nhất được mời và những người đã đăng nhập vào trang web gần đây nhất. Vì bất kỳ lý do gì, nhà phát triển web của Dribbble đã chọn sử dụng một danh sách theo thứ tự với mỗi mục danh sách có chứa thông tin chi tiết về người dùng. Nội dung bên trong thực sự được chia thành hai phân đoạn. Một Có một số ví dụ tuyệt vời và các thực tiễn tốt nhất bằng văn bản để xây dựng điều hướng bánh mì. Các menu này hiển thị rõ ràng bộ sưu tập các liên kết phụ bạn đã truy cập để đến trang hiện tại. Chúng tôi có một hướng dẫn về vụn bánh mì tuyệt vời được giới thiệu trên Hongkiat được xây dựng hoàn chỉnh với các kỹ thuật CSS3 và danh sách không có thứ tự. Thiết kế sử dụng neo liên kết như là các yếu tố khối để hiển thị menu danh sách. Liên kết neo được đưa ra một hình ảnh nền và một giảm dần Ngoài ra, hãy xem ví dụ của Google trên một trong những trang hỗ trợ của họ. Đây là yếu tố trang hoàn hảo để kết hợp vào trang web của riêng bạn nếu bạn có nhiều trang nội dung lồng nhau. Khách truy cập có thể sẽ tìm cách quay lại các trang trước mà không kiểm tra lịch sử của họ. Không có quá nhiều lựa chọn thay thế để xây dựng một danh sách các liên kết bánh mì. Bạn có thể sử dụng một danh sách theo thứ tự để công cụ tìm kiếm trình thu thập thông tin hiểu rằng có một thứ tự để liên kết menu, tuy nhiên như đã nêu trước đây có lẽ sẽ không tạo ra quá nhiều sự khác biệt khi xếp hạng trong SERPS. Nếu bạn có nhu cầu phức tạp hơn đối với mẩu bánh mì như tiêu đề / mô tả cho mỗi liên kết, bạn có thể sử dụng tốt hơn phần tử danh sách định nghĩa. Không đi sâu vào chi tiết, mục tiêu của tôi là thu thập một thiết lập tuyệt vời của các yếu tố giao diện dựa trên danh sách. Điều này nói dễ hơn nhiều so với thực hiện - nhưng Internet có rất nhiều lựa chọn để lựa chọn! Có rất nhiều chỗ cho sự phát triển trong lĩnh vực danh sách HTML. Nếu bạn đang muốn có thêm cảm hứng, hãy xem bộ sưu tập mini dưới đây với một số ví dụ tuyệt vời. Một menu điều hướng tuyệt vời theo kiểu các yếu tố nút. Cake Sweet Cake có một danh sách đẹp các hình ảnh thu nhỏ chứa một số mẫu ngon của các tác phẩm làm bánh của họ. Trang web Invemational Cheesemonger có 2 phần riêng biệt Các liên kết truyền thông xã hội ở phần dưới cùng của trang web của Threepenny Editor đều được tạo theo một danh sách. Nó phù hợp hoàn hảo với một cột của chủ đề bố cục giấy và tay của họ. Một ví dụ đẹp khác của menu điều hướng được tạo kiểu bằng hình ảnh và CSS. Bạn biết ai có hiệu ứng thiết kế retro lạ mắt trên trang web của họ. Phần dưới cùng của trang chủ có một danh sách được sắp xếp nhỏ chứa hình thu nhỏ của công việc dự án mới nhất của họ. Một danh sách không có thứ tự được tạo cho các kế hoạch đăng ký của MediaLoot, có vẻ đầy hứa hẹn. 365sheet cung cấp một mẫu Photoshop hoàn toàn mới để tải xuống mỗi ngày. Trong thanh bên của họ, bạn sẽ tìm thấy một danh sách các thẻ được xây dựng trong một danh sách không có thứ tự. Điều này có vẻ hoàn hảo trong các blog và trang lưu trữ nơi danh sách thẻ nhỏ cảm thấy phù hợp. Hy vọng bộ sưu tập danh sách theo kiểu HTML sáng tạo này đã mang đến cho bạn một nguồn cảm hứng để thiết kế nội dung bố cục. Có thể khó đưa ra một ý tưởng cụ thể cho danh sách của bạn trên các trang web, nhưng danh sách vật phẩm là một phần rất lớn của quá trình thiết kế và cung cấp các mối quan hệ mang tính xây dựng giữa các thẻ đánh dấu và nội dung. Có thể có hàng tá danh sách tuyệt vời khác được tìm thấy trên web và với số lượng ngày càng tăng của các nhà thiết kế web, chúng tôi chắc chắn sẽ thấy con số này tăng nhanh hơn bao giờ hết. Nếu bạn biết bất kỳ trang web tuyệt vời nào có danh sách HTML tuyệt vời, vui lòng cung cấp các liên kết trong phần bình luận của chúng tôi dưới đây. Ngoài ra, nếu bạn thêm bất kỳ kiểu nào được liệt kê ở trên vào trang web của riêng bạn, chúng tôi muốn kiểm tra nó!
các phần tử với lớp bên trái và bên phải, tương ứng. Nội dung mục danh sách thực sự là chia thành các phân khúc và CSS được sử dụng để sắp xếp mọi thứ. thẻ trực tiếp vào mã và vị trí tương đối với chứa của họ
. Các
mạnh
thẻ được sử dụng cho từng điểm tiêu đề xuất hiện trong văn bản tối hơn và ngay sau phần mô tả này được thêm vào.Danh mục blog và thẻ
không trưng bày;
phong cách để xuất hiện ẩn cho đến khi được kích hoạt. Danh sách không có thứ tự được thiết lập với mỗi mục danh sách có chứa một liên kết neo, nhưng thay thế các liên kết này được hiển thị nội tuyến và được chia thành hai dòng cho không gian cần thiết.Cột chân trang với danh sách định nghĩa
Nhiệm vụ và To-dos
thành phần. Có rất nhiều đối tượng bên trong như biểu tượng chỉnh sửa, hộp kiểm hoàn thành, cờ và biểu tượng thùng rác. Ngoài ra trong các liên kết menu bên dưới “Tiêu điểm” Bạn sẽ nhận thấy các hạng mục được xây dựng được đặt thành một danh sách không có thứ tự. Nó trông tuyệt vời vì sự đơn giản của nó chắc chắn.Danh sách người chơi lừa bóng
tiêu đề với lớp “vcard” chứa tên và hình đại diện của người dùng. Cả hai đều được liên kết với hồ sơ Dribbble cá nhân của họ, cùng với một số thống kê tài khoản.
Bánh mì ngang
chỉ số z
thuộc tính để các mũi tên sẽ hiển thị trên đầu của mỗi phần tử đồng thời.Giao diện người dùng dựa trên danh sách đẹp hơn
6wunderkinder
Bánh ngọt
Cheesemonger mời
các phần tử nổi để tạo 1 menu điều hướng. Nó trông thực sự gọn gàng phù hợp với đồ họa logo trung tâm của họ.Biên tập viên ba xu
Lê Tipi
Bạn biết ai rồi đó
Phương tiện truyền thông
365:
Phần kết luận