副队长HTML+CSS博客网站实战 (2)–搭建项目基础骨架

文章目录1. 公共头部、底部的结构思路2. CSS 重置样式编写3. 全局公共样式定义4. 编写公共 header 和 footer 的 HTML5. 公共头部底部 CSS 样式6. 整体效果7. 本篇小结1. 公共头部、底部的结构思路我们这个项目是多页面网站首页、列表页、文章详情页等页面顶部导航和底部版权区域几乎完全一样。如果每个页面都重复写一遍头部和底部代码后期修改文字或者样式时就需要改 5 次维护成本很高。虽然没有后端组件技术但是我们依然可以统一规范结构所有页面保持相同的 header 和 footer 结构实现 “准复用”。header网站 LOGO 导航菜单main页面主体内容每一页的主体部分不一样footer版权信息、简单站点说明页面基础结构模板后续所有 HTML 页面都基于这个模板开发!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8!-- 适配移动端视口保证手机正常显示 --metanameviewportcontentwidthdevice-width, initial-scale1.0title网站标题/title!-- 引入外部公共CSS样式文件 --linkrelstylesheethrefcss/style.css/headbodyheader!-- 导航与LOGO写在这里 --/headermain!-- 当前页面主体内容 --/mainfooter!-- 底部版权信息 --/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!-- 容器限制内容宽度居中 --divclasscontainerdivclassheader-inner!-- 网站LOGO文字区域 --divclasslogoHTMLCSS实战/divnav!-- 导航菜单列表 --ulclassnav-listliahrefindex.html首页/a/liliahreflist.html文章列表/a/liliahrefabout.html关于本站/a/li/ul/nav/div/div/headerfooter 底部代码footer!-- 容器保持和头部内容宽度一致 --divclasscontainerp©2026 HTMLCSS实战博客 版权所有/p/div/footer代码解释导航使用 ulli 的组合是网页开发的语义化规范。相比直接写多个 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!-- 撑开高度 --divstyleheight:500px;/div/main最终效果如下7. 本篇小结本篇完成网站基础 HTML 骨架搭建编写 CSS 重置样式、全局基础样式并且完成公共头部和底部的 HTML 与 CSS 代码。下一篇我们正式开发首页编写首页主体结构使用 Grid 完成文章卡片布局制作侧边栏模块。