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.

 

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ụ