Bố cục HTML chỉ định cách sắp xếp của các thành phần trên một trang web HTML. Có nhiều phần tử ngữ nghĩa HTML xác định các phần khác nhau của trang web.
Sau đây là các phần tử HTML ngữ nghĩa được sử dụng cho bố cục HTML:
Thẻ| Giải thích | |
|---|---|
| tiêu đề | Nó chỉ định tiêu đề cho một phần hoặc cho một tài liệu. |
| Nó đại diện cho một phần trong tài liệu. | |
| nav | Nó chỉ định một vùng chứa cho các liên kết điều hướng. |
| bài báo | Nó chỉ định một bài báo tự chứa độc lập. |
| sang một bên | Nó chỉ định một thẻ cho nội dung ngoài nội dung chính (như một thanh bên). |
| footer | Nó chỉ định chân trang cho một phần hoặc cho một tài liệu. |
| chi tiết | Nó chỉ định một thẻ để biết thêm chi tiết. |
| tóm tắt | Nó chỉ định một tiêu đề cho phần tử . |
Các kỹ thuật được sử dụng cho bố cục trang web HTML:
- Thuộc tính float của CSS
- Hộp linh hoạt CSS
- Khung CSS
- Lưới CSS
- Bảng HTML
Ví dụ
Hãy để chúng tôi xem một ví dụ về Bố cục HTML:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Layouts Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html> Đầu ra
