# 第六章 模块制作

## 学习目标

**知识、能力、素养**
- 理解网页模块化拆分的核心逻辑与实际应用场景。
- 掌握基于 HTML5 语义化标签与 CSS 布局实现独立功能模块的开发流程。
- 培养组件化编程思维，提升代码的复用性与项目的可维护性。

----
## 第一节 简易首页制作

### 一、需求分析

现代网页结构通常遵循清晰的模块化设计。以本节待开发的简易首页为例，页面整体可精准划分为四个核心功能区：页头（Header，包含品牌标识）、导航栏（Navigation，控制全站路由）、主体内容区（Content，承载核心信息展示）以及页脚（Footer，提供版权与附加说明）。这种经典的结构不仅符合用户的视觉动线，也为后续的响应式自适应布局打下了坚实基础。
图7-1 简易首页结构示意图
### 二、操作步骤

#### （一）初始化 HTML 基础框架

在开发环境中新建 HTML 文件，通过 `html:5` 快捷指令快速生成标准的 HTML5 文档骨架。这一步是所有网页开发的基础，务必确保配置正确的语言属性（`lang="zh-Hans"`）与贴切的页面标题，为后续的模块拼装提供规范的载体。
```
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>WEB前端开发作业演示</title>
</head>
<body>

</body>
</html>
```
#### （二）构建页头模块

页头是网站的“门面”。我们使用 HTML5 的语义化标签 `<header>` 来包裹这一区域，并在内部设置一个类名为 `row` 的定宽容器。利用自动外边距实现整体居中，确保在大屏显示器上内容依然紧凑聚焦。
**HTML 结构**
在 `body` 标签内写入以下代码
```
<header>
    <div class="row">
        <div class="logo"><a href="/">WEB前端开发作业演示</a></div>
    </div>
</header>
```
**CSS 样式**
为页头及品牌 Logo 添加样式，重点掌握媒体查询（`@media`）在小屏幕设备上的降级处理方式。
```
/* 定义顶部 header 内部行的样式 */
header .row {
    width: 1200px;     /* 设置固定宽度 */
    margin: 0 auto;    /* 启用水平居中布局 */
}

/* 响应式断点：屏幕宽度小于等于960px时，容器宽度设为100% */
@media(max-width: 960px) {
    header .row {
        width: 100%;
    }
}

/* 品牌 Logo 样式设定 */
header .row .logo {
    text-align: center;  
    line-height: 80px;   /* 利用行高实现文字垂直居中 */
    font-size: 26px;     
}

header .row .logo a {
    color: #333;           
    font-weight: bolder;   
    text-decoration: none; /* 清除默认的链接下划线 */
}
```
#### （三）构建全局导航模块

导航模块决定了网站的易用性。此处我们将采用无序列表 `<ul>` 结合 CSS Grid 网格布局，打造一个支持鼠标悬停触发的多级下拉菜单。Grid 布局在处理这类等分布局时极为高效。
**HTML 结构**
紧接在 `header` 模块下方添加以下代码
```
<div class="nav">
    <div class="row">
        <ul>
            <li class="on"><a href="#">首页</a></li>
            <li><a href="#">学习资料</a></li>
            <li><a href="#">作业演示</a>
                <ul>
                    <li><a href="2">2-1</a></li>
                    <li><a href="2">3-1</a></li>
                    <li><a href="2">4-2</a></li>
                </ul>
            </li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
</div>
```
**CSS 样式**
重点关注子菜单的绝对定位（`position: absolute`）原理，以及通过透明度（`opacity`）配合过渡（`transition`）实现的平滑展开动画。
```
body {
    margin: 0; /* 重置浏览器默认的外边距 */
}

/* 导航栏外层背景 */
.nav {
    background-color: #008bc7;
}

.nav .row {
    width: 1200px;
    margin: 0 auto;
}

@media(max-width: 960px) {
    .nav .row {
        width: 100%;
    }
}

/* 一级导航 Grid 布局配置 */
.nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none; /* 移除列表默认圆点 */
    display: grid;
    grid-template-columns: auto auto auto auto auto; /* 均分5列 */
}

@media(max-width: 960px) {
    .nav ul {
        grid-template-columns: auto auto auto; /* 小屏回退至3列 */
    }
}

/* 一级菜单项基准定位 */
.nav ul li {
    position: relative; /* 核心：为下拉子菜单提供绝对定位的参考系 */
    line-height: 50px;
    cursor: pointer;
}

.nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    display: block; /* 将内联元素转为块级，扩大点击热区 */
}

/* 下拉菜单交互逻辑 */
.nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* 菜单项悬停状态高亮 */
.nav ul li:hover,
.nav ul li.hover,
.nav ul li ul li:hover,
.nav ul li ul li.hover {
    background: #0079ad;
}

.nav ul li:hover > a,
.nav ul li.hover > a {
    color: #ffea52;
}

/* 二级下拉菜单初始状态（隐藏） */
.nav ul li ul {
    position: absolute;
    left: 0;
    top: 50px; /* 紧贴一级菜单底部 */
    width: 100%;
    z-index: 6; /* 提升层级，避免被下方内容遮挡 */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .8s; /* 注入平滑淡入动画 */
}

.nav ul li ul li {
    float: none;
    width: 100%;
    background-color: #008bc7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav ul li ul li a {
    color: #fff;
}
```
#### （四）构建内容展示模块

主体内容区用于传达核心价值观或信息。通过合理的内边距（`padding`）控制留白，可以显著提升页面的呼吸感与阅读体验。
**HTML 结构**
在 `nav` 模块下方添加以下代码
```
<div class="content">
    <div class="row">
        <div class="caption">
            <h3>欢迎来到我们的网站</h3>
            <p>这里是您的网站标语或者简介，突出展示关键信息。</p>
        </div>
        <div class="single">
            代码是未来的画笔，前端是创意的舞台。每一行代码都是迈向成功的脚步，每一次挑战都是成长的机遇。不要害怕错误，它们是通向真理的垫脚石。坚持不懈，不断学习，追求卓越，用技术创造无限可能。相信自己的能力，释放内心的创造力，在前端的世界里，你就是那个能改变未来的人！
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
    </div>
</div>
```
**CSS 样式**
```
.content .row {
    padding: 15px;
    width: 1200px;
    margin: 0 auto;
}

@media(max-width: 960px) {
    .content .row {
        width: 100%;
    }
}

.content .row .single {
    padding: 20px 0;
}

/* 标题区域留白控制 */
.content .row .caption {
    padding: 30px 0 50px;
    text-align: center;
}

.content .row .caption h3 {
    font-size: 38px;
    font-weight: 600;
}
```
#### （五）构建页脚版权模块

作为页面的收尾，页脚通常采用深色背景搭配浅色文字，形成视觉上的稳定感，同时提供版权声明以彰显专业性。
**HTML 结构**
在内容模块下方添加底部代码
HTML
```
<footer>
    <div class="copyright">
        <p>Copyright Your WebSite. Some Rights Reserved.</p>
    </div>
</footer>
```
**CSS 样式**
```
footer .copyright {
    text-align: center;
    background: #333333; /* 经典深灰底色 */
    padding: 10px 0px;
    color: #ffffff;      /* 反白文字 */
}
```

现代网页结构通常遵循清晰的模块化设计。以本节待开发的简易首页为例，页面整体可精准划分为四个核心功能区：页头（Header，包含品牌标识）、导航栏（Navigation，控制全站路由）、主体内容区（Content，承载核心信息展示）以及页脚（Footer，提供版权与附加说明）。这种经典的结构不仅符合用户的视觉动线，也为后续的响应式自适应布局打下了坚实基础。图7-1 简易首页结构示意图

第六章 模块制作

前端

容器

路由

HTML5

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

现代网页结构通常遵循清晰的模块化设计。以本节待开发的简易首页为例，页面整体可精准划分为四个核心功能区：页头（Header，包含品牌标识）、导航栏（Navigation，控制全站路由）、主体内容区（Content，承载核心信息展示）以及页脚（Footer，提供版权与附加说明）。这种经典的结构不仅符合用户的视觉动线，也为后...

第六章 模块制作-腾讯云开发者社区-腾讯云

第六章模块制作

第六章模块制作

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第六章 模块制作

第六章 模块制作

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第六章模块制作

第六章模块制作