Computer >> Máy Tính >  >> Lập trình >> HTML

Bố cục HTML

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ẻ Phần
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

Bố cục HTML