Website Layout
Một trang web thường được chia thành headers, menus, content và footer:
Có rất nhiều layout khác nhau để bạn lựa chọn. Tuy nhiên, layout trên là một trong những layout phổ biến nhất và chúng ta sẽ xem xét kỹ hơn trong hướng dẫn này.
Header
Header thường nằm ở đầu trang web (hoặc ngay bên dưới menu trên cùng). Nó thường chứa một logo hoặc tên trang web:
.header { background-color: #F1F1F1; text-align: center; padding: 20px; }
Navigation Bar
Navigation bar chứa danh sách các liên kết để giúp khách truy cập điều hướng qua trang web của bạn:
.topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: black; }
Content
Layout trong phần này, thường phụ thuộc vào người dùng mục tiêu. Layout phổ biến nhất là một (hoặc kết hợp chúng) như sau:
- 1-column (thường được sử dụng cho các trình duyệt di động)
- 2-column (thường dùng cho máy tính bảng và máy tính xách tay)
- 3-column layout (chỉ sử dụng cho máy tính để bàn)
Chúng tôi sẽ tạo bố cục 3 column và thay đổi nó thành bố cục 1 column trên màn hình nhỏ hơn:
.column { float: left; width: 33.33%; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column { width: 100%; } }
Unequal Columns
Nội dung chính là phần lớn nhất và quan trọng nhất trên trang web của bạn.
Nó phổ biến với chiều rộng cột không đồng đều, do đó hầu hết không gian được dành riêng cho nội dung chính. Nội dung bên (nếu có) thường được sử dụng như một điều hướng thay thế hoặc để chỉ định thông tin liên quan đến nội dung chính. Thay đổi chiều rộng như bạn muốn, chỉ nhớ rằng nó sẽ tăng thêm tới 100% trong tổng số:
.column { float: left; } .column.side { width: 25%; } .column.middle { width: 50%; } @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }
Footer
Footer được đặt ở cuối trang của bạn. Nó thường chứa thông tin như bản quyền và thông tin liên hệ:
.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }