Bố cục trang web trong CSS - CSS Website Layout

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    277 lượt xem


Một trang web thường được chia thành headers, menus, content và footer, chúng tạo nên layout của một trang web.

Website Layout

Một trang web thường được chia thành headers, menus, content và footer:

Có rất nhiều layout khác nhau để bạn lựa chọn. Tuy nhiên, layout trên là một trong những layout phổ biến nhất và chúng ta sẽ xem xét kỹ hơn trong hướng dẫn này.

Header

Header thường nằm ở đầu trang web (hoặc ngay bên dưới menu trên cùng). Nó thường chứa một logo hoặc tên trang web:

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

 

Navigation Bar

Navigation bar 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:

.topnav {    overflow: hidden;    background-color: #333;  }    .topnav a {    float: left;    display: block;    color: #f2f2f2;    text-align: center;    padding: 14px 16px;    text-decoration: none;  }    .topnav a:hover {    background-color: #ddd;    color: black;  }

 

Content

Layout trong phần này, thường phụ thuộc vào người dùng mục tiêu. Layout phổ biến nhất là một (hoặc kết hợp chúng) như sau:

  • 1-column (thường được sử dụng cho các trình duyệt di động)
  • 2-column (thường dùng cho máy tính bảng và máy tính xách tay)
  • 3-column layout (chỉ sử dụng cho máy tính để bàn)

Chúng tôi 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ỏ hơn:

.column {    float: left;    width: 33.33%;  }    .row:after {    content: "";    display: table;    clear: both;  }    @media screen and (max-width: 600px) {    .column {      width: 100%;    }  }

 

Unequal Columns

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 chiều rộng cột không đồng đều, do đó hầu hết không gian được dành riêng cho nội dung chính. Nội dung bên (nếu có) thường được sử dụng như một điều hướng thay thế hoặc để chỉ định thông tin liên quan đến nội dung chính. Thay đổi chiều rộng như bạn muốn, chỉ nhớ rằng nó sẽ tăng thêm tới 100% trong tổng số:

.column {    float: left;  }    .column.side {    width: 25%;  }    .column.middle {    width: 50%;  }    @media screen and (max-width: 600px) {    .column.side, .column.middle {      width: 100%;    }  }

 

Footer

Footer đượ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;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.