答案：HTML页面布局通过div和CSS实现，利用语义化标签划分头部、导航、主体、侧边栏和底部；采用Flexbox或浮动方式构建多栏布局，其中Flex布局更简洁高效，配合响应式设计可满足现代网页需求。
实现HTML页面布局主要依靠结构标签（如div）和CSS样式控制。通过合理组织HTML结构并配合CSS定位、浮动、弹性盒等技术，可以构建清晰、响应式的网页布局。
1. 常见的页面结构划分
大多数网页可划分为以下几个部分：
- 头部（header）：放置网站Logo、导航菜单
- 导航栏（nav）：主导航链接
- 主体内容（main/content）：核心信息展示区
- 侧边栏（sidebar）：辅助内容，如广告、分类
- 底部（footer）：版权信息、联系方式
使用div作为容器，语义化更强的HTML5标签也可替代div，提升可读性。
2. 使用div + CSS 实现经典三栏布局
一个常见的布局是“左栏固定 + 中间自适应 + 右栏固定”或“左栏 + 主内容”的组合。以下是一个左侧固定、右侧自适应的示例：
立即学习“前端免费学习笔记（深入）”；
<div class="container"><div class="sidebar">左侧菜单</div>
<div class="main-content">主内容区域</div>
</div>
CSS样式如下：
.container {display: flex;
}
.sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 15px;
}
.main-content {
flex: 1;
padding: 15px;
background-color: #fff;
}
这里使用了Flexbox（弹性盒布局），简洁高效，适合现代浏览器。
3. 使用浮动实现两栏布局（传统方法）
在不使用Flex的情况下，可通过浮动实现类似效果：
.sidebar {float: left;
width: 200px;
background: #ddd;
}
.main-content {
margin-left: 200px;
background: #eee;
}
注意：浮动元素需清除浮动，避免影响后续布局。可在容器末尾添加 <div style="clear:both;"></div> 或为父容器设置 overflow: hidden。
4. 简单完整页面布局示例
结合头部、导航、主体、侧边栏和底部，构建一个基础页面：
<!DOCTYPE html><html>
<head>
<style>
body { margin: 0; font-family: Arial; }
header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
nav {
background: #444;
padding: 10px;
text-align: center;
}
.container {
display: flex;
min-height: 60vh;
}
.sidebar {
width: 200px;
background: #f4f4f4;
padding: 15px;
}
.content {
flex: 1;
padding: 15px;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header><h1>我的网站</h1></header>
<nav>首页 | 关于 | 联系</nav>
<div class="container">
<div class="sidebar">菜单项1<br>菜单项2</div>
<div class="content"><h2>欢迎访问</h2><p>这里是主要内容区域。</p></div>
</div>
<footer>© 2025 我的网站 版权所有</footer>
</body>
</html>
这个结构清晰，易于扩展，适合初学者理解和修改。
基本上就这些。掌握div结构与CSS布局方式，特别是Flex布局，就能应对大多数静态页面需求。随着学习深入，还可以尝试Grid布局、响应式设计等进阶技巧。
