- Hotline: 0988.184.022
English
Tiếng Việt

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

Cập nhật: 12/09/2018
Lượt xem: 109
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!
   
THÔNG TIN LIÊN HỆ
CÔNG TY THIẾT KẾ WEBSITE TẤT THÀNH  
Địa chỉ :  P 3203, Tòa 34T2, Hoàng Đạo Thúy, Cầu Giấy, Hà Nội                               
Hotline 0988 184 022 / 0242.2617.‎666 / 0242.2847.888
Email :  linh@tatthanh.com.vn
Website :  www.thietkewebsitepro.net 


FANPAGE FACEBOOK
FOLLOW US ON
ĐĂNG KÝ NHẬN BẢN TIN
ĐĂNG KÝ
COPYRIGHT 2015 THIETKEWEBSITEPRO.NET ALL RIGHTS RESERVED.