Cách chia bố cục trang web phổ biến nhất

12/09/2018 - 04:19 PM
Cách chia bố cục trang web cơ bản được sử dụng phổ biến nhất hiện nay được thể hiện theo thứ tự tiêu đề, menu, nội dung chính và chân trang. Xem ngay cách chia bố cục mẫu sau đây để lựa chọn bố cục trang web phù hợp, thân thiện với các thiết bị điện tử và thân thiện với người dùng. 
 

Cách chia bố cục trang web khoa học nhất


Có rất nhiều thiết kế bố trí các mục khác nhau trên website để bạn lựa chọn. Tuy nhiên, cấu trúc ở dưới đây 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 cách chia bố cục trang web này.

Mẫu chia bố cục trang web đang được sử dụng phổ biến nhất hiện nay là tiêu đề > mennu điều hướng > Nội dung chính > Chân trang. Bạn có thể xem cách chia bố cục trang web một cách trực quan hơn ở hình mô tả dưới đây.
 
Cách chia bố cục trang web

Cách chia bố cục trang web được áp dụng phổ biến nhất


 1  - Tiêu đề website


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 logo hoặc tên trang web.

Ví vụ về bố cục tiêu đề trang web:

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

Kết quả như sau: 

Tiêu đề (Header)


 2  - Thanh menu điều hướng


Thanh điều hướng hoặc thanh menu điều hướng chứa danh sách các liên kết để khách có thể dễ dàng truy cập đến tất cả các nội dung chính có trong trang web của bạn.

Ví vụ về bố cục thanh điều hướng trang web:

 
/* The navbar container */
.topnav {
    overflow: hidden;
    background-color: #333;
}
 
/* Navbar links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
/* Links - change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

Kết quả như sau: 

Link  Link Link  

 3  - Bố cục trang web về nội dung


Mỗi trang web có cách bố trí nội dung khác nhau, thường phục thuộc vào tính chất mỗi dịch vụ và mục tiêu mà người dùng hướng đến. Cách chia bố cục trang web phổ biến nhất là một trong những kết hợp như sau: 
 
  • 1 cột ( cách chia bố cục trang web này thường được sử dụng cho trình duyệt di động)
Cách chia bố cục trang web -
Cách chia bố cục trang web 1 cột thường dùng cho các phiên bản mobile
 
  • 2 cột ( cách chia bố cục trang web 2 cột thường được sử dụng cho máy tính bảng và máy tính xách tay)
Cách chia bố cục nội dung trang web
 
Cách chia bố cục trang web 2 cột thường dùng cho các phiên bản 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)
Cách chia bố cục nội dung trang web
Cách chia bố cục này chỉ dành cho máy tính để bàn
 
Ví dụ về cách chia bố cục nội dung thành 3 cột

 
/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
}
 
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
 
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

Lưu ý, tổng chiều rộng toàn trang web là 100%. Nếu bạn chia bố cụ trang web làm 2 cột, bạn hãy thay đổi chiều rộng là 50%, nếu chia bố cục là 4 cột, hay đổi chiều rộng bằng 25%. 

Bạn cũng có thể sử dụng CSS Flexbox để ctạo bố cục với các cột nội dung cho web. 

Nếu bạn có ý định chia các cột nội udng với kích thước các cột không bằng nhau. Bạn muốn ưu tiên nội dung chính sẽ là phần lớn nhất trên web của mình. Cách chia bố cục trang web theo nội dung chính và nội dung phụ (nếu có) thfi bạn có thể thay đổi độ rộng tùy thích bằng hướng dẫn như sau:

Ví dụ về cách chia bố cục nội dung thành các cột không bằng nhau

 
.column {
    float: left;
}
 
/* Left and right column */
.column.side {
    width: 25%;
}
 
/* Middle column */
.column.middle {
    width: 50%;
}
 
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column.side, .column.middle {
        width100%;
    }
}


Kết quả: 

Nội dung phụ Nội dung chính Nội dung phụ
Đây là nội dung phụ hoặc navigation của trang web thietkewebsitepro.net Đây là nội dung của trang chính thietkewebsitepro.net chuyên thiết kế website bất động sản, thiết kế website tập đoàn hàng đầu tại Hà Nội. Đây có thể là thanh bên hay sidebar của website thietkewebsitepro.net


 4  - Bố cục chân trang 

 
Chân trang được đặt ở cuối mỗi trang web. Nó thường chứa thông tin như bản quyền và thông tin liên hệ, liên kết mạng xã hội, bản đồ địa chỉ google maps,...

Ví dụ về bố cục chân trang
 
 
.footer {
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
}

Kết quả

Chân trang (Footer)

Trên đây là gợi ý cách chia bố cục trang web cơ bản đang được dùng khá phổ biến hiện nay, được áp dụng rất nhiều cho các websiet. Bạn có thể sử dụng một số mã CSS mà chúng tôi chia sẻ ở trên đây để tự thực hiện chia bố cục trang web của mình. Chúc bạn thành công!
Bình luận
Các bài viết khác
Các loại cây dành cho mệnh thủy nên trồng trong nhà
2018
15/11
Các loại cây dành cho mệnh thủy nên trồng trong nhà đem đến nhiều may mắn, tài lộc. Nếu bạn chưa biết mệnh thủy hợp cây gì, xem ngay
Cách hóa giải nhà vệ sinh trên phòng khách
2018
09/11
Những cấm kỵ khi thiết kế nhà vệ sinh trên phòng khách, làm thế nào để hóa giải? Dưới đây là một vài gợi ý hóa giải phong thủy nhà vệ sinh và phòng khách
Trung tâm thương mại là gì?
2018
05/10
Trung tâm thương mại là gì? Tiêu chuẩn trung tâm thương mại gồm những yêu cầu gì? Xem ngay tất tần tật các thông tin về trung tâm thương mại
Tìm hiểu tiêu chuẩn khách sạn 5 sao quốc tế
2018
04/10
Tiêu chuẩn khách sạn 5 sao quốc tế gồm những yêu cầu gì về thiết kế, dịch vụ, cơ sở vật chất,... Xem ngay các hạng mục để xếp hạng tiêu chuẩn thiết kế khách sạn 5 sao
Căn hộ chung cư thương mại là gì?
2018
25/09
chung cư thương mại là gì? Căn hộ thương mại là gì? Chúng có gì khác biệt so với chung cư cao cấp? So sánh về giá, chất lượng, các khoản phí toàn nhà,...
CÔNG TY CỔ PHẦN DỊCH VỤ TẤT THÀNH
Địa chỉ: Phòng 3203, Tòa nhà 34T, Đường Hoàng Đạo Thúy, Quận Cầu Giấy, Hà Nội
Hotline: 0988.184.022 / 0242.2617.‎666