1. <div> 元素：<div> 是一个通用的块级容器，常用于组织和布局网页的内容。
<div id="header">头部内容</div>
<div id="main-content">主要内容</div>
<div id="sidebar">侧边栏内容</div>
<div id="footer">底部内容</div>
2. <header>、<main>、<aside>、<footer> 元素：这些HTML5元素提供了更语义化的布局结构，用于定义头部、主要内容、侧边栏和底部。
<header>头部内容</header>
<main>主要内容</main>
<aside>侧边栏内容</aside>
<footer>底部内容</footer>
3. 表格布局：使用<table>元素可以创建复杂的网页布局，但应该避免过度使用表格来布局，因为它违背了HTML的语义化原则。
<table>
<tr>
<td>头部内容</td>
</tr>
<tr>
<td>主要内容</td>
<td>侧边栏内容</td>
</tr>
<tr>
<td colspan="2">底部内容</td>
</tr>
</table>
4. CSS Flexbox 布局：Flexbox 是一种强大的布局模型，允许简单而灵活的布局。
<div class="container">
<div class="header">头部内容</div>
<div class="main-content">主要内容</div>
<div class="sidebar">侧边栏内容</div>
<div class="footer">底部内容</div>
</div>
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 100%视口高度，确保布局占据整个屏幕高度 */
}
.main-content {
flex: 1; /* 填充剩余空间 */
}
5. CSS Grid 布局：Grid 是一种二维布局系统，允许更复杂的布局。
<div class="grid-container">
<div class="header">头部内容</div>
<div class="main-content">主要内容</div>
<div class="sidebar">侧边栏内容</div>
<div class="footer">底部内容</div>
</div>
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto; /* 定义行高 */
grid-template-columns: 1fr 300px; /* 定义列宽 */
grid-template-areas:
"header header"
"main-content sidebar"
"footer footer";
height: 100vh;
}
这些布局方法中，Flexbox 和 Grid 是现代Web开发中经常使用的强大工具，它们提供了更灵活的布局选项，而且更符合响应式设计的需求。选择哪种布局方法取决于具体的设计和布局需求。
转载请注明出处：http://www.zyzy.cn/article/detail/12481/HTML5