Bài 38: Bố cục website trong CSS
Nội dung
Bố cục website
Một một website thường được chia thành các phần headers, menus, content và footer:
Có rất nhiều thiết kế bố trí khác nhau để lựa chọn. Tuy nhiên, cấu trúc trên là một trong những cấu trúc phổ biến nhất và chúng ta sẽ xem xét kỹ hơn trong hướng dẫn này.
Tiêu đề – Header
Header thường thường nằm ở đầu trang web (hoặc ngay bên dưới menu điều hướng trên cùng). Nó thường chứa logo hoặc tên của trang web:
.header {
background-color: dimgrey;
color: chartreuse;
padding: 20px;
text-align: center;
}
Navigation Bar chứa danh sách các liên kết điều hướng tới các mục chính trang web của bạn:
.topnav {
overflow: hidden;
background-color: #333;
}
/* tạo kiểu cho liên kết */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* thay đổi màu khi di chuột */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Nội dung – Content
Bố cục trong khu vực này, thường dựa vào đối tượng người dùng. Bố cục phổ biến nhất là một (hoặc kết hợp chúng) như sau:
- 1-column (thường sử dụng cho trình duyệt trên di động)
- 2-column (thường sử dụng cho máy tính bảng và laptop)
- 3-column (sử dụng duy nhất cho máy tính để bàn)
Chúng ta 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ỏ:
/*Tạo ba cột bằng nhau xếp bên cạnh nhau */
.column {
float: left;
width: 33.33%;
padding: 15px;
}
/* Xóa float khác sau các cột */
.row:after {
content: "";
display: table;
clear: both;
}
/* Bố cục linh hoạt: ba cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình
có chiều rộng dưới 600px */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
Các cột không bằng nhau – Unequal Columns
Nội dung chính là phần lớn nhất và quan trọng nhất đối với trang web của bạn.
Nó phổ biến với độ rộng cột không bằng nhau, vì vậy hầu hết không gian được dành cho nội dung chính. Nội dung phụ (nếu có) thường được sử dụng như một điều hướng thay thế hoặc để chỉ rõ thông tin liên quan đến nội dung chính. Thay đổi độ rộng tùy thích, chỉ cần nhớ rằng nó phải cộng tổng cộng 100%:
/* Tạo ba cột bằng nhau xếp bên cạnh nhau */
.column {
float: left;
padding: 10px;
}
/* Cột trái và phải */
.column.side {
width: 25%;
}
/* Cột giữa */
.column.middle {
width: 50%;
}
/* Xóa float sau các cột */
.row:after {
content: "";
display: table;
clear: both;
}
/* Bố cục linh hoạt: ba cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình có chiều rộng dưới 600px */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Footer được đặt ở cuối cùng trong 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;
}
Bố cục trang web đáp ứng kích thước màn hình
Bằng cách sử dụng một số mã CSS ở trên, chúng tôi đã tạo bố cục trang web đáp ứng, bố cục này khác nhau giữa hai cột và cột có chiều rộng đầy đủ tùy thuộc vào chiều rộng màn hình:
