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.
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
<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 float và clear.
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.
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.
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.
Đâ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.