Các trang web thường hiển thị nội dung trong nhiều cột (như tạp chí hoặc một tờ báo).
Thí dụ
- London
- Paris
- Tokyo
London
Paris
Tokyo
Luân Đôn là thủ đô của Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị gồm hơn 13 triệu dân.
Đứng trên sông Thames, London là một khu định cư lớn trong hai thiên niên kỷ, lịch sử của nó trở lại thành lập được thành lập bởi người La Mã, người đặt tên là Londinium.
Hãy tự mình thử »
Các yếu tố bố trí HTML
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
|
<details> - Xác định 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 phần tử <details>
Bạn có thể đọc thêm về các yếu tố ngữ nghĩa trong chương ngữ nghĩa HTML của chúng tôi.
- Kỹ thuật bố trí HTML
- Có bốn kỹ thuật khác nhau để tạo ra các bố cục nhiều trường hợp. Mỗi kỹ thuật có ưu và nhược điểm của nó:
- Khung CSS
- CSS Float Property
CSS Flexbox
Lưới CSS
Khung CSSW3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
Nếu bạn muốn tạo bố cục nhanh chóng, bạn có thể sử dụng khung CSS, như W3.CSS hoặc Bootstrap.
Bạn đã bao giờ nghe về không gian trường học W3schools chưa? Tại đây bạn có thể tạo trang web của mình từ đầu hoặc sử dụng một mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯
* Không cần thẻ tín dụngDisadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
Thí dụ
- London
- Paris
- Tokyo
London
Paris
Tokyo
Luân Đôn là thủ đô của Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị gồm hơn 13 triệu dân.
Đứng trên sông Thames, London là một khu định cư lớn trong hai thiên niên kỷ, lịch sử của nó trở lại thành lập được thành lập bởi người La Mã, người đặt tên là Londinium.
Hãy tự mình thử »
Các yếu tố bố trí HTML
Thí dụ
- London
- Paris
- Tokyo
London
Paris
Tokyo
Luân Đôn là thủ đô của Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị gồm hơn 13 triệu dân.
Đứng trên sông Thames, London là một khu định cư lớn trong hai thiên niên kỷ, lịch sử của nó trở lại thành lập được thành lập bởi người La Mã, người đặt tên là Londinium.
Hãy tự mình thử »
Các yếu tố bố trí HTML
Tiêu đề, chân trang, thanh bên và nội dung
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="screen"> body { font-family: verdana, sans-serif; font-size: 12px; } #header { background: #ccc; padding: 20px; } #sidebar { float: right; width: 30%; background: #999; } #content { margin-right: 34%; } #footer { clear: right; background: #eee; padding: 20px; } </style> </head> <body> <div id="header"> <strong>HEADER</strong> </div> <div id="sidebar"> <p><strong>SIDEBAR</strong></p> <ul> <li><a href="#">Link Item 1</a></li> <li><a href="#">Link Item 2</a></li> <li><a href="#">Link Item 3</a></li> <li><a href="#">Link Item 4</a></li> </ul> </div> <div id="content"> <p><strong>CONTENT</strong>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> </div> <div id="footer"> <strong>FOOTER</strong> </div> </body> </html>Các ví dụ liên quan trong cùng một danh mục
1. | BẢO HÀNH cố định | ||
2. | Mark Footer với Div | ||
3. | Đặt đoạn văn bằng chân | ||
4. | Đặt chân trang để bên trái rõ ràng | ||
5. | Footer: Rõ ràng bên trái | ||
6. | 3 Bố cục cột với các cột cân bằng và chân trang | ||
7. | Bố cục chân trang | ||
8. | Chân trang với phần bù dưới cùng | ||
9. | Bàn chân nền và màu sắc | ||
10. | Biên giới chân trang |