1. 公共头部、底部的结构思路

我们这个项目是多页面网站，首页、列表页、文章详情页等页面，顶部导航和底部版权区域几乎完全一样。如果每个页面都重复写一遍头部和底部代码，后期修改文字或者样式时，就需要改 5 次，维护成本很高。

虽然没有后端组件技术，但是我们依然可以统一规范结构，所有页面保持相同的 header 和 footer 结构，实现 “准复用”。

• header：网站 LOGO + 导航菜单
• main：页面主体内容，每一页的主体部分不一样
• footer：版权信息、简单站点说明

页面基础结构模板，后续所有 HTML 页面都基于这个模板开发：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><!-- 适配移动端视口，保证手机正常显示 --><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>网站标题</title><!-- 引入外部公共CSS样式文件 --><linkrel="stylesheet"href="css/style.css"></head><body><header><!-- 导航与LOGO写在这里 --></header><main><!-- 当前页面主体内容 --></main><footer><!-- 底部版权信息 --></footer></body></html>

每一个 html 文件都套用这个骨架，只修改 title 和 main 里面的内容。

2. CSS 重置样式编写

浏览器自带默认样式，不同浏览器默认的外边距、内边距、字体样式会存在差异。CSS 重置的目的，就是清除浏览器默认自带样式，统一基础表现。

我们打开 css/style.css，在文件最顶部写入重置代码。

/* 全局统一重置 */*{margin:0;padding:0;/* 边框和内边距不会撑大元素总宽度，布局核心属性 */box-sizing:border-box;}/* 清除ul默认列表圆点 */ul{list-style:none;}/* a标签样式重置 */a{text-decoration:none;/* 文字颜色继承父元素 */color:inherit;}/* 图片通用设置 */img{max-width:100%;/* 消除图片底部默认空白缝隙 */display:block;}

代码解释：box-sizing: border-box是布局开发高频属性，推荐后续所有项目都加上。如果不开启这个属性，元素的 border 和 padding 会额外增加盒子总宽度，很容易造成布局错乱。

3. 全局公共样式定义

重置代码写完之后，继续往下写全站通用样式，统一字体、基础文字颜色、页面背景。

/* 页面基础全局样式 */body{font-family:"Microsoft Yahei",sans-serif;color:#333;/* 页面背景使用极浅的蓝色，视觉柔和不刺眼 */background-color:#f0f7ff;/* 行高，优化文字阅读体验 */line-height:1.6;}/* 内容容器，用来实现区块居中，统一宽度 */.container{width:1200px;margin:0 auto;}

4. 编写公共 header 和 footer 的 HTML

以 index.html 为例，编写 header 导航结构，导航使用 ul 列表实现，后续用 Flex 横向排列。

<header><!-- 容器，限制内容宽度居中 --><divclass="container"><divclass="header-inner"><!-- 网站LOGO文字区域 --><divclass="logo">HTML+CSS实战</div><nav><!-- 导航菜单列表 --><ulclass="nav-list"><li><ahref="index.html">首页</a></li><li><ahref="list.html">文章列表</a></li><li><ahref="about.html">关于本站</a></li></ul></nav></div></div></header>

footer 底部代码：

<footer><!-- 容器，保持和头部内容宽度一致 --><divclass="container"><p>©2026 HTML+CSS实战博客 版权所有</p></div></footer>

代码解释：导航使用 ul+li 的组合，是网页开发的语义化规范。相比直接写多个 a 标签，列表结构可读性更好，也方便屏幕阅读器识别导航菜单。

5. 公共头部底部 CSS 样式

继续在 style.css 中添加 header、footer 样式，导航用 Flex 布局实现横向排版。

/* 头部区域样式，淡蓝色主题 */header{background-color:#4086d3;color:#fff;}/* 头部内部盒子，弹性布局，左右分开 */.header-inner{display:flex;justify-content:space-between;align-items:center;height:60px;}/* 导航列表开启弹性布局，横向排列 */.nav-list{display:flex;/* 设置列表项之间的间距 */gap:30px;}/* 导航链接过渡效果 */.nav-list a{transition:color 0.3s;}/* 鼠标悬浮导航文字变色 */.nav-list a:hover{color:#cde3ff;}/* 底部版权区域，和头部配色保持统一 */footer{background-color:#4086d3;color:#fff;text-align:center;padding:20px 0;margin-top:40px;}

6. 整体效果

将main标签中塞入一些内容以便撑开高度：

<main><!-- 撑开高度 --><divstyle="height:500px;"></div></main>

最终效果如下：

7. 本篇小结

本篇完成网站基础 HTML 骨架搭建，编写 CSS 重置样式、全局基础样式，并且完成公共头部和底部的 HTML 与 CSS 代码。
下一篇，我们正式开发首页，编写首页主体结构，使用 Grid 完成文章卡片布局，制作侧边栏模块。