Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Một trang web thường được chia thành header, menu, content và 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.
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
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>
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:
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; }
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%; }
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ệ ...
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.