Lưới linh hoạt trong bố cục đáp ứng là gì? Tại sao CSS Grid tốt hơn khung Bootstrap? Các vùng lưới được đặt tên

Từ tác giả: bài viết từ khái niệm về bố cục loạt bài Lưới CSS. Trong các bài học trước, chúng ta đã học cú pháp lưới, học một số cách sắp xếp các thành phần trên một trang và tạm biệt một số thói quen cũ. Trong hướng dẫn này, chúng tôi sẽ áp dụng tất cả kiến ​​thức của mình vào thực tế để tạo ra một bố cục đáp ứng.

Truy vấn phương tiện truyền thông

Hãy lấy bản demo từ bài học trước.

Trang bao gồm hai lưới: lưới chính và một lưới được lồng bên trong một trong các phần tử. Chúng tôi có thể kiểm soát các mắt lưới của mình bằng cách sử dụng truy vấn phương tiện. Điều này có nghĩa là chúng ta hoàn toàn có thể xây dựng lại bố cục để phù hợp với chiều rộng màn hình khác.

Chúng ta sẽ bắt đầu bằng việc sao chép phần khai báo của lưới đầu tiên. Hãy gói bản sao trong truy vấn phương tiện bằng kỹ thuật ưu tiên thiết bị di động. Tôi tùy ý lấy 500px làm điểm chuyển tiếp.

Grid-1 ( /* kiểu lưới */ ) chỉ có màn hình @media và (độ rộng tối thiểu: 500px) ( .grid-1 ( /* kiểu lưới */ ) )

Bây giờ chúng ta sẽ thay đổi lưới trong quảng cáo đầu tiên để đặt mọi thứ vào một cột. Chúng tôi đặt một cột bằng thuộc tính Grid-template-columns. Kiểm tra xem bốn hàng của chúng tôi có được đặt bằng thuộc tính Grid-template-rows không và khớp với bố cục bằng thuộc tính Grid-template-areas:

Lưới-1 ( hiển thị: lưới; chiều rộng: 100%; lề: 0 tự động; lưới-mẫu-cột: 1fr; lưới-mẫu-hàng: 80px tự động tự động 80px; khoảng cách lưới: 10px; khu vực mẫu lưới: " tiêu đề" "chính" "thanh bên" "chân trang"; )

Lưới - 1 ( hiển thị:lưới; chiều rộng: 100%; lề: 0 tự động; lưới - mẫu - cột : 1fr ; lưới - mẫu - hàng: 80px tự động tự động 80px; khoảng cách lưới: 10px; lưới - mẫu - khu vực: "tiêu đề" "chủ yếu" "thanh bên" "chân trang" ;

Để vừa với màn hình nhỏ, chúng tôi đặt khoảng cách lưới thành 10px theo mặc định. Đây là những gì chúng tôi có. Bạn cũng nên chú ý rằng chúng tôi thay đổi thuộc tính đệm và cỡ chữ trong các phần tử div .grid-1 bằng truy vấn phương tiện.

Lưới lồng nhau của chúng tôi

Đoạn mã trên sửa đổi bố cục chính của chúng tôi. Tuy nhiên, chúng ta vẫn có một lưới lồng nhau kiên quyết từ chối loại bỏ hai cột của nó trên bất kỳ màn hình nào. Để khắc phục điều này, chúng tôi sẽ thực hiện chính xác điều tương tự, nhưng lấy một điểm chuyển tiếp khác bằng phương pháp ưu tiên nội dung:

Mục-2 ( /* kiểu lưới */ ) màn hình chỉ @media và (độ rộng tối thiểu: 600px) ( .item-2 ( /* kiểu lưới */ ) )

Nếu chúng ta làm lại bản demo tự động điền và thay đổi độ rộng cột thành minmax(9em, 1fr), thì lưới sẽ cố gắng vừa với nhiều rãnh có chiều rộng 9em nhất có thể, sau đó mở rộng chúng thành 1fr cho đến khi toàn bộ vùng chứa đầy:

Nhược điểm: Lưới sẽ chỉ tính toán lại các bản nhạc sau khi khởi động lại chứ không phải khi chiều rộng cửa sổ thay đổi. Hãy thử thu hẹp cửa sổ trình duyệt của bạn và làm mới trang. Để thay đổi giá trị, bạn có thể kết nối truy vấn phương tiện nhưng chúng không hoạt động tốt khi thay đổi độ rộng của cửa sổ trình duyệt.

Phần kết luận

Hãy tóm tắt tất cả những điều trên trong một danh sách:

Truy vấn phương tiện cho phép chúng tôi xây dựng lại hoàn toàn lưới bằng cách thay đổi thuộc tính Grid-template-areas (và các thuộc tính khác) cho các trường hợp khác nhau.

Thuộc tính chuyển tiếp không ảnh hưởng đến bố cục lưới.

Tốt để đổ đầy thùng lưới từ khóa tự động điền

Hàm minmax() là một bổ sung tuyệt vời cho tính năng tự động hoàn thành nhưng nó không mang lại cho chúng ta khả năng thích ứng thực sự.

Bây giờ bạn đã sẵn sàng làm việc với mắt lưới! Hãy theo dõi để biết thêm các bài viết về Lưới CSS, bài tập thực hành và giải pháp cho các vấn đề về lưới thường gặp.

Tôi nhận thấy kỹ thuật Grids khoảng một năm trước. Sau đó, kỹ thuật này, sau một nghiên cứu rất hời hợt, dường như vô dụng và mang tính thử nghiệm đối với tôi; tôi cảm thấy khó chịu vì thực tế là để triển khai, cần phải tạo thêm đánh dấu. Nhưng giờ đây, việc không chú ý đến số lượng trang web được xây dựng trên lưới cũng như số lượng bài viết và hướng dẫn về nó đang trở nên khó khăn. Nhờ có phần sau, việc nghiên cứu và hiểu các nguyên tắc và khái niệm cũng như rút ra ít nhiều kết luận thực tế đã trở nên dễ dàng hơn nhiều. Kết luận của tôi một năm sau đó là: “Thật đơn giản và giải pháp hữu ích từng được tạo ra để bố trí các trang web, mọi nhà thiết kế web có lòng tự trọng đều nên biết.”

Bất cứ ai đã từng làm việc với lưới đều biết lưới là gì. biên tập viên đồ họa (Photoshop, Pháo hoa, Gimp, v.v.) và tất nhiên đánh giá cao sự cần thiết của nó khi tạo ra bất kỳ thiết kế nào. Nhưng làm cách nào để triển khai Lưới trên web? Trong thực tế dạng bảng bố cục là một thiết kế trang web thực sự với Lưới, chắc chắn là rất tiện lợi. Nhưng không phải mục đích sử dụng của các yếu tố bàn thật kinh khủng.
May mắn thay, sự phổ biến to lớn của các tiêu chuẩn web đã tăng lên và tiếp tục phát triển qua những năm trước, cũng như sự hỗ trợ của chúng trong các trình duyệt hiện đại, đã cho chúng tôi cơ hội tạo các trang đa chức năng với rất ít đánh dấu hợp lý. Cách bố trí này được gọi Khối. Nhưng cũng Khối bố cục hóa ra là Mặt yếu. Khi tạo các trang với một tập hợp khổng lồ các phần tử có kích thước và ý nghĩa khác nhau, việc đánh dấu các trang như vậy đã trở thành một nhiệm vụ rất khó khăn và nếu có nhiều người làm việc đánh dấu, công việc đó có thể trở thành một cơn ác mộng.
Và rồi kỹ thuật sử dụng Lưới đã ra tay giải cứu. Kỹ thuật này là sự kết hợp giữa Khối Và dạng bảng cách trình bày. Sử dụng nó mang lại cho chúng tôi:

• tốc độ và dễ dàng phát triển
• tự do định vị
• tỷ lệ của các thành phần trang và vị trí của chúng

Giá cho tất cả điều này chỉ là một chút đánh dấu thêm. Tôi nghĩ ngày nay, khi giá đồng hồ của một người đắt hơn nhiều so với phần cứng và năng suất, không khó để đoán được cán cân đang nghiêng về phía nào.

Bố cục với Grid là gì? Trước hết, đó là một khái niệm. Một khái niệm bao gồm nhiều khía cạnh thiết kế và rất ít quy tắc để thực hiện nó. Điều này mang lại sự tự do hoàn toàn và không có tiêu chuẩn hóa trong việc thực hiện nó. Tôi sẽ nói nhiều hơn nữa - cùng một Grid có thể được triển khai nhiều nhất những cách khác. Nếu bạn đã đọc về Grid, bạn có thể nhận thấy rằng mỗi tác giả đều bắt đầu từ một góc độ mới, đi sâu vào các chi tiết, nói một cách nhẹ nhàng thì khó hiểu. May mắn thay họ bắt đầu xuất hiện Hệ thống lưới - Thư viện CSS và để làm việc với Grid. Và sử dụng ví dụ của họ, bạn có thể nhanh chóng thành thạo nguyên tắc cơ bản kỹ thuật này.

Tôi nghĩ thật vô nghĩa khi viết về tất cả các khía cạnh của Lưới; bạn có thể dễ dàng tìm thấy thông tin về nó trên Internet. Tôi khuyên bạn nên tạo đơn giản của riêng bạn Hệ thống lưới điện.

Trước tiên, bạn cần hiểu rằng lưới bao gồm các cột và khoảng cách giữa chúng. Có ba giá trị chính - chiều rộng lưới, chiều rộng cột và chiều rộng khoảng cách giữa các cột. Chiều rộng của các cột phụ thuộc vào số lượng của chúng.

Hãy thử tạo một lưới rộng 950 pixel với 16 cột có khoảng cách 10 pixel, do đó, một cột phải rộng 50 pixel. Sau khi hiểu tất cả các giá trị, chúng tôi mở bất kỳ trình soạn thảo đồ họa nào mà chúng tôi biết và tạo bố cục. Bạn cũng có thể thêm phần đệm vào Lưới ở bên trái và bên phải, giả sử mỗi phần là 20 pixel và điều này sẽ dẫn đến bố cục có chiều rộng là 990 pixel. Bạn có thể xem ví dụ của tôi.

Bây giờ chúng ta có thể bắt đầu tạo thư viện của mình. Giống như hầu hết các thư viện CSS của chúng tôi cần thiết lập lại toàn cục, tôi đề xuất Thiết lập lại CSS của Eric Mayer, giữ nguyên đặt lại.css hãy tạo ra lưới.css mà chúng ta có thể thêm ngay một phương pháp làm sạch các thùng chứa khối nổi - Clear Fix. Điều đầu tiên chúng ta cần là một quy tắc cho vùng chứa sẽ chứa tất cả các cột của chúng ta. Chiều rộng của mỗi vùng chứa bằng chiều rộng của lưới của chúng tôi.

.thùng đựng hàng(
lề: 0 tự động;
chiều rộng: 950px;
}

Bây giờ chúng ta có thể thêm quy tắc cho các cột của mình, nó chứa chiều rộng và phần đệm. Thụt lề hoạt động như một khoảng trống (mương nước) giữa các cột.

.cột(
nổi: trái;
lề phải: 10px;
tràn: ẩn;
chiều rộng: 50px;
}

Cột cuối cùng không cần thụt lề; để thực hiện việc này, hãy thêm quy tắc cho cột đó:

Container của chúng ta chứa các cột, các cột là các khối nổi nên phải được làm sạch. Để tránh .clearfix không cần thiết trong đánh dấu, bạn có thể áp dụng quy tắc này cho vùng chứa:

.clearfix:sau .container:sau{
nội dung: ".";
hiển thị: khối;
chiều cao: 0;
rõ ràng: cả hai;
khả năng hiển thị: ẩn;
}

sửa chữa rõ ràng, .thùng đựng hàng( hiển thị: khối nội tuyến; )

/* Ẩn khỏi IE-mac \*/
*html.clearfix, *html.container(chiều cao: 1%;)
.clearfix, .thùng đựng hàng(hiển thị: khối;)
/* Kết thúc việc ẩn khỏi IE-mac */

Bây giờ chúng ta có thể bắt đầu với các cột của mình. Cột có thể rộng hai hoặc ba, v.v. Để làm điều này, chúng ta có thể áp dụng các quy tắc sau cho chúng:

.span-1 ( chiều rộng: 50px; )
.span-2 (chiều rộng: 110px; )
.span-3 (chiều rộng: 170px; )
.span-4 (chiều rộng: 230px; )
.span-5 (chiều rộng: 290px; )
.span-6 (chiều rộng: 350px; )
.span-7 (chiều rộng: 410px; )
.span-8 (chiều rộng: 470px; )
.span-9 (chiều rộng: 530px; )
.span-10 (chiều rộng: 590px; )
.span-11 (chiều rộng: 650px; )
.span-12 (chiều rộng: 710px; )
.span-13 (chiều rộng: 770px; )
.span-14 (chiều rộng: 830px; )
.span-15 (chiều rộng: 890px; )
.span-16 ( chiều rộng: 950px; lề phải: 0; )

Về nguyên tắc, đây là tất cả những gì cần thiết cho việc triển khai Lưới; bạn cũng có thể thêm trình bao bọc và lớp để xem Lưới bằng bố cục. Hãy tạo ra chính.css và thêm vào nó:

.vỏ bánh(
lề: 0 tự động;
chiều rộng: 990px;
}
.overlay(
nền: url trong suốt (overlay.png) lặp lại-y cuộn trên cùng bên trái;
}

Đây là cách bố trí có thể trông như thế nào:

Tôi nghĩ điều này là đủ cho một sự khởi đầu.
Bạn có thể xem ví dụ của tôi

Tôi nhận thấy kỹ thuật Grids khoảng một năm trước. Sau đó, kỹ thuật này, sau một nghiên cứu rất hời hợt, dường như vô dụng và mang tính thử nghiệm đối với tôi; tôi cảm thấy khó chịu vì thực tế là để triển khai, cần phải tạo thêm đánh dấu. Nhưng giờ đây, việc không chú ý đến số lượng trang web được xây dựng trên lưới cũng như số lượng bài viết và hướng dẫn về nó đang trở nên khó khăn hơn. Nhờ có phần sau, việc nghiên cứu và hiểu các nguyên tắc và khái niệm cũng như rút ra ít nhiều kết luận thực tế đã trở nên dễ dàng hơn nhiều. Kết luận của tôi một năm sau đó là: “Mọi nhà thiết kế web có lòng tự trọng nên biết giải pháp đơn giản và hữu ích này từng được tạo ra để bố cục các trang web”.

Bất cứ ai đã từng làm việc với các biên tập viên đồ họa đều biết lưới là gì. (Photoshop, Pháo hoa, Gimp, v.v.) và tất nhiên đánh giá cao sự cần thiết của nó khi tạo ra bất kỳ thiết kế nào. Nhưng làm cách nào để triển khai Lưới trên web? Trong thực tế dạng bảng bố cục là một thiết kế trang web thực sự với Lưới, chắc chắn là rất tiện lợi. Nhưng không phải mục đích sử dụng của các yếu tố bàn thật kinh khủng.
May mắn thay, sự phổ biến rộng rãi của các tiêu chuẩn web đã phát triển và tiếp tục phát triển trong những năm gần đây, cũng như sự hỗ trợ của chúng trong các trình duyệt hiện đại, đã cho chúng ta cơ hội tạo ra các trang có chức năng phong phú với rất ít đánh dấu logic. Cách bố trí này được gọi Khối. Nhưng cũng Khối bố cục hóa ra là một điểm yếu. Khi tạo các trang với một tập hợp khổng lồ các phần tử có kích thước và ý nghĩa khác nhau, việc đánh dấu các trang như vậy đã trở thành một nhiệm vụ rất khó khăn và nếu có nhiều người làm việc đánh dấu, công việc đó có thể trở thành một cơn ác mộng.
Và rồi kỹ thuật sử dụng Lưới đã ra tay giải cứu. Kỹ thuật này là sự kết hợp giữa Khối Và dạng bảng cách trình bày. Sử dụng nó mang lại cho chúng tôi:

• tốc độ và dễ dàng phát triển
• tự do định vị
• tỷ lệ của các thành phần trang và vị trí của chúng

Giá cho tất cả điều này chỉ là một chút đánh dấu thêm. Tôi nghĩ ngày nay, khi giá đồng hồ của một người đắt hơn nhiều so với phần cứng và năng suất, không khó để đoán được cán cân đang nghiêng về phía nào.

Bố cục với Grid là gì? Trước hết, đó là một khái niệm. Một khái niệm bao gồm nhiều khía cạnh thiết kế và rất ít quy tắc để thực hiện nó. Điều này mang lại sự tự do hoàn toàn và không có tiêu chuẩn hóa trong việc thực hiện nó. Tôi sẽ nói nhiều hơn nữa - cùng một Grid có thể được triển khai theo nhiều cách khác nhau. Nếu bạn đã đọc về Grid, bạn có thể nhận thấy rằng mỗi tác giả đều bắt đầu từ một góc độ mới, đi sâu vào các chi tiết, nói một cách nhẹ nhàng thì khó hiểu. May mắn thay họ bắt đầu xuất hiện Hệ thống lưới- Thư viện CSS để làm việc với Grid. Và sử dụng ví dụ của họ, bạn có thể nhanh chóng nắm vững các nguyên tắc cơ bản của kỹ thuật này.

Tôi nghĩ thật vô nghĩa khi viết về tất cả các khía cạnh của Lưới; bạn có thể dễ dàng tìm thấy thông tin về nó trên Internet. Tôi khuyên bạn nên tạo đơn giản của riêng bạn Hệ thống lưới điện.

Trước tiên, bạn cần hiểu rằng lưới bao gồm các cột và khoảng cách giữa chúng. Có ba giá trị chính - chiều rộng lưới, chiều rộng cột và chiều rộng khoảng cách giữa các cột. Chiều rộng của các cột phụ thuộc vào số lượng của chúng.

Hãy thử tạo một lưới rộng 950 pixel với 16 cột có khoảng cách 10 pixel, do đó, một cột phải rộng 50 pixel. Sau khi hiểu tất cả các giá trị, chúng tôi mở bất kỳ trình soạn thảo đồ họa nào mà chúng tôi biết và tạo bố cục. Bạn cũng có thể thêm phần đệm vào Lưới ở bên trái và bên phải, giả sử mỗi phần là 20 pixel và điều này sẽ dẫn đến bố cục có chiều rộng là 990 pixel. Bạn có thể xem ví dụ của tôi.

Bây giờ chúng ta có thể bắt đầu tạo thư viện của mình. Giống như hầu hết các thư viện CSS của chúng tôi cần thiết lập lại toàn cục, tôi đề xuất Thiết lập lại CSS của Eric Mayer, giữ nguyên đặt lại.css hãy tạo ra lưới.css mà chúng ta có thể thêm ngay một phương pháp làm sạch các thùng chứa khối nổi - Clear Fix. Điều đầu tiên chúng ta cần là một quy tắc cho vùng chứa sẽ chứa tất cả các cột của chúng ta. Chiều rộng của mỗi vùng chứa bằng chiều rộng của lưới của chúng tôi.

.thùng đựng hàng(
lề: 0 tự động;
chiều rộng: 950px;
}

Bây giờ chúng ta có thể thêm quy tắc cho các cột của mình, nó chứa chiều rộng và phần đệm. Thụt lề hoạt động như một khoảng trống (mương nước) giữa các cột.

.cột(
nổi: trái;
lề phải: 10px;
tràn: ẩn;
chiều rộng: 50px;
}

Cột cuối cùng không cần thụt lề; để thực hiện việc này, hãy thêm quy tắc cho cột đó:

Container của chúng ta chứa các cột, các cột là các khối nổi nên phải được làm sạch. Để tránh .clearfix không cần thiết trong đánh dấu, bạn có thể áp dụng quy tắc này cho vùng chứa:

.clearfix:sau .container:sau{
nội dung: ".";
hiển thị: khối;
chiều cao: 0;
rõ ràng: cả hai;
khả năng hiển thị: ẩn;
}

sửa chữa rõ ràng, .thùng đựng hàng( hiển thị: khối nội tuyến; )

/* Ẩn khỏi IE-mac \*/
*html.clearfix, *html.container(chiều cao: 1%;)
.clearfix, .thùng đựng hàng(hiển thị: khối;)
/* Kết thúc việc ẩn khỏi IE-mac */

Bây giờ chúng ta có thể bắt đầu với các cột của mình. Cột có thể rộng hai hoặc ba, v.v. Để làm điều này, chúng ta có thể áp dụng các quy tắc sau cho chúng:

.span-1 ( chiều rộng: 50px; )
.span-2 (chiều rộng: 110px; )
.span-3 (chiều rộng: 170px; )
.span-4 (chiều rộng: 230px; )
.span-5 (chiều rộng: 290px; )
.span-6 (chiều rộng: 350px; )
.span-7 (chiều rộng: 410px; )
.span-8 (chiều rộng: 470px; )
.span-9 (chiều rộng: 530px; )
.span-10 (chiều rộng: 590px; )
.span-11 (chiều rộng: 650px; )
.span-12 (chiều rộng: 710px; )
.span-13 (chiều rộng: 770px; )
.span-14 (chiều rộng: 830px; )
.span-15 (chiều rộng: 890px; )
.span-16 ( chiều rộng: 950px; lề phải: 0; )

Về nguyên tắc, đây là tất cả những gì cần thiết cho việc triển khai Lưới; bạn cũng có thể thêm trình bao bọc và lớp để xem Lưới bằng bố cục. Hãy tạo ra chính.css và thêm vào nó:

.vỏ bánh(
lề: 0 tự động;
chiều rộng: 990px;
}
.overlay(
nền: url trong suốt (overlay.png) lặp lại-y cuộn trên cùng bên trái;
}

Đây là cách bố trí có thể trông như thế nào:

Tôi nghĩ điều này là đủ cho một sự khởi đầu.
Bạn có thể xem ví dụ của tôi

Đặc biệt đối với người dùng trang web, chúng tôi cung cấp bài học thực tế về cách sử dụng hệ thống Lưới 960. Hãy tưởng tượng rằng chúng ta được giao một bản thiết kế bố cục. Đầu tiên, chúng ta phải phác thảo kế hoạch triển khai cấu trúc trang web và chỉ sau đó mới tiến hành viết mã trực tiếp. Sau khi nghiên cứu bài viết này, bạn sẽ có thể xử lý mọi kiểu tóc cổ điển trong thời gian ngắn nhất và màu tóc tự nhiên trong nhiều năm (không có tóc bạc). Vì vậy, đây là thiết kế của chúng tôi:

1. Tạo lưới

Như bạn đã biết, hệ thống 960 Grid sử dụng toàn bộ các lớp và có sẵn trong một số biến thể (phiên bản 12 cột và 16 cột). Vùng chứa chính, bất kể số lượng cột, sẽ luôn rộng 960px. Đối với thiết kế này, chúng tôi sẽ chọn hệ thống 12 cột. Mỗi khối trong hệ thống 960 Grid có lề(lề) 0 10px. Điều này đảm bảo cho chúng tôi phần đệm đồng đều, tỷ lệ 20px. Đối với những người đang bối rối bởi kích thước 960px, tôi khuyên bạn nên xem sơ đồ này. Kích thước này là tối ưu cho phần lớn độ phân giải màn hình. Vì vậy, chúng tôi có khả năng tạo các khối có chiều rộng này:

• 140px
• 220px
• 300px
• 380px
• 460px
• 540px
• 620px
• 700px
• 780px
• 860px
• 940px

Mỗi kích thước có lớp riêng, tên của nó được đặt theo sơ đồ Grid_X, trong đó X là số cột. Nếu bạn cần khối 960px thì bạn nên chọn lớp Grid_12. Để kích hoạt hệ thống 960 Grid, bạn phải vùng chứa gốcđặt lớp container_12 hoặc container 16. Dưới đây là ví dụ nhỏ trang gồm 3 khối. Chiều rộng của cái đầu tiên bằng chiều rộng 960px, 2 cái còn lại lớn bằng một nửa:

Hãy nhớ rằng khi bạn lấp đầy một hàng bằng các khối có lớp Grid_X, hãy đảm bảo rằng tổng cộng chúng không quá 12. Ví dụ: như chúng ta có - hai khối Grid_6 + Grid_6 = 12. Có thể ít hơn: 6, 4 , 2, v.v. d. Bây giờ chúng ta đã xem qua các nguyên tắc cơ bản, chúng ta có thể bắt đầu bài tập thực tế:

2. Tạo một mô hình

Chúng ta hãy thử xây dựng một sơ đồ về những gì chúng ta cần tạo nên. Trước hết chúng ta cần 2 khối 960px. Một cho logo, một cho điều hướng. Tiếp theo là 2 khối (trên một dòng), dành cho áp phích và bản trình bày trang web, khối phân cách (toàn bộ chiều rộng), 4 cột (trên một dòng), lại là khối phân cách và chân trang. Một cái gì đó như thế này:

Tôi nghĩ sau khi xem hình ảnh bạn đã biết chúng tôi cần những lớp học nào. Hãy tự mình thử chúng, sau đó xem mã bên dưới để xem bạn có nghĩ đúng không:

Hãy nhớ rằng ở cuối mỗi dòng chúng ta cần chèn

để hiển thị bình thường trong tất cả các trình duyệt. Đừng quên đưa CSS 960 Grid vào trang của bạn trong phần đầu.

Vậy là bộ xương đã sẵn sàng, vì vậy đã đến lúc bắt đầu trang trí. Đặt chiều cao và màu nền bộ tách khối. Chiều cao của khối menu sẽ phụ thuộc vào chính menu đó. Ngoài ra, đừng quên thêm logo của bạn:

Div.spacer ( màu nền: #8FC73E; chiều cao: 1em; ) div#navbar ( màu nền: #8FC73E; phần đệm: 10px 0; )

Đây là những gì chúng ta sẽ nhận được:

Hiện tại chúng tôi không quan tâm đến thông tin chút nào nên bạn có thể chèn nội dung từ đây vào các cột trung tâm trang này. Trước khi bạn bắt đầu phần trên cùng, hãy chăm sóc phần dưới cùng. Trong thiết kế của chúng tôi, nền chân trang có màu màu xám. TRÊN khoảnh khắc này chúng tôi không thể thực hiện điều này bởi vì nếu bạn nhớ, có một số vết lõm giữa các khối sẽ không cho phép chúng tôi sơn hoàn toàn lên khu vực này. Để giải quyết vấn đề này chúng ta hãy di chuyển 3 khối liên quan đến footer thành các khối riêng biệt với id = footer. Một chi tiết nữa: khi chúng ta sử dụng các lớp trong các lớp, sẽ rất tốt nếu đặt các giá trị alpha (để cho biết khối nào sẽ là khối đầu tiên và omega - cho khối cuối cùng):

Div#footer ( màu nền: #e5e5e6; )

Hoàn hảo! Chân trang của chúng tôi bây giờ có màu nền. Thêm một số văn bản vào đó và chuyển sang khối điều hướng. Theo tất cả các luật nguyên tắc hiện đại bố cục, điều hướng là một danh sách không đánh số. Thêm mã và kiểu sau:

• Bài viết
• chủ đề
• Về
• biên tập viên
• Liên hệ