L布局 trang web CSS

Bố cục trang web

Trang web thường được chia thành đầu trang, menu, nội dung và chân trang:

Có rất nhiều thiết kế bố cục khác nhau để 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, chúng ta sẽ nghiên cứu kỹ lưỡng trong hướng dẫn này.

Đầu trang

Thanh điều hướng (header) thường nằm ở phần trên cùng của trang web (hoặc dưới thanh điều hướng ở phần trên cùng). Nó thường chứa logo hoặc tên trang web:

Example

.header {
  background-color: #F1F1F1;
  text-align: center;
  keo dán: 20px;
}

Result:

Đầu trang

Try It Yourself

Thanh điều hướng

Thanh điều hướng chứa danh sách liên kết để giúp người truy cập duyệt trang web của bạn:

Example

/* Hộpnavbar */
.topnav {
  dư lượng: ẩn;
  màu nền: #333;
}
/* Liên kết Navbar */
.topnav a {
  float: left;
  hiển thị: khối;
  màu: #f2f2f2;
  text-align: center;
  keo dán: 14px 16px;
  decoration văn bản: không;
}
/* Liên kết - thay đổi màu sắc khi trỏ chuột */
.topnav a:hover {
  màu nền: #ddd;
  màu: đen;
}

Result:

Try It Yourself

Nội dung

Loại bố cục sử dụng thường phụ thuộc vào đối tượng người dùng mục tiêu của bạn. Bố cục phổ biến nhất là một trong số các bố cục sau (hoặc kết hợp chúng lại):

  • 1- cộtLayout (thường dùng cho trình duyệt di động)
  • 2- cộtLayout (thường dùng cho máy tính bảng và laptop)
  • 3- cộtLayout (chỉ dùng cho máy tính để bàn)

1- cột:

2- cột:

3- cột:

Chúng ta sẽ tạo layout ba cột và chuyển đổi thành layout một cột trên màn hình nhỏ hơn:

Example

/* Tạo ba cột bằng nhau, đong nhau và nổi floats */
.column {
  float: left;
  width: 33.33%;
}
/* Xóa nổi sau các cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Layout tương thích - làm cho ba cột đ堆叠, thay vì song song trên màn hình nhỏ hơn (chiều rộng 600 pixel hoặc nhỏ hơn) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Result:

Sách tham khảo công nghệ trang web toàn diện

Sách tham khảo của chúng tôi bao gồm tất cả các khía cạnh của công nghệ trang web.

其中包括W3C standard technology: HTML, CSS, XML. và các công nghệ khác, chẳng hạn như JavaScript, PHP, SQL.

Công cụ kiểm tra trực tuyến

At CodeW3C.com, we provide thousands of examples.

By using our online editor, you can edit these examples and experiment with the code.

Quick and Easy Learning Method

A moment's time is as valuable as a piece of gold, so we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need through an easy-to-understand convenient mode.

Try It Yourself

Lưu ý:Để tạo layout 2 cột, hãy thay đổi độ rộng thành 50%. Để tạo layout 4 cột, hãy sử dụng 25%.

Lưu ý:Bạn có muốn biết cách quy tắc @media hoạt động không? Hãy đọc CSS Media Query Học thêm các kiến thức liên quan trong chương này.

Lưu ý:Một cách tiếp cận hiện đại hơn để tạo layout cột là sử dụng CSS Flexbox. Tuy nhiên, Internet Explorer 10 và các phiên bản trước không hỗ trợ nó. Nếu cần hỗ trợ IE6-10, hãy sử dụng float (như đã trình bày ở trên).

Nếu bạn muốn biết thêm thông tin về mô-đun布局 Flexbox, hãy đọc CSS Flexbox Hướng dẫn.

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

Nội dung chính (main content) là phần lớn nhất và quan trọng nhất trên trang web của bạn.

Trường hợp các cột có độ rộng khác nhau rất phổ biến vì phần lớn không gian đều được dành cho nội dung chính. Nội dung phụ (nếu có) thường được sử dụng như là thay thế cho định hướng hoặc thông tin liên quan đến nội dung chính. Bạn có thể thay đổi độ rộng tùy ý, chỉ cần nhớ rằng tổng của chúng phải là 100％:

Example

.column {
  float: left;
}
/* Cột trái và phải */
.column.side {
  width: 25%;
}
/* Cột giữa */
.column.middle {
  width: 50%;
}
/* Layout tương thích - làm cho ba cột đ堆叠, thay vì song song */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Result:

Sách tham khảo công nghệ trang web toàn diện

Sách tham khảo của chúng tôi bao gồm tất cả các khía cạnh của công nghệ trang web.

其中包括W3C standard technology: HTML, CSS, XML. và các công nghệ khác, chẳng hạn như JavaScript, PHP, SQL.

Công cụ kiểm tra trực tuyến

At CodeW3C.com, we provide thousands of examples.

By using our online editor, you can edit these examples and experiment with the code.

Quick and Easy Learning Method

A moment's time is as valuable as a piece of gold, so we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need through an easy-to-understand convenient mode.

Try It Yourself

Footer

The footer is located at the bottom of the page. It usually contains information such as copyright and contact details:

Example

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

Result:

Footer

Try It Yourself

Responsive Website Layout

By using the CSS code above, we have created a responsive website layout that switches between two columns and full-width columns based on screen width:

Try It Yourself