现代网页布局已经从过去的“表格布局”和“浮动布局”演进到了更强大、更灵活的 Flexbox 和 Grid 布局，下面我将分步讲解，并提供从基础到高级的完整代码示例。

html5 css3网页布局代码
（图片来源网络，侵删）

第一部分：HTML5 的语义化标签

在开始布局之前,首先要理解 HTML5 引入的语义化标签，它们不仅仅是 <div> 的替代品，更重要的是为你的网页赋予了含义，这有助于 SEO（搜索引擎优化）、可访问性和代码的可读性。

常用语义化标签：

  • <header>: 页面或区域的头部，通常包含 logo、导航菜单等。
  • <nav>: 导航链接的容器。
  • <main>: 页面的主要内容，一个页面中只应有一个 <main>。
  • <article>: 独立的内容单元，比如一篇博客文章、一则新闻。
  • <section>: 文档中的一个区域，通常带有标题。
  • <aside>: 侧边栏或与主要内容相关但独立的内容（如广告、相关链接）。
  • <footer>: 页面或区域的底部，通常包含版权信息、联系方式等。

示例：一个基本的 HTML5 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>文章标题</h2>
            <article>
                <p>这里是文章的主要内容...</p>
            </article>
        </section>
        <aside>
            <h3>侧边栏</h3>
            <p>这里是侧边栏内容...</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

第二部分：CSS3 布局技术

Flexbox (弹性盒子布局)

Flexbox 是一维布局模型，非常适合在行或列中对齐和分布空间，它非常灵活，可以轻松实现垂直居中、等高列等效果。

html5 css3网页布局代码
（图片来源网络，侵删）

核心概念：

  • Flex Container (容器): 设置 display: flex; 的父元素。
  • Flex Items (项目): 容器内的直接子元素。

关键属性：

  • 容器属性:

    • flex-direction: 定义主轴方向 (row | row-reverse | column | column-reverse)。
    • justify-content: 定义项目在主轴上的对齐方式 (flex-start | center | flex-end | space-between | space-around)。
    • align-items: 定义项目在交叉轴上的对齐方式 (stretch | center | flex-start | flex-end)。
    • flex-wrap: 定义项目是否换行 (nowrap | wrap | wrap-reverse)。
    • gap: (现代浏览器支持) 项目之间的间距。

  • 项目属性:

    html5 css3网页布局代码
    （图片来源网络，侵删）
    • flex-grow: 定义项目的放大比例，用于分配剩余空间。
    • flex-shrink: 定义项目的缩小比例。
    • align-self: 允许单个项目有与其他项目不一样的对齐方式。

示例：使用 Flexbox 创建一个简单的页面布局

HTML (与上面的语义化标签结构结合)

<!-- ... 头部内容 ... -->
<body>
    <header>
        <!-- ... -->
    </header>
    <main class="flex-container">
        <section class="main-content">
            <h2>主要内容</h2>
            <p>这里是页面的主要内容区域...</p>
        </section>
        <aside class="sidebar">
            <h3>侧边栏</h3>
            <p>这里是侧边栏内容...</p>
        </aside>
    </main>
    <footer>
        <!-- ... -->
    </footer>
</body>

CSS

/* 基础样式 */
body {
    font-family: sans-serif;
    margin: 0;
}
/* Flexbox 容器 */
.flex-container {
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: row; /* 主轴为水平方向 (默认) */
    justify-content: space-between; /* 项目之间平均分布空间 */
    align-items: flex-start; /* 交叉轴顶部对齐 */
    padding: 20px;
    gap: 20px; /* 项目之间的间距 */
}
区域 */
.main-content {
    flex: 3; /* 占用 3 份可用空间 */
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
}
/* 侧边栏 */
.sidebar {
    flex: 1; /* 占用 1 份可用空间 */
    background-color: #e0e0e0;
    padding: 20px;
    border-radius: 5px;
}
/* 头部和底部样式 */
header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

CSS Grid (网格布局)

CSS Grid 是一个二维布局系统，让你可以同时处理行和列，它非常适合创建复杂的整体页面布局。

核心概念：

  • Grid Container (网格容器): 设置 display: grid; 的父元素。
  • Grid Items (网格项目): 容器内的直接子元素。

关键属性：

  • 容器属性:
    • grid-template-columns: 定义列的尺寸。
    • grid-template-rows: 定义行的尺寸。
    • grid-template-areas: 通过命名来定义区域。
    • gap: (现代浏览器支持) 网格线之间的间距。
    • justify-items: 定义项目在其网格区域内的对齐方式。
    • align-items: 定义项目在其网格区域内的对齐方式。

示例：使用 Grid 创建经典“页头-主体-页脚”布局

HTML

<body class="grid-container">
    <header class="header">
        <h1>网站标题</h1>
        <nav>导航菜单</nav>
    </header>
    <main class="main">
        <h2>主要内容</h2>
        <p>这里是页面的主要内容区域...</p>
    </main>
    <aside class="sidebar">
        <h3>侧边栏</h3>
        <p>这里是侧边栏内容...</p>
    </aside>
    <footer class="footer">
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>

CSS

/* 基础样式 */
body {
    font-family: sans-serif;
    margin: 0;
}
/* Grid 容器 */
.grid-container {
    display: grid; /* 启用 Grid 布局 */
    /* 定义 3 列：页头/页脚占满，侧边栏 200px，主要内容区域自适应 */
    grid-template-columns: 1fr 200px 1fr; 
    /* 定义 4 行：页头、主要内容、侧边栏、页脚 */
    grid-template-rows: auto 1fr auto auto; 
    grid-template-areas:
        "header  header  header"
        "main    sidebar main"
        "footer  footer  footer";
    gap: 10px; /* 网格间距 */
    min-height: 100vh; /* 让容器至少占满整个视口高度 */
}
/* 为每个区域命名，对应 grid-template-areas */
.header {
    grid-area: header;
    background-color: #333;
    color: white;
    padding: 1rem;
}
.main {
    grid-area: main;
    background-color: #f4f4f4;
    padding: 20px;
}
.sidebar {
    grid-area: sidebar;
    background-color: #e0e0e0;
    padding: 20px;
}
.footer {
    grid-area: footer;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

第三部分：响应式设计

现代网页必须在不同设备（桌面、平板、手机）上都能良好显示，CSS3 提供了强大的工具来实现这一点。

媒体查询

媒体查询允许你根据设备的特定条件（如视口宽度）应用不同的 CSS 样式。

示例：为小屏幕设备调整布局

/* 当视口宽度小于等于 768px 时（例如平板或手机） */
@media (max-width: 768px) {
    /* 将 Grid 布局改为单列布局 */
    .grid-container {
        grid-template-columns: 1fr; /* 只有一列 */
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
    /* 也可以调整 Flexbox 布局 */
    .flex-container {
        flex-direction: column; /* 改为垂直排列 */
    }
    .main-content, .sidebar {
        flex: 1; /* 在垂直布局中，两者高度相同 */
    }
}

视口单位

  • vw: 视口宽度的 1%。
  • vh: 视口高度的 1%。
  • vmin: vw 和 vh 中较小的值。
  • vmax: vw 和 vh 中较大的值。

示例：创建一个全屏高的侧边栏

.sidebar {
    height: 100vh; /* 侧边栏高度等于整个视口的高度 */
}

第四部分：完整示例代码

这里提供一个将所有技术结合起来的完整示例文件。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">现代网页布局示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的响应式网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">作品</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main class="main-container">
        <section class="content">
            <h2>欢迎来到我的网站</h2>
            <p>这是一个使用 HTML5 语义化标签和 CSS3 Flexbox/Grid 布局构建的响应式网页示例，请在不同尺寸的浏览器窗口中查看效果。</p>
            <p>在大屏幕上，内容区和侧边栏会并排显示，当屏幕宽度变小时，布局会自动切换为垂直堆叠，以适应移动设备。</p>
        </section>
        <aside class="sidebar">
            <h3>关于我</h3>
            <p>这里是侧边栏，可以放置一些次要信息，如个人简介、热门文章链接或广告等。</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2025 现代网页布局示例. 保留所有权利.</p>
    </footer>
</body>
</html>

style.css

/* --- 全局样式和重置 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}
/* --- 头部样式 --- */
header {
    background-color: #2c3e50;
    color: #fff;
    padding: 1rem 2rem;
    text-align: center;
}
header h1 {
    margin-bottom: 0.5rem;
}
header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}
header nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
header nav a:hover {
    color: #3498db;
}
/* --- 主体容器 (使用 Flexbox) --- */
.main-container {
    display: flex; /* 默认使用 Flexbox */
    flex-direction: row; /* 水平排列 */
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    gap: 2rem;
}
.content {
    flex: 3; /* 内容区域占据更多空间 */
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.sidebar {
    flex: 1; /* 侧边栏占据较少空间 */
    background: #ecf0f1;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* --- 页脚样式 --- */
footer {
    background-color: #34495e;
    color: #ecf0f1;
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
}
/* --- 响应式设计 (媒体查询) --- */
@media (max-width: 768px) {
    /* 在小屏幕上，将导航菜单改为垂直堆叠 */
    header nav ul {
        flex-direction: column;
        gap: 10px;
    }
    /* 在小屏幕上，将主容器内容改为垂直堆叠 */
    .main-container {
        flex-direction: column; /* 关键：切换为垂直布局 */
    }
    /* 确保内容区和侧边栏在小屏幕上宽度一致 */
    .content, .sidebar {
        width: 100%;
    }
}
  1. 语义化先行: 使用 HTML5 语义化标签搭建页面结构，让代码更有意义。
  2. Flexbox for 一维: 当你需要在一行或一列中排列和对齐元素时，首选 Flexbox，非常适合导航栏、卡片列表、居中元素等。
  3. Grid for 二维: 当你需要创建复杂的页面整体布局（如页头、侧边栏、内容区、页脚）时，Grid 是不二之选，它能让你从宏观上控制页面结构。
  4. 响应式是必须: 使用媒体查询和相对单位（如 , fr, vw/vh）来确保你的网站在任何设备上都能正常显示。

掌握这三项技术（语义化、Flexbox、Grid）并理解它们的应用场景，你就可以构建出任何现代、美观且功能强大的网页了。