CSS bố cục website

0
53

Một trang web thường được chia thành headers, menus, content and a 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.

Header

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:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Navigation Bar

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:

/* 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 - đổi màu khi hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Content

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:

/* Tạo ba cột bằng nhau nổi bên cạnh nhaur */
.column {
  float: left;
  width: 33.33%;
}

/* Xóa số nổi sau các cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Bố cục đáp ứng - làm cho ba cột xếp chồng lên nhau thay vì cạnh nhau trên màn hình nhỏ hơn (rộng 600px trở xuống) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

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ỉ nhớ rằng nó phải cộng tổng cộng 100%:

.column {
  float: left;
}

/* Cột trái và phải  */
.column.side {
  width: 25%;
}

/* Cột giữa */
.column.middle {
  width: 50%;
}

/* Responsive layout - làm cho ba cột xếp chồng lên nhau thay vì cạnh nhau
 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Footer

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ệ:

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây