Bố cục HTML
|
Ở bài này, tôi sẽ hướng dẫn bạn cách thiết kế một Layout đơn giản như sau: (Hoặc xem Layout cụ thể tại đây) Show Hướng dẫn học lập trình web từ cơ bản đến nâng cao Layout là gì?Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web. Một trang web thường gồm các thành phần chính như:
©2016 Web cơ bản All Rights Reserved Giải thích đoạn mãLayout gồm 3 thành phần chính: header, content, footer. Thêm một thành phần container dùng để làm thùng chứa cho header, content, footer. Trong CSS, ta thiết lập chiều rộng cho khối container là 800px. Dùng thuộc tính margin-left và margin-right để canh cho khối container nằm ở giữa màn hình. Nói đến chia bố cục thì ngày xưa mọi người sẽ nghĩ đến để tìm hiểu Cafedev chia sẻ cho ace về hiểu layout – bố cục một trang web đơn giản với CSS thông qua ví dụ và thực hành chi tiết tại bài này. Nội dung chính 1. Website Layout – Bố cục trang webMột trang web thường được chia thành đầu trang, menu, nội dung và chân trang(headers, menus, content and a footer): Có rất nhiều thiết kế bố trí khác nhau để 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. 2. HeaderTiê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: 3. Navigation BarThanh điều hướng 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: Copy and chạy code 4. ContentBố cục trong phần này, thường phụ thuộc vào mục tiêu người dùng. Bố cục phổ biến nhất là một (hoặc kết hợp chúng) như sau:
Chúng tôi 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: Mẹo: Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, hãy sử dụng 25%, v.v. 5. Các cột không bằng nhauNộ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 độ rộng cột không bằng nhau, vì vậy 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. Thay đổi độ rộng tùy thích, chỉ nên nhớ rằng nó phải cộng tổng cộng 100%: 6. FooterChân trang đượ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ệ: 7. Demo Bố cục trang web đầy đủBằng cách sử dụng một số mã CSS ở trên, chúng tôi đã tạo bố cục trang web, bố cục này khác nhau giữa hai cột và cột có chiều rộng đầy đủ tùy thuộc vào chiều rộng màn hình: Full series tự học CSS từ cơ bản tới nâng cao. Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa: |
