bố cục website css

Bố cục trang web

Một trang web thường được chia thành header, menu, content và footer.

Header

Navigation Menu

Content

Main Content

Content

Footer

Có rất nhiều thiết kế bố trí khác nhau để chúng ta 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

Ví dụ

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

Xem kết quả

Thanh menu đ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 dễ dàng điều hướng qua các nội dung trong trang web.

Link Link Link

Ví dụ

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

Xem 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 cột (hoặc kết hợp nhiều cột) như sau:

Bố cục 1 cột (thường được sử dụng cho các trình duyệt trên thiết bị di động)
Bố cục 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 ta 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.

Ví dụ

/* Tạo 3 cột bằng nhau và float left */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

Xem kết quả

Các cột không bằng nhau

Nội dung chính thường là phần lớn nhất và quan trọng nhất trên trang web của chúng ta. Vì thế, nó phổ biến với độ rộng cột không bằng nhau. 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. Chúng ta có thể thay đổi độ rộng các cột tùy thích, chỉ nhớ rằng nó phải có tổng cộng là 100%.

Ví dụ

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

Xem kết quả

Footer

Footer được đặt ở cuối trang web. 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;
}

Xem kết quả

Bố cục trang web responsive

Bằng cách sử dụng một số mã CSS ở trên, chúng ta đã tạo bố cục trang web responsive, bố cục này khác nhau giữa hai cột và một cột có chiều rộng đầy đủ tùy thuộc vào chiều rộng màn hình.

Xem ví dụ