Layout - Cách Thiết Kế Bố Cục Cho Trang Web Trong HTML

Trang chủ » Bố Cục Html » Layout - Cách Thiết Kế Bố Cục Cho Trang Web Trong HTML

Có thể bạn quan tâm

Layout - Cách thiết kế bố cục cho trang web trong HTML

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ư:

  • Header: Giới thiệu logo, một vài câu khẩu hiệu của trang web
  • Footer: Thông tin bản quyền của trang web
  • Menu: Thanh chức năng
  • Nội dung
  • ....

Ví dụ, dưới đây là một mẫu Layout cơ bản gồm 4 thành phần: Header, Footer, Menu, Nội dung.

WEB CƠ BẢN .VN Hướng dẫn học lập trình web từ cơ bản đến nâng cao
  • - Bài 01: Tên bài học
  • - Bài 02: Tên bài học
  • - Bài 03: Tên bài học
  • - Bài 04: Tên bài học
  • - Bài 05: Tên bài học
  • - Bài 06: Tên bài học
  • - Bài 07: Tên bài học
  • - Bài 08: Tên bài học
  • - Bài 09: Tên bài học
  • - Bài 10: Tên bài học
  • - Bài 11: Tên bài học
  • - Bài 12: Tên bài học

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ư:

  • Header: Giới thiệu logo, một vài khẩu hiệu của trang web
  • Footer: Thông tin bản quyền của trang web
  • Menu: Thanh chức năng
  • Nội dung
  • ....
©2016 Web cơ bản All Rights Reserved

Cách thiết kế Layout

Trong việc thiết kế Layout, thẻ <div> thường được dùng để phân chia các thành phần chính của trang web.

Trong mỗi thành phần chính, ta có thể thêm các thẻ <div> khác cho thành phần nhỏ hơn.

Kết hợp với thuộc tính định dạng CSS, ta có thể thiết kế được Layout như ý.

Ở 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)

WEB CƠ BẢN .VN 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ư:

  • Header: Giới thiệu logo, một vài khẩu hiệu của trang web
  • Footer: Thông tin bản quyền của trang web
  • Menu: Thanh chức năng
  • Nội dung
  • ....
©2016 Web cơ bản All Rights Reserved Code Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> body{ margin:0px; } #container{ width:800px; border:1px solid gray; margin-left:auto; margin-right:auto; } #header{ background-color:#73ad21; color:white; } #content{ margin:15px; } #footer{ background-color:#ddd; font-size:18px; text-align:center; padding:15px; } .title1{ font-size:30px; text-align:center; padding-top:15px; } .title2{ text-align:center; font-size:18px; padding-top:5px; padding-bottom:15px; } </style> </head> <body> <div id="container"> <div id="header"> <div class="title1">WEB CƠ BẢN .VN</div> <div class="title2">Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div> </div> <div id="content"> <h2>Layout là gì?</h2> <p>Một trang web thường gồm các thành phần chính như:</p> <ul type="circle"> <li>Header: Giới thiệu logo, một vài khẩu hiệu của trang web</li> <li>Footer: Thông tin bản quyền của trang web</li> <li>Menu: Thanh chức năng</li> <li>Nội dung</li> <li>....</li> </ul> </div> <div id="footer">&copy;2016 Web cơ bản All Rights Reserved</div> </div> </body> </html> Xem ví dụ

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.

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.

Từ khóa » Bố Cục Html