Có bố cục HTML chuẩn nào với nhiều kiểu CSS không?

Question

Khi nói đến thiết kế web, tôi rất kinh khủng khi sản xuất bất kỳ thứ gì trông đẹp mắt từ xa. Rất may, có rất nhiều miễn phí sources cho designtemplates. Tuy nhiên, một vấn đề với các thiết kế này là chúng chỉ bao gồm một trang duy nhất và không có nhiều trường hợp sử dụng. Nếu bạn xem CSS Zen Gardens, chúng có 1 tệp HTML duy nhất và có thể tạo kiểu khác một cách triệt để bằng cách chỉ thay đổi tệp CSS.

Bây giờ tôi tự hỏi nếu có bố trí HTML chuẩn (thẻ và id), bao gồm rất nhiều trường hợp sử dụng và có thể được chủ đề chung với các tệp CSS khác nhau như Zen Garden. Những gì tôi đang tưởng tượng là một tập hợp các quy tắc về cách bạn viết html của bạn, và những gì hộp, danh sách, menu và phong cách bạn có nghĩa vụ phải sử dụng. Một tập hợp các trang thử nghiệm tiêu chuẩn bao gồm các mục đích sử dụng khác nhau có thể được tạo và một tệp CSS mới trong khi phải hỗ trợ tất cả các trang khác nhau trong một chế độ xem đẹp.

Có dự án nào đề cập đến bất kỳ điều gì tương tự với những gì tôi mô tả không?

Answer 1

Tôi đã sử dụng Bluprint CSS, thật dễ dàng và hữu ích như bạn sẽ thấy. Nó cũng có một số kịch bản ruby ​​cho phép bạn thay đổi số cột và khoảng cách giữa chúng. Theo mặc định, nó là 950px cho phần tử span-24.

Answer 2

Khám phá Grids framework từ YUI. Đặc biệt tuyệt vời là Grid Builder. Ngoài ra, họ có một tập hợp các tệp CSS đặt lại, cơ sở và phông chữ sẽ cung cấp cho bạn một đường cơ sở tốt để xây dựng trên đó.

Answer 3

Tôi thường chỉ cố thực hiện theo các nguyên tắc được đặt bởi chính tiêu chuẩn HTML.

• Các tiêu đề đi kèm trong thẻ "h" (do đó, một thẻ H1 cho tiêu đề chính, sau đó một hoặc nhiều thẻ H2 trong v.v ...).
• Văn bản miễn phí được nhóm thành các đoạn trong thẻ P.
• Các phần thông tin được nhóm logic được chuyển vào thẻ DIV.
• Bất kỳ loại danh sách nào (ngay cả các menu mà cuối cùng bạn có thể muốn nằm ngang) nằm trong các thẻ danh sách như UL, OL hoặc DL.
• Bảng thông tin có trong thẻ TABLE. KHÔNG sử dụng thẻ bảng cho bố cục.
• Hãy thông minh với các thuộc tính ID và CLASS của bạn. Giữ ID duy nhất và gán chúng cho các yếu tố mà bạn biết đại diện cho một cái gì đó duy nhất trên trang, như menu điều hướng hoặc chân trang. Chỉ định cùng một lớp cho các phần tử được lặp lại nhưng tương tự (mà bạn có thể muốn kết xuất với một kiểu trực quan tương tự).

Tôi luôn bắt đầu với một trang rất đơn giản, dọc - chỉ cần chạy mọi thứ tôi muốn trên trang màu đen và trắng. Sau đó, tôi bắt đầu thêm CSS để đảm bảo các bit được định dạng và đặt ra theo cách tôi muốn.

Hãy xem nguồn của home page của tôi để biết ví dụ về những gì tôi đang nói đến.

Answer 4

BluePrintCSS là, từ những gì tôi biết, khung CSS đầu tiên. Là khung CSS YUI, nó giúp bạn xử lý bố cục.

Loại khung đó sẽ giúp bạn xây dựng nhiều CSS cho trang web của bạn.

BluePrintCSS là một dự án khá trưởng thành nên tôi khuyến khích bạn kiểm tra.