10 Trang web với các ví dụ về CSS tuyệt vời - núm vú

Một trong những cách tốt nhất để học cách sử dụng CSS để thực hiện các tác vụ khác nhau là xem những người khác đang cấu hình các trang web của họ như thế nào. Danh sách sau đây trình bày các bố cục khác nhau mà bạn có thể sử dụng để tạo trang web của riêng mình. Nó cũng thảo luận về loại bố cục và các tính năng đặc biệt về mỗi trang mà bạn nên lưu ý.

• Ảnh thiên văn học trong ngày : Ảnh thiên văn học trong ngày (APOD) là một ví dụ nổi bật về thiết kế dạng lỏng. Hãy thử thay đổi kích thước trang và bạn sẽ ngạc nhiên trước cách nội dung của trang trả lời. (Hình ảnh ở giữa không hoạt động tốt trên điện thoại di động, nhưng văn bản chắc chắn là có). Nó thể hiện sự kết hợp tốt giữa kiểu phông chữ và cách sử dụng các liên kết tốt để nâng cao nội dung.

• USA Today : Đây là một ví dụ điển hình về thiết kế thích nghi với hai hoặc ba cột. Lưu ý rằng khi bạn thay đổi kích thước trang, cột thứ ba ở bên phải có xu hướng biến mất khi trang quá nhỏ. Lưu ý các mũi tên ở mỗi bên của bài trình bày. Bạn có thể sử dụng chúng để di chuyển giữa các phần của báo, mà là một sử dụng tuyệt vời của hiệu ứng đặc biệt này.

• Yahoo! Maps : Các trang web có thể rất khó sử dụng vì chúng dựa vào một giao diện phức tạp hoặc thông tin không phải là dạng dễ dàng cho người dùng nhập. Yahoo! Bản đồ xung quanh vấn đề này bằng cách cung cấp ba trường đơn giản. Phần lớn giao diện thực sự là dành cho hiển thị bản đồ. Hệ thống kiểm soát cho bản đồ rất dễ hiểu và không cần bất kỳ từ ngữ nào. Đây là một ví dụ tuyệt vời của một ứng dụng đồ họa theo định hướng. Đây cũng là một trong số ít ví dụ về thiết kế đáp ứng mà bạn sẽ tìm thấy được thực hiện chính xác.

• Thesaurus. com : Điều này cố định với trang web bố trí cung cấp một ví dụ tốt về cách sử dụng các tab một cách độc đáo. Thực tế có nhiều trang web liên kết với trang web này. Bằng cách nhấp vào một trong các tab ở trên cùng, bạn sẽ được chuyển đến các trang web khác như Từ điển. com và từ điển. com Translator. Lưu ý việc sử dụng một bố cục phức tạp cho trang web này. Bố cục ba cột được chia thành các phần phụ nếu cần để chuyển tải thông tin bổ sung.

• Chuyển đổi : Đây là một ví dụ điển hình về thiết kế đàn hồi ba cột. Việc triển khai không hoàn hảo, nhưng hãy lưu ý nội dung tiêu thụ toàn bộ trang dù bạn có làm được bao nhiêu. Bạn cũng có thể làm cho trang tương đối nhỏ trước khi bạn nhìn thấy bất kỳ dấu hiệu của một thanh cuộn vì nội dung co lại để phù hợp với không gian có sẵn. Trang này cũng có hai hệ thống menu (một ở bên trái được sử dụng để truy cập các chức năng chuyển đổi và một ở bên phải để truy cập các tính năng trang web).

• JC Penney : Nhiều trang bán hàng cung cấp các lớp nội dung. Trong trường hợp này, bạn sẽ thấy một nhà cung cấp đứng đầu, một menu tương tác tốt đẹp tiếp theo, doanh số bán hàng gần đây nhất, đường dẫn trang web hiện tại, và cuối cùng là thông tin bán hàng hai cột. Đây là một bài trình bày chiều rộng cố định, vì vậy nó không có quy mô tốt khi kích thước của trình duyệt thay đổi. Trọng tâm là giới thiệu những hình ảnh trên trang web theo cách tốt nhất có thể.

• Petter Hesselberg. com : Không giống hầu hết các trang web ngày nay, nó sử dụng vị trí tuyệt đối có hiệu quả (nó cũng vi phạm các quy tắc bằng cách sử dụng bảng để giữ nội dung - trang web sẽ tốt hơn nếu nó sử dụng CSS độc quyền). Việc trình bày dữ liệu dạng bảng có thể rất khó khăn. Trang web này hiển thị một cách hiệu quả để hiển thị dữ liệu dạng bảng không quá bận hoặc khó nhìn thấy. Không phải lúc nào cũng cần sử dụng đường biên khi hiển thị dữ liệu dạng bảng - đôi khi màu tinh tế là tất cả những gì bạn thực sự cần.

• Sourceforge : Trong một số trường hợp, bạn cần tạo một thiết lập để phân phối thông tin ở một số định dạng khác, chẳng hạn như. Tệp ZIP. Đây là một ví dụ về chiến lược phân phối thông tin sử dụng các kỹ thuật và tính năng của HTML5 như các danh sách không có thứ tự cho các menu. Bố cục chiều rộng cố định không thay đổi kích cỡ rất tốt, nhưng chính trang đó khá linh hoạt. Lưu ý cách trang web này sử dụng cách bố trí hai cột với header và footer một cách hiệu quả.

• GetHuman : Cơ sở dữ liệu được tìm kiếm thường xuyên hơn so với thay đổi. Khi cơ sở dữ liệu lớn, cố gắng tìm một thông tin cụ thể trở nên vô cùng khó khăn và bực bội. Trang web chiều rộng cố định này thể hiện kỹ thuật tìm kiếm danh mục điện thoại có thể được áp dụng cho các loại trang web khác có xu hướng dựa vào chỉ một hoặc hai phím để hiển thị một loạt thông tin. Chú ý sử dụng các hiệu ứng đặc biệt để hiển thị dòng nào được chọn. Các trang web cũng trình bày một sự xuất hiện bảng mà không thực sự sử dụng các bảng (xem mã nguồn để xem cho chính mình).

• Những suy nghĩ và thảo luận ngẫu nhiên của John : Trang web này trình bày cho bạn một ví dụ hoàn hảo về cách bố trí hai cột được sử dụng trong môi trường blog. Bạn thấy cách các mục nhập trong cột bên cạnh bên trái cho phép dễ dàng truy cập các mục nội dung trong ngăn bên phải dễ dàng hơn. Ngoài ra, trang web này giúp bạn hiểu ưu và khuyết điểm của cách bố trí chiều rộng cố định cổ điển.