Bố cục trang web CSS
Bố cục trang web
Một trang web thường được chia thành các phần đầu trang, menu, nội dung và phần chân trang:
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 về 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 logo hoặc tên trang web:
Ví 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:
Ví 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) trong số các bố cục sau:
- 1 cột (thường dùng cho trình duyệt trên di động)
- 2 cột (thường dùng cho máy tính bảng, laptop)
- Bố cục 3 cột (chỉ 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 thành bố cục 1 cột trên màn hình nhỏ hơn:
Ví 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 CSS Media Queries 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 cũ hơn. Nếu bạn yêu cầu hỗ trợ IE6-10, hãy sử dụng float (như được hiển thị ở 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ộ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.
Điều phổ biến là độ rộng cột không bằng nhau nên phần lớn 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 làm điều hướng thay thế hoặc để chỉ định thông tin liên quan đến nội dung chính. Thay đổi độ rộng theo ý muốn, chỉ nhớ rằng tổng chiều rộng phải lên tới 100%:
Ví 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ệ:
Ví 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, thay đổi 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 đã bao giờ nghe nói về Example.com.vn Spaces chưa? 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
