第一节 简易首页制作
一、需求分析
现代网页结构通常遵循清晰的模块化设计。以本节待开发的简易首页为例，页面整体可精准划分为四个核心功能区：页头（Header，包含品牌标识）、导航栏（Navigation，控制全站路由）、主体内容区（Content，承载核心信息展示）以及页脚（Footer，提供版权与附加说明）。这种经典的结构不仅符合用户的视觉动线，也为后续的响应式自适应布局打下了坚实基础。
图 6-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 的定宽容器。利用自动外边距实现整体居中，确保在大屏显示器上内容依然紧凑聚焦。
<header>
<div class="row">
<div class="logo"><a href="/">WEB前端开发作业演示</a></div>
</div>
</header>
为页头及品牌 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 布局在处理这类等分布局时极为高效。
<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-1</a></li>
<li><a href="#">3-1</a></li>
<li><a href="#">4-2</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</div>
CSS 样式
重点关注子菜单的绝对定位（position: absolute）原理，以及通过透明度（opacity）配合过渡（transition）实现的平滑展开动画。
/* 导航栏外层背景 */
.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）控制留白，可以显著提升页面的呼吸感与阅读体验。
<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;
}
（五）构建底部模块
作为页面的收尾，页脚通常采用深色背景搭配浅色文字，形成视觉上的稳定感，同时提供版权声明以彰显专业性。
<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; /* 反白文字 */
}