Bố cục trang web CSS
Bố cục trang web
Một trang web thường được chia thành đầu trang, menu, nội dung và chân trang:
Có rất nhiều thiết kế bố trí khác nhau để bạn 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 đề
Tiêu đề 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 một biểu trưng hoặc tên trang web:
Thí dụ
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Kết quả
Header
Thanh điều hướng
Thanh điều hướng 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:
Thí dụ
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Kết quả
Nội dung
Bố cục trong phần này, thường phụ thuộc vào người dùng mục tiêu. Bố cục phổ biến nhất là một (hoặc kết hợp chúng) như sau:
- 1 cột (thường được sử dụng cho các trình duyệt trên thiết bị di động)
- 2 cột (thường được sử dụng cho máy tính bảng và máy tính xách tay)
- Bố cục 3 cột (chỉ được sử dụng cho máy tính để bàn)
1-cột:
2-cột:
3-cột:
Chúng tôi sẽ tạo bố cục 3 cột và thay đổi nó thành bố cục 1 cột trên màn hình nhỏ hơn:
Thí dụ
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Kết quả
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Mẹo: Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, hãy sử dụng 25%, v.v.
Mẹo: Bạn có thắc mắc quy tắc @media hoạt động như thế nào không? Đọc thêm về nó trong chương Truy vấn phương tiện CSS của chúng tôi .
Mẹo: Một cách hiện đại hơn để tạo bố cục cột là sử dụng CSS Flexbox. Tuy nhiên, nó không được hỗ trợ trong Internet Explorer 10 và các phiên bản trước đó. Nếu bạn yêu cầu hỗ trợ IE6-10, hãy sử dụng float (như hình trên).
Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi .
Các cột không bằng nhau
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 độ 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%:
Thí dụ
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Kết quả
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Chân trang
Chân trang đượ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ệ:
Thí dụ
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Kết quả
Bố cục trang web đáp ứng
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:
Bạn đã từng nghe về W3Schools Spaces ? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng