HTML Layout

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    9 thg 10, 2022

  • Số lượt xem

    502 lượt xem


Một website cơ bản thường có bố cục được sắp xếp dựa trên các dòng và cột. Trong HTML các bố cục đó được gọi chung là HTML Layout.

Ví dụ một layout đơn giản của một website về tin tức

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

 

HTML Layout Elements

Trong HTML ta nên dùng các thẻ khác nhau theo từng trường hợp:

  • <header> - Xác định tiêu đề cho một tài liệu hoặc một section
  • <nav> - Xác định một tập hợp các link điều hướng
  • <section> - Xác định một phần trong tài liệu
  • <article> - Xác định nội dung độc lập, khép kín
  • <aside> - Xác định nội dung ngoài nội dung (như thanh bên)
  • <footer> - Xác định chân trang cho một tài liệu hoặc một section
  • <details> - Xác định các chi tiết bổ sung mà người dùng có thể mở và đóng theo yêu cầu
  • <summary> - Xác định tiêu đề cho <details> element

Các kỹ thuật tạo HTML Layout

Có bốn kỹ thuật khác nhau để tạo bố cục nhiều cột. Mỗi kỹ thuật đều có ưu và nhược điểm của nó:

  • CSS framework
  • CSS float property
  • CSS flexbox
  • CSS grid

CSS Frameworks

Nếu bạn muốn tạo nhanh một layout, bạn có thể sử dụng CSS Frameworks như Bootstrap.

CSS Float Layout

Thông thường, người ta thực hiện tạo layout cho trang web bằng cách sử dụng thuộc tính float của CSS. Float rất dễ học - bạn chỉ cần nhớ cách hoạt động của thuộc tính floatclear.

Nhược điểm: ảnh hưởng đến element chứa chúng (phần tử “cha” của chúng). Nếu phần tử cha mẹ này không chứa gì ngoài các phần tử float, thì chiều cao của nó thực sự sẽ giảm xuống không còn gì cả.

Ví dụ

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

 

CSS Flexbox Layout

Việc sử dụng flexbox đảm bảo rằng có thể kiểm soát các element khi cần bố cục trang thay đổi để phù hợp với các kích thước màn hình khác nhau và các thiết bị hiển thị khác nhau.

Ví dụ

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

 

CSS Grid Layout

CSS Grid Layout cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang web dễ dàng hơn mà không cần phải sử dụng float và position.

 


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.