Cách xây dựng bố cục phức tạp bằng CSS

Bố cục cho web luôn bị giới hạn, thực sự chưa bao giờ có bất cứ điều gì thực sự dành riêng để tạo nội dung dễ hiển thị theo định dạng có ý nghĩa.

Trở lại vào những năm 90 khi web lần đầu tiên nắm giữ, các nhà thiết kế đã quen với việc đặt nội dung trên lưới, tìm thấy cách duy nhất để có kết quả tương tự trong trình duyệt là sử dụng bảng. Sáp nhập các tế bào dẫn đến phức tạp Bố cục trang web , nhưng điều này đã chơi tàn phá với khả năng tiếp cận và SEO. Chuyển tiếp nhanh chóng và hôm nay Có tất cả các cách để đặt nội dung bằng phao, hộp linh hoạt, v.v.

CSS3 đã thực sự đã đẩy các khả năng của web về phía trước và từ năm 2014 đã có Bố cục lưới CSS . Điều này hiện có 75 phần trăm hỗ trợ trình duyệt, vì vậy nó đang nhận được điểm khi đến lúc phải xem xét nghiêm túc. Khung nền của Zurb 6 đã có trên tàu và đang sử dụng điều đó để cung cấp năng lượng cho lưới điện của nó.

Hướng dẫn này sẽ tập trung vào việc tạo một tính năng kiểu tạp chí sẽ chỉ cho bạn cách hoàn hảo thiết kế web đáp ứng cho kích thước màn hình trung bình và nhỏ.

Tải về các tập tin hướng dẫn tại đây

01. Bắt đầu

Mở tệp 'Grid1.html' từ thư mục Bắt đầu trong Tệp dự án . Bố cục HTML cho việc này có năm thẻ div, chỉ đơn giản là Item1-5 dưới dạng các lớp CSS. Đây sẽ là nội dung được đặt vào lưới. Gói container này sẽ xác định lưới, sẽ có bốn cột.

 & lt; div class = "container" & gt;
  & lt; div class = "item1" & gt; mục 1 & lt; / div & gt;
  & lt; div class = "item2" & gt; mục 2 & lt; / div & gt;
  & lt; div class = "item 3" & gt; mục 3 & lt; / div & gt;
  & lt; div class = "item4" & gt; mục 4 & lt; / div & gt;
  & lt; div class = "item5" & gt; mục 5 & lt; / div & gt;
& lt; / div & gt; 

02. Kiểm tra CSS cho lưới

Nhìn vào phần đầu, bạn có thể thấy rằng 'container' đã được yêu cầu được đặt ra dưới dạng lưới, với chiều cao tự động cho các hàng, trong khi các cột sẽ được đặt thành bốn với mỗi lần đặt thành 25 phần trăm của trình duyệt . Kiểm tra điều này trong trình duyệt và bạn sẽ thấy rằng mỗi mục được tự động gán vị trí lưới tiếp theo.

 .Container {
  Hiển thị: lưới;
  Lưới-Mẫu-Rows: Auto;
  Cột lưới-Template: Lặp lại (4, 25%); } 

03. Xác định vị trí lưới

Bây giờ hãy xem tệp 'Grid2.html'. Nó giống như tệp đầu tiên, ngoại trừ 'item1' và 'item2' được cung cấp các vị trí cụ thể. Đầu tiên được định vị trong hàng 1 và kết thúc trước hàng 2. Cột bắt đầu ở mức 1 và kết thúc lúc 3 để nó kéo dài hai cột. Thứ hai bắt đầu tại cột 3 và đưa hai cột tiếp theo. Các mục còn lại điền vào các khe lưới có sẵn tiếp theo.

 .Item1 {
  Lưới-bắt đầu: 1;
  Lưới-Row-End: 2;
  Cột lưới-bắt đầu: 1;
  kết thúc cột lưới: 3;
Không thể
.Item2 {
  Lưới-bắt đầu: 1;
  Lưới-Row-End: 2;
  Cột lưới-Bắt đầu: 3;
  Cột lưới-cuối: 5;
} 

04. Sử dụng mẫu lưới

Mở 'Grid3.html' và nhìn vào phần thân của HTML. Bạn sẽ thấy rằng có một bố cục với một tiêu đề, thanh bên, phần nội dung chính và chân trang. Bạn có thể thêm nhiều văn bản vào nội dung để xem điều gì xảy ra khi điều này được đặt vào. Lưới sẽ sử dụng tính năng mẫu để tạo các phần này thành bố cục.

 & lt; div class = "container" & gt;
  & lt; div class = "tiêu đề" & gt; tiêu đề & lt; / div & gt;
  & lt; div class = "sidebar" & gt; thanh bên & lt; / div & gt;
  & lt; div class = "nội dung" & gt; nội dung & lt; / div & gt;
  & lt; div class = "footer" & gt; footer & lt; / div & gt;
& lt; / div & gt; 

05. Xác định mẫu

Nhìn vào CSS cho container. Nó lại được định nghĩa là một lưới. Hàng trên cùng sẽ cao 200px, giữa sẽ được kích thước tự động và hàng cuối cùng sẽ cao 100px. Các cột được đặt thành rộng 33% và tự động điền phần còn lại. Mẫu trạng thái tiêu đề sẽ lấp đầy cả hai cột. Hàng tiếp theo sẽ là thanh bên trong cột đầu tiên và nội dung trong phần tiếp theo. Chân trang đi qua cả hai.

 .Container {
  Hiển thị: lưới;
  Lưới-Mẫu-Rows: 200px Auto 100px;
  Mẫu lưới-Cột: 33% tự động;
  Mẫu lưới-Khu vực:
  "Tiêu đề tiêu đề"
  "Nội dung thanh bên"
  "Chân trang chân"; } 

06. Liên kết mẫu với lớp

Để liên kết lớp học với mẫu, mã hiển thị ở đây xác định điều này. Mỗi khu vực lưới được đặt tên và liên kết được tạo ra. Nội dung không được hiển thị ở đây, nhưng nó nằm trong tài liệu 'Grid3.html'. Nhìn vào điều này trong trình duyệt để xem bố cục của lưới. Vì hai cột được xác định, mẫu cần hai khu vực trong mỗi dấu phẩy đảo ngược.

 .header {
  Lưới: Tiêu đề;
Không thể
.sidebar {
  Lưới: Sidebar;
Không thể
.footer {
  Lưới: Chân trang; } 

07. Làm cho nó đáp ứng

Để tạo 'Grid3.html' Responsive, một truy vấn phương tiện được chèn và hàng trên cùng được giữ ở mức 200 phần trăm, trong khi các hàng còn lại sẽ tự động được kích thước. Chỉ có một cột, toàn chiều rộng, do đó, mẫu có một từ trong mỗi dấu phẩy đảo ngược để xác định bố cục. Chúng có thể dễ dàng được sắp xếp lại mà không chuyển bất kỳ HTML nào.

 Màn hình @Media và (Độ rộng tối đa: 699px) {
  .thùng đựng hàng {
  Hiển thị: lưới;
  Lưới-Mẫu-Rows: 200px Auto;
  Cột lưới-Mẫu: 100%;
  Lưới-Mẫu-Khu vực: "Tiêu đề" "Thanh bên" "Nội dung" "Chân trang";
  Không thể
} 

08. Làm việc trên một bố cục thực sự

Bây giờ mở 'index.html' - tất cả các html cho nội dung đã được tạo, cũng như một số CSS cho các yếu tố thiết kế. Thêm lưới này vào các thẻ kiểu trong phần đầu. Làm như vậy tạo một lưới ba cột với mẫu cho mỗi phần. Lưu ý toàn bộ dừng cho các phần lưới trống.

 .Container1 {
  Chiều rộng: 80%;
  KHAI THÁC: 0 AUTO;
  Hiển thị: lưới;
  Lưới-Mẫu-Rows: Auto;
  Cột lưới-Template: 33,3% 33,3% tự động;
  Mẫu lưới-khu vực: "Tiêu đề tiêu đề tiêu đề" "". Độc đoán Standfirst "".
} 

09. Liên kết mẫu

Như với bước trước, điều này liên kết tiêu đề với mẫu. Tiêu đề được thông báo sẽ trải rộng tất cả ba cột của lưới, sau đó Standfirst được đặt để chụp hai cột và có một cột trống ở bên trái. Nếu bạn kiểm tra trình duyệt, cột đó được lấp đầy vì nội dung còn lại tự động nạp lại không gian có sẵn tiếp theo - tuy nhiên, nó sẽ không thực hiện việc này khi tất cả được thiết lập.

 .header {
  Lưới: Tiêu đề;
Không thể
.standfirst {
  Lưới: Độc dụng;
} 

10. Thêm các khu vực tiếp theo

Bây giờ bài viết đầu tiên, trích dẫn kéo và hình ảnh lấy nét được đặt vào thiết kế. Trích dẫn kéo và hình ảnh được cạnh nhau trên cùng một hàng. Ở giai đoạn này, bài viết2 chưa được đặt để nó lấy không gian có sẵn đầu tiên trên lưới bên cạnh Quỹ đầu tiên.

 .article1 {
  Lưới: Điều 1;
Không thể
.pullquote {
  Vùng lưới: Pullquote;
Không thể
.tiêu điểm {
  Lưới: Tập trung;
  Text-Căn chỉnh: Trung tâm; } 

11. Kết thúc lưới đầu tiên

Thêm CSS của bài viết thứ hai cho phép tất cả các lưới đầu tiên được đặt chính xác. Nhìn vào điều này trong trình duyệt sẽ hiển thị rằng bố cục hoạt động với hình nền và tạo loại bố cục được nhìn thấy trong các tạp chí, nơi nhà thiết kế hoạt động xung quanh một hình nền lớn.

 .article2 {
    Vùng lưới: Điều2;
    Cột-Gap: 65px;
    Số lượng cột: 2;
} 

12. Thêm một nền trắng

Trước khi bắt đầu lưới thứ hai, bạn có thể tự hỏi tại sao có nhu cầu về hai lưới. Lý do là lưới này sẽ có một nền rộng màu trắng để CSS này sẽ bọc lưới thứ hai. Điều này là để cung cấp cho phần này cảm giác của một trang thứ hai trong thiết kế.

 .WhiteBG {
    Đệm: 100px 0;
    Màu nền: #ddd;
} 

13. Làm một lưới thứ hai

Lưới thứ hai đơn giản hơn lần đầu tiên. Có ba cột, với chiều cao tự động trên các hàng. Nội dung sẽ điền vào một cột mỗi cột để không cần xác định các khu vực mẫu. Tuy nhiên, khi thiết kế máy tính bảng được thêm vào, điều này cần chuyển sang hai cột, do đó cần có một bộ phản xạ và tên sẽ rất quan trọng.

 .Container2 {
    Chiều rộng: 80%;
    KHAI THÁC: 0 AUTO;
    Hiển thị: lưới;
    Lưới-Mẫu-Rows: Auto;
    Cột lưới-Template: 33,3% 33,3% tự động;
    Các mẫu lưới-Mẫu: "IMG1 IMG2 Điều 3";
} 

14. Thêm các cột

Mỗi lớp CSS trong lưới thứ hai được yêu cầu liên kết với cột có liên quan, như được định nghĩa trong mẫu lưới. Màu văn bản bài viết được thay đổi chỉ để làm cho nó nổi bật với nền sáng hơn của phần này. Chỉ với chân trang để hoàn thành, thiết kế bố trí theo kiểu tạp chí gần như được đưa ra.

 .img1 {
  Lưới: IMG1;
Không thể
.img2 {
    Lưới: IMG2;
Không thể
.article3 {
  Lưới: Điều 3;
  Màu sắc: # 333;
} 

15. Hoàn thiện chân của trang

Hoàn thiện trang sẽ đặt một div chiều rộng đầy đủ trên màn hình, sẽ chứa đầy màu đen và văn bản chỉ được đặt ở giữa. Điều này hoàn thành phiên bản máy tính để bàn của thiết kế, nhưng di chuyển màn hình xuống dưới 1200px rộng và trang web bắt đầu phá vỡ.

 .footer {
    Màu nền: # 000;
    Màu sắc: # 999;
    Text-Căn chỉnh: Trung tâm;
    Đệm: 50px 20px 100px;
} 

16. Điều chỉnh thiết kế màn hình trung bình

Truy vấn phương tiện được chèn vào đây để chăm sóc thiết kế khi chiều rộng của trình duyệt nhỏ hơn 1200px. Mã cho các bước 17 và 18 sẽ được đặt bên trong dấu ngoặc trong đó nhận xét. Đây sẽ là một trường hợp thay đổi cả cấu trúc bố cục của lưới.

 Màn hình @Media và (chiều rộng tối đa: 1200px) {
  / * mã ở đây * /
} 

17. Reflow Lưới đầu tiên

Lưới đầu tiên được đặt thành bây giờ điền đầy đủ chiều rộng của trình duyệt chỉ bằng hai cột thay vì ba. Thứ tự của các phần được đặt vào mẫu, với các mặt dẫn chuyển đổi bên, vì điều này phù hợp hơn với hình ảnh nền ở kích thước màn hình này.

 .Container1 {
  Chiều rộng: 100%;
  Lưới-Mẫu-Rows: Auto;
  Mẫu lưới-Cột: 50% 50%;
  Lưới-Mẫu-Khu vực: "Tiêu đề tiêu đề" "Standfirst Standfirst" "Điều 1." "Pullquote Pullquote" "Bài viết 2 Tập trung";
  Không thể
.Điều 2 {
  Số lượng cột: 1;
  } 

18. Kiểm tra bố cục của bạn

Lưới thứ hai cũng được thay đổi kích thước để có toàn bộ chiều rộng của trình duyệt và hai cột được thêm vào. Các hình ảnh được đặt cạnh nhau trên hàng phía trên văn bản để nó vừa vặn trên màn hình. Bạn có thể kiểm tra bố cục này trong trình duyệt bằng cách thay đổi kích thước trình duyệt của bạn dưới chiều rộng 1200px.

 .Container2 {
  Chiều rộng: 100%;
  KHAI THÁC: 0 AUTO;
  Lưới-Mẫu-Rows: Auto;
  Mẫu lưới-Cột: 50% 50%;
  Lưới-Mẫu-Khu vực: "IMG1 IMG2" "Điều 3 Bài toán3";
} 

19. Thiết kế tinh chỉnh cho thiết bị di động

Bất kỳ trình duyệt nào có chiều rộng nhỏ hơn 769px sẽ nhận được mã được thêm vào trong các bước cuối cùng. Tất cả những gì chúng ta cần làm ở đây là đảm bảo rằng mỗi lưới có một bố cục cột duy nhất để nội dung có thể được xem đúng cách trong không gian nhỏ hơn.

 Màn hình @Media và (chiều rộng tối đa: 768px) {
  / * Mã bước cuối cùng tại đây * /
} 

20. Kiểm tra lưới cột đơn

Bây giờ lưới đầu tiên được đặt thành một cột 100% chiều rộng của trình duyệt và thứ tự của các phần được thêm vào trong các khu vực mẫu. Kiểm tra xem phần đầu tiên của trang đang hoạt động như thế nào trên màn hình di động.

 .Container1 {
  Chiều rộng: 100%;
  Lưới-Mẫu-Rows: Auto;
  Cột lưới-Mẫu: 100%;
  Mẫu lưới-các khu vực: "Tiêu đề" "Standfirst" "Bài viết1" "Pullquote" "Tập trung" "Điều 2";
} 

21. Kết thúc bố cục

Ở đây, lưới thứ hai cũng được thực hiện để điền vào một cột duy nhất và bố cục của các phần được xác định. Bây giờ hãy lưu thiết kế đã hoàn thành và xem nó trên các màn hình có kích thước khác nhau để xem khả năng bố trí đầy đủ của lưới CSS và cách dễ dàng sắp xếp lại nội dung cho các chiều rộng khác nhau.

 .Container2 {
  Chiều rộng: 100%;
  KHAI THÁC: 0 AUTO;
  Lưới-Mẫu-Rows: Auto;
  Cột lưới-Mẫu: 100%;
  Các mẫu lưới-mẫu: "IMG1" "IMG2" "Bài viết3";
} 

Bài viết này ban đầu được xuất bản trong nhà thiết kế web thiết kế web sáng tạo. Mua Vấn đề 271. hoặc là đăng ký. .

Những bài viết liên quan:

• 5 mẹo cho CSS siêu nhanh
• Hiểu thuộc tính Hiển thị CSS
• Cách tạo bố cục kim tự tháp với hình CSS