HTML 页面布局
学习用语义标签搭建标准网页布局 · 难度：进阶 · +15XP
HTML 页面布局
使用语义标签搭建标准的网页布局框架，是每个前端开发者必须掌握的技能。
标准布局结构
<body>
<header>页头: Logo + 导航</header>
<nav>导航菜单</nav>
<main>
<article>主要内容区</article>
<aside>侧边栏</aside>
</main>
<footer>页脚: 版权信息</footer>
</body>CSS布局方案对比
| 方案 | 适合场景 | 浏览器支持 |
|---|---|---|
| Flexbox | 一维布局（导航、卡片列表） | 所有现代浏览器 |
| Grid | 二维布局（整体页面、画廊） | 所有现代浏览器 |
| Float | 文字环绕图片 | 所有浏览器 |
完整示例
<style>
header{background:#1e293b;color:#fff;padding:16px 24px}
nav{background:#334155;padding:8px 24px}
nav a{color:#94a3b8;margin-right:16px;text-decoration:none}
main{display:flex;min-height:400px}
article{flex:1;padding:24px}
aside{width:250px;background:#f1f5f9;padding:24px}
footer{background:#1e293b;color:#94a3b8;text-align:center;padding:16px}
</style>???? 练习
- 搭建标准博客页面布局
- 使用Flexbox实现侧边栏+主内容