Bài 38: Bố cục website trong CSS


Bố cục website

Một một website thường được chia thành các phần headers, menus, contentfooter:
layout_website
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


.header {
  background-color: dimgrey;
  color: chartreuse;
  padding: 20px;
  text-align: center;
}

Thanh điều hướng – Navigation Bar

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


.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)

content
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%;
  }
}

Lưu ý: Tạo bố cục 2-column, thay đổi chiều rộng width thành 50%. Tạo bố cục 4-column, thay đổi chiều rộng width thành 25%, …

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%:
cotkhongbangnhau


/* 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%;
  }
}

Chân trang – Footer

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


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

Có thể bạn sẽ thích…

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

EnglishVietnamese