HTML - 布局

HTML 布局指定 HTML 网页上组件的排列方式。良好的网页布局结构对于在我们的网站上提供用户友好的体验非常重要。设计具有出色外观和感觉的网站布局需要相当长的时间。

HTML 布局元素

下面列出的元素用于创建 HTML 布局的结构。

元素	描述
header	定义在 HTML 网页中添加标题部分。此标签内的所有内容都将位于网页顶部。
nav	定义网页中页面的一部分，其中具有指向页面中其他页面或部分的超链接（就像菜单栏一样）。
section	定义了网页的主要部分，其中将显示所有重要内容。
footer	定义网页的页脚部分。本部分包含版权信息和其他重要详细信息。它将始终位于网页的底部。
article	定义一个独立的自包含内容，例如论坛帖子、杂志、任何博客文章等。
aside	定义与主要内容直接或间接相关的内容部分（如侧边栏）。
summary	定义<details> 元素的标题。
details	定义一个标签来获取其他信息。它需要 <summary> 元素。

HTML 布局示例

下面是一些说明 HTML 布局设计的示例。CSS和CSS框架用于设计布局。上述元素用于创建布局结构。

定义 HTML 布局

我们可以通过简单地使用 <header>、<footer> 和 <nav> 等标签来实现 HTML 布局。下面的代码演示如何制作 HTML 布局


<!DOCTYPE html>
<html lang="en">
<head>
	 <style>
			.header {
				 background-color: #b3e0f2;
				 text-align: center;
				 padding: 20px;
				 font-size: 2em;
				 font-weight: bold;
			}
			.container {
				 display: flex;
			}
			.sidebar {
				 width: 20%;
				 background-color: #f4f4f4;
				 padding: 20px;
			}
			.content {
				 width: 80%;
				 background-color: #f9f9f9;
				 padding: 20px;
			}
			.footer {
				 background-color: #b3e0f2;
				 text-align: center;
				 padding: 10px;
				 position: fixed;
				 width: 100%;
				 bottom: 0;
			}
	 </style>
</head>
<body>
			<div class="header">
				 Title
			</div>
			<div class="container">
				 <div class="sidebar">
						<a href="#">Home</a>
						<a href="#">Learn HTML</a>
						<a href="#">About Us</a>
				 </div>
				 <div class="content">
						<h1>Home</h1>
						<p>This is a home page.</p>
				 </div>
			</div>
			<div class="footer">
				 Footer
			</div>
</body>
</html>

创建 HTML 布局的方法

有四种方法可以在 HTML 中创建多列布局并对其进行设计。

CSS Float 属性： 控制网页中位置和格式的经典方法。
CSS Flexbox 属性：用于动态布局和定位不同屏幕尺寸的元素
CSS Grid 属性：创建复杂的网格状布局
CSS框架： 像 bootstrap 这样的框架允许创建动态布局

要了解如何使用 CSS 制作 HTML 布局，请访问使用 CSS 进行布局

使用 Bootstrap 定义布局

CSS 引导程序库可用于在 HTML 中制作布局。以下代码演示了如何完成此操作。


<!DOCTYPE html>
<html lang="en">
<head>
			<!--  Bootstrap CDN Link -->
			<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
						rel="stylesheet">
</head>

<body>
	 <!-- Header -->
	 <header class="bg-info text-white text-center py-4">
			<h1>Title</h1>
	 </header>

	 <!-- Main Container -->
	 <div class="container-fluid">
			<div class="row">
				 <!-- Sidebar -->
				 <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
							 <div class="sidebar-sticky">
									<ul class="nav flex-column">
										 <li class="nav-item">
												<a class="nav-link active" href="#">
													 Home
												</a>
										 </li>
										 <li class="nav-item">
												<a class="nav-link" href="#">
													 Learn HTML
												</a>
										 </li>
										 <li class="nav-item">
												<a class="nav-link" href="#">
													 About Us
												</a>
										 </li>
									</ul>
							 </div>
				 </nav>

				 <!-- Content -->
				 <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
						<h2>Home</h2>
						<p>This is a home page.</p>
				 </main>
			</div>
	 </div>

	 <!-- Footer -->
	 <footer class="bg-info text-white text-center py-3">
			Footer
	 </footer>
</body>
</html>

打印本页