简介这是一套以“我的家乡”为主题的HTMLCSS网页制作模板面向网页设计初学者与需要快速搭建展示型站点的开发者可用于个人故乡文化展示、课程作业或小型静态网站项目。资源包共73个文件包含6个HTML页面、7个CSS样式表、56张JPG图片及Dreamweaver模板文件压缩包约3.69MB结构上按首页、美景、文化、历史、特产、名人等模块划分HTML负责页面结构CSS控制布局与配色图片资源提供地域风貌素材代码格式规范、注释清晰便于二次修改。目前已有17623人学习下载适合作为HTML与CSS综合练习的参考实例帮助读者理解多页面站点的组织方式、样式复用与图文排版技巧也能为讲述地方故事类网页提供可直接套用的视觉框架。1. 从一份“我的家乡”网页模板说起为什么静态页面依然是前端入门的第一道硬菜每年到了课程设计选题那几周总有人来问有没有那种拿来就能改、改完就能交的网页模板尤其是“我的家乡”这类主题几乎成了网页制作课的保留题目。原因不复杂——它同时踩中了三个刚需结构完整、内容可控、视觉有发挥空间。但真正动手做过的人都知道翻车往往不在写代码而在拿到模板之后不知道从哪改起改完布局全乱图片路径一塌糊涂最后交上去的页面在别人电脑上直接白屏。这套 htmlcss 模板就是为这个场景准备的它把“我的家乡”主题需要的页面骨架、样式体系和资源目录都搭好了你要做的是理解它的结构然后替换成自己的内容。适合正在做网页制作课设的学生也适合想快速搭一个静态展示页的从业者。2. 需求拆解与技术选型为什么是纯 HTMLCSS而不是上框架2.1 先想清楚页面要承载什么信息“我的家乡”这个主题看起来简单但落到页面上信息层级其实不少。通常的做法是拆成四个板块家乡概览、风景名胜、特色美食、民俗文化。每个板块对应一个独立页面首页做导航入口和整体印象展示。这样拆的好处是每个页面职责单一改起来不会牵一发动全身。从技术角度看这类页面的核心需求是静态展示、无需后端交互、兼容主流浏览器、文件体积小、可以直接双击打开。这意味着不需要数据库、不需要接口请求、不需要构建工具。很多同学一上来就想用 Vue 或 React结果光配环境就耗掉两天最后页面还没写几行。对于“我的家乡”这种信息展示型页面纯 HTMLCSS 是更务实的选择。提示如果你的课程设计要求里明确写了“必须使用框架”那另当别论。但如果只是要求“制作一个静态网站”纯 HTMLCSS 完全够用而且更容易排查问题。2.2 目录结构决定后期改动的痛苦程度我见过太多人把所有文件堆在一个文件夹里图片、样式、页面混在一起。改到第三版的时候自己都找不到哪张图对应哪个页面。这套模板采用的目录划分方式是这样的my-hometown/ ├── index.html # 首页导航入口 ├── scenery.html # 风景名胜页 ├── food.html # 特色美食页 ├── culture.html # 民俗文化页 ├── css/ │ ├── reset.css # 浏览器默认样式重置 │ ├── common.css # 公共样式导航、页脚、按钮 │ └── page.css # 各页面专属样式 ├── images/ │ ├── banner/ # 首页轮播或大图 │ ├── scenery/ # 风景图片 │ ├── food/ # 美食图片 │ └── icons/ # 小图标 └── js/ └── main.js # 少量交互导航高亮、返回顶部这个结构的关键在于css 拆成三个文件reset 负责抹平浏览器差异common 放全站复用的样式page 放单个页面独有的样式。改某个页面的布局时只动 page.css不会影响到其他页面。images 按内容分类替换图片时直接往对应文件夹里丢路径规则统一。2.3 样式方案不用框架但要有“微型设计系统”纯手写 CSS 最容易出现的问题是每个页面的按钮长得不一样标题字号忽大忽小间距全靠感觉。解决办法是在 common.css 里定义一套最小化的设计变量。CSS 自定义属性CSS Variables兼容性已经足够好用起来也直观/* common.css 顶部定义全局变量 */ :root { --primary-color: #2e7d32; /* 主色家乡主题偏自然绿 */ --text-dark: #212121; /* 正文深色 */ --text-light: #757575; /* 辅助文字 */ --bg-light: #f5f5f5; /* 浅色背景 */ --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --radius: 6px; --max-width: 1200px; /* 内容区最大宽度 */ } /* 全站通用容器 */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); } /* 通用卡片样式 */ .card { background: #fff; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }这段代码的作用是把颜色、间距、圆角这些反复用到的值抽成变量。后面改主题色只需要改--primary-color一个地方全站按钮、链接、标题颜色跟着变。--max-width控制内容区宽度避免在大屏上文字拉得太长影响阅读。.card是风景、美食、文化三个页面共用的卡片容器保证视觉统一。参数说明--spacing-sm/md/lg分别对应 8/16/32px这是最常用的三档间距。如果你觉得页面太挤把--spacing-md改成 20px全站中等间距一起变。--radius控制圆角大小改成 0 就是直角风格。3. 页面布局与核心模块实现导航、卡片网格、页脚怎么搭3.1 导航栏固定顶部 当前页高亮导航是每个页面都有的公共组件也是最容易出问题的地方。常见翻车点有两个一是滚动页面时导航跟着滚走用户想切页面得先滚回顶部二是当前在哪个页面看不出来四个页面导航长得一模一样。解决办法是用position: fixed把导航固定在顶部同时给当前页的导航项加一个.active类。HTML 结构如下!-- 每个页面都引入这段导航只改 active 类的位置 -- header classnavbar div classcontainer nav-inner a hrefindex.html classlogo我的家乡/a nav classnav-links a hrefindex.html classactive首页/a a hrefscenery.html风景名胜/a a hreffood.html特色美食/a a hrefculture.html民俗文化/a /nav /div /header对应的 CSS.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 1000; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav-links a { margin-left: var(--spacing-lg); color: var(--text-dark); text-decoration: none; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }这里的关键点是height: 64px和position: fixed配合导航始终在视口顶部。z-index: 1000保证导航不会被页面内容盖住。.active类通过底部边框颜色区分当前页比单纯改文字颜色更明显。因为导航固定了页面主体需要加padding-top: 64px把内容顶下来否则第一屏内容会被导航遮住。注意如果导航高度改了比如从 64px 改成 72px记得同步改页面主体的 padding-top否则内容会被遮住一截。这个坑我踩过不止一次。3.2 卡片网格用 Grid 还是 Flex风景、美食、文化三个页面都需要展示一组卡片每张卡片包含图片、标题和一段描述。布局方式有两种选择Flexbox 和 CSS Grid。我的建议是如果卡片数量固定且每行数量一致用 Grid 更省事如果卡片数量不固定、需要自动换行Flexbox 的flex-wrap更灵活。这套模板用的是 Grid因为“我的家乡”每个板块的卡片数量通常是 6 到 9 张每行 3 张排列整齐。代码示例/* 卡片网格容器 */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ gap: var(--spacing-lg); padding: var(--spacing-lg) 0; } /* 响应式屏幕小于 768px 时变两列小于 480px 变一列 */ media (max-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } } media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } }repeat(3, 1fr)的意思是三列每列宽度相等。gap控制卡片之间的间距。媒体查询做了两档降级平板两列手机一列。这样在手机上不会出现卡片被压扁的情况。卡片内部的图片处理也有讲究。如果图片尺寸不统一卡片高度会参差不齐视觉上很乱。解决办法是给图片容器固定高度图片用object-fit: cover裁剪.card img { width: 100%; height: 200px; object-fit: cover; /* 保持比例裁剪不拉伸变形 */ display: block; } .card-body { padding: var(--spacing-md); } .card-body h3 { font-size: 18px; margin-bottom: var(--spacing-sm); color: var(--text-dark); } .card-body p { font-size: 14px; color: var(--text-light); line-height: 1.6; }object-fit: cover是解决图片变形的关键属性。没有它宽高比不一致的图片会被强行拉伸人脸变扁、风景变窄。加上它之后图片按比例填满容器超出部分裁掉视觉上整齐很多。3.3 页脚别让它成为“被遗忘的角落”页脚是很多模板里最敷衍的部分但答辩时老师往往会拉到页面底部看一眼。一个合格的页脚至少包含版权信息、联系方式可以是虚构的、快速导航链接。结构不用复杂但样式要和整体一致。footer classfooter div classcontainer footer-inner div classfooter-col h4关于家乡/h4 p记录家乡的风物与记忆用网页呈现一方水土。/p /div div classfooter-col h4快速导航/h4 a hrefindex.html首页/a a hrefscenery.html风景名胜/a a hreffood.html特色美食/a a hrefculture.html民俗文化/a /div div classfooter-col h4联系/h4 p邮箱exampledemo.com/p p地址某省某市某区/p /div /div div classfooter-bottom p© 2025 我的家乡 网页制作课程设计/p /div /footer.footer { background: #263238; color: #cfd8dc; padding: var(--spacing-lg) 0 0; margin-top: var(--spacing-lg); } .footer-inner { display: flex; justify-content: space-between; gap: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .footer-col h4 { color: #fff; margin-bottom: var(--spacing-sm); font-size: 16px; } .footer-col a { display: block; color: #b0bec5; text-decoration: none; font-size: 14px; margin-bottom: 6px; } .footer-col a:hover { color: #fff; } .footer-bottom { border-top: 1px solid #37474f; text-align: center; padding: var(--spacing-md) 0; font-size: 13px; color: #90a4ae; }页脚用深色背景和浅色文字形成对比和顶部白色导航呼应。.footer-inner用 Flexbox 做三列布局.footer-bottom单独一行放版权。这样即使内容不多页脚看起来也是完整的。4. 避坑与常见问题排查模板改到一半崩了怎么办4.1 图片路径问题本地能看换台电脑就白屏现象在自己电脑上打开页面图片正常显示。把文件夹拷给同学或者交到教师机图片全部裂开。原因路径用了绝对路径比如C:\Users\某某\Desktop\my-hometown\images\banner.jpg或者用了中文路径、空格路径。换一台电脑盘符和用户名不一样路径直接失效。解决所有资源引用一律用相对路径。图片放在images/下HTML 里写images/banner/banner.jpg。文件夹和文件名不要用中文和空格用英文小写加连字符。检查方法很简单把整个项目文件夹复制到 U 盘换一台电脑打开如果图片正常说明路径没问题。4.2 样式不生效改了 CSS 但页面没变化现象在page.css里改了某个卡片的颜色刷新页面后没反应。原因三种可能。一是 CSS 文件没有正确引入检查link标签的href路径二是选择器权重不够被common.css里的样式覆盖了三是浏览器缓存了旧的 CSS 文件。解决先看开发者工具F12的 Console 有没有 404 报错确认 CSS 文件加载成功。再看 Elements 面板里目标元素的样式被划掉的就是被覆盖的。如果是权重问题给选择器加父级限定比如.card-grid .card-body h3比单独的.card-body h3权重高。缓存问题用CtrlF5强制刷新。4.3 导航遮挡内容第一屏文字被切掉一半现象页面打开后最上面的标题或图片被导航栏盖住了一部分。原因导航用了position: fixed脱离了文档流页面主体从视口顶部开始渲染没有给导航留出空间。解决给body或页面主体容器加padding-top值等于导航高度。如果导航高度是 64px就加padding-top: 64px。如果导航高度在响应式下有变化padding-top 也要跟着用媒体查询调整。4.4 移动端横向滚动条页面能左右拖动现象在手机上打开页面可以左右滑动右侧有一片空白。原因某个元素宽度超过了视口宽度。常见元凶是固定宽度的容器、没有限制宽度的图片、或者负 margin 用过头了。解决先给body加overflow-x: hidden临时屏蔽但这只是遮住问题。根本办法是找到超宽元素。通常的做法是给所有图片加max-width: 100%给容器加width: 100%而不是固定像素宽度。用开发者工具逐个检查元素看哪个的宽度超出了视口。4.5 字体和颜色在不同浏览器不一致现象在自己电脑上排版正常换浏览器后字号、行高、颜色有细微差别。原因不同浏览器对默认样式的处理不同比如h1的默认margin和font-size在 Chrome 和 Firefox 里就不一样。解决reset.css的作用就是抹平这些差异。确保每个页面都先引入reset.css再引入common.css和page.css。引入顺序不能乱后面的文件会覆盖前面的同名样式。另外颜色尽量用十六进制或 CSS 变量避免用颜色名称如red、green因为不同浏览器对颜色名称的解析可能有细微差别。5. 验收与答辩怎么证明这套页面是你自己做的5.1 验收清单交之前逐项过一遍答辩前通常会有自查环节与其被老师问住不如提前把下面这张表过一遍。每一项都对应一个具体的检查动作不是泛泛的“检查页面是否正常”。检查项检查方法合格标准页面完整性逐个打开四个 HTML 文件无 404无空白页导航链接点击每个导航项跳转正确当前页高亮图片显示断网后刷新页面所有图片正常加载本地图片不依赖网络响应式布局浏览器窗口从宽拖到窄无横向滚动条卡片自动换行控制台报错F12 打开 Console无红色报错信息路径兼容复制文件夹到另一台电脑打开图片和样式正常代码规范检查 HTML 缩进和 CSS 命名缩进一致类名有意义这张表里的“路径兼容”是最容易被忽略但最致命的一项。很多同学在自己电脑上一切正常交到教师机直接白屏就是因为路径问题。提前用 U 盘拷到另一台电脑试一次能省掉答辩当天的很多麻烦。5.2 答辩时怎么讲从“做了什么”到“为什么这么做”答辩不是让你念代码而是让老师相信你理解了这套页面的设计逻辑。我一般会建议按这个顺序讲先讲需求拆解。为什么选“我的家乡”这个主题页面分几个板块每个板块承载什么信息。这部分不用长一两分钟说清楚就行。再讲技术选型。为什么用纯 HTMLCSS 而不是框架目录结构为什么这样划分CSS 变量解决了什么问题。这里可以打开common.css给老师看变量定义说明改一个颜色全站生效的设计意图。然后讲一个具体的实现细节。比如卡片网格的响应式怎么做object-fit: cover解决了图片变形的什么问题导航固定的同时怎么避免遮挡内容。挑一个你真正动手改过的点讲清楚“遇到了什么问题、怎么解决的”。最后讲排查过程。可以主动提一个你踩过的坑比如图片路径问题或者样式覆盖问题说清楚现象、原因和解决办法。老师往往对“你怎么发现问题并解决”比“你写了什么代码”更感兴趣。5.3 一个容易被问到的点为什么不用 JavaScript 做交互“我的家乡”这类静态展示页面JavaScript 的用武之地其实有限。模板里只保留了两个小功能导航当前页高亮其实用 CSS 的.active类就够了不需要 JS和返回顶部按钮。如果老师问“为什么不用 JS 做更多交互”可以这样回答这个页面的核心目标是信息展示不是交互应用。引入更多 JS 会增加调试成本而且对展示型页面来说CSS 能解决的问题不必要用 JS。如果确实需要加交互比如图片轮播再按需引入而不是一开始就堆上去。提示如果课程设计要求里明确写了“必须包含 JavaScript 交互”那就在模板基础上加一个简单的图片轮播或表单验证不用推翻现有结构。5.4 从那以后我每次交作业前都强制走一遍的流程带过几轮课设之后我养成了一个习惯不管页面做得多简单交之前一定做三件事。第一把整个文件夹复制到 U 盘换一台电脑打开确认图片和样式正常。第二用浏览器的响应式模式从 320px 宽拖到 1920px 宽看有没有横向滚动条或者布局错乱。第三打开 Console确认没有红色报错。这三件事花不了十分钟但能挡掉答辩现场八成的翻车。希望这套模板和这份验收思路能帮你把“我的家乡”这个题目稳稳当当地交出去。本文还有配套的精品资源点击获取 
长河君 · 2026/10/18 21:21:01 · 阅读 1.2k HTML+CSS静态网页模板：我的家乡课程设计实战指南
简介这是一套以“我的家乡”为主题的HTMLCSS网页制作模板面向网页设计初学者与需要快速搭建展示型站点的开发者可用于个人故乡文化展示、课程作业或小型静态网站项目。资源包共73个文件包含6个HTML页面、7个CSS样式表、56张JPG图片及Dreamweaver模板文件压缩包约3.69MB结构上按首页、美景、文化、历史、特产、名人等模块划分HTML负责页面结构CSS控制布局与配色图片资源提供地域风貌素材代码格式规范、注释清晰便于二次修改。目前已有17623人学习下载适合作为HTML与CSS综合练习的参考实例帮助读者理解多页面站点的组织方式、样式复用与图文排版技巧也能为讲述地方故事类网页提供可直接套用的视觉框架。1. 从一份“我的家乡”网页模板说起为什么静态页面依然是前端入门的第一道硬菜每年到了课程设计选题那几周总有人来问有没有那种拿来就能改、改完就能交的网页模板尤其是“我的家乡”这类主题几乎成了网页制作课的保留题目。原因不复杂——它同时踩中了三个刚需结构完整、内容可控、视觉有发挥空间。但真正动手做过的人都知道翻车往往不在写代码而在拿到模板之后不知道从哪改起改完布局全乱图片路径一塌糊涂最后交上去的页面在别人电脑上直接白屏。这套 htmlcss 模板就是为这个场景准备的它把“我的家乡”主题需要的页面骨架、样式体系和资源目录都搭好了你要做的是理解它的结构然后替换成自己的内容。适合正在做网页制作课设的学生也适合想快速搭一个静态展示页的从业者。2. 需求拆解与技术选型为什么是纯 HTMLCSS而不是上框架2.1 先想清楚页面要承载什么信息“我的家乡”这个主题看起来简单但落到页面上信息层级其实不少。通常的做法是拆成四个板块家乡概览、风景名胜、特色美食、民俗文化。每个板块对应一个独立页面首页做导航入口和整体印象展示。这样拆的好处是每个页面职责单一改起来不会牵一发动全身。从技术角度看这类页面的核心需求是静态展示、无需后端交互、兼容主流浏览器、文件体积小、可以直接双击打开。这意味着不需要数据库、不需要接口请求、不需要构建工具。很多同学一上来就想用 Vue 或 React结果光配环境就耗掉两天最后页面还没写几行。对于“我的家乡”这种信息展示型页面纯 HTMLCSS 是更务实的选择。提示如果你的课程设计要求里明确写了“必须使用框架”那另当别论。但如果只是要求“制作一个静态网站”纯 HTMLCSS 完全够用而且更容易排查问题。2.2 目录结构决定后期改动的痛苦程度我见过太多人把所有文件堆在一个文件夹里图片、样式、页面混在一起。改到第三版的时候自己都找不到哪张图对应哪个页面。这套模板采用的目录划分方式是这样的my-hometown/ ├── index.html # 首页导航入口 ├── scenery.html # 风景名胜页 ├── food.html # 特色美食页 ├── culture.html # 民俗文化页 ├── css/ │ ├── reset.css # 浏览器默认样式重置 │ ├── common.css # 公共样式导航、页脚、按钮 │ └── page.css # 各页面专属样式 ├── images/ │ ├── banner/ # 首页轮播或大图 │ ├── scenery/ # 风景图片 │ ├── food/ # 美食图片 │ └── icons/ # 小图标 └── js/ └── main.js # 少量交互导航高亮、返回顶部这个结构的关键在于css 拆成三个文件reset 负责抹平浏览器差异common 放全站复用的样式page 放单个页面独有的样式。改某个页面的布局时只动 page.css不会影响到其他页面。images 按内容分类替换图片时直接往对应文件夹里丢路径规则统一。2.3 样式方案不用框架但要有“微型设计系统”纯手写 CSS 最容易出现的问题是每个页面的按钮长得不一样标题字号忽大忽小间距全靠感觉。解决办法是在 common.css 里定义一套最小化的设计变量。CSS 自定义属性CSS Variables兼容性已经足够好用起来也直观/* common.css 顶部定义全局变量 */ :root { --primary-color: #2e7d32; /* 主色家乡主题偏自然绿 */ --text-dark: #212121; /* 正文深色 */ --text-light: #757575; /* 辅助文字 */ --bg-light: #f5f5f5; /* 浅色背景 */ --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --radius: 6px; --max-width: 1200px; /* 内容区最大宽度 */ } /* 全站通用容器 */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); } /* 通用卡片样式 */ .card { background: #fff; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }这段代码的作用是把颜色、间距、圆角这些反复用到的值抽成变量。后面改主题色只需要改--primary-color一个地方全站按钮、链接、标题颜色跟着变。--max-width控制内容区宽度避免在大屏上文字拉得太长影响阅读。.card是风景、美食、文化三个页面共用的卡片容器保证视觉统一。参数说明--spacing-sm/md/lg分别对应 8/16/32px这是最常用的三档间距。如果你觉得页面太挤把--spacing-md改成 20px全站中等间距一起变。--radius控制圆角大小改成 0 就是直角风格。3. 页面布局与核心模块实现导航、卡片网格、页脚怎么搭3.1 导航栏固定顶部 当前页高亮导航是每个页面都有的公共组件也是最容易出问题的地方。常见翻车点有两个一是滚动页面时导航跟着滚走用户想切页面得先滚回顶部二是当前在哪个页面看不出来四个页面导航长得一模一样。解决办法是用position: fixed把导航固定在顶部同时给当前页的导航项加一个.active类。HTML 结构如下!-- 每个页面都引入这段导航只改 active 类的位置 -- header classnavbar div classcontainer nav-inner a hrefindex.html classlogo我的家乡/a nav classnav-links a hrefindex.html classactive首页/a a hrefscenery.html风景名胜/a a hreffood.html特色美食/a a hrefculture.html民俗文化/a /nav /div /header对应的 CSS.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 1000; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav-links a { margin-left: var(--spacing-lg); color: var(--text-dark); text-decoration: none; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }这里的关键点是height: 64px和position: fixed配合导航始终在视口顶部。z-index: 1000保证导航不会被页面内容盖住。.active类通过底部边框颜色区分当前页比单纯改文字颜色更明显。因为导航固定了页面主体需要加padding-top: 64px把内容顶下来否则第一屏内容会被导航遮住。注意如果导航高度改了比如从 64px 改成 72px记得同步改页面主体的 padding-top否则内容会被遮住一截。这个坑我踩过不止一次。3.2 卡片网格用 Grid 还是 Flex风景、美食、文化三个页面都需要展示一组卡片每张卡片包含图片、标题和一段描述。布局方式有两种选择Flexbox 和 CSS Grid。我的建议是如果卡片数量固定且每行数量一致用 Grid 更省事如果卡片数量不固定、需要自动换行Flexbox 的flex-wrap更灵活。这套模板用的是 Grid因为“我的家乡”每个板块的卡片数量通常是 6 到 9 张每行 3 张排列整齐。代码示例/* 卡片网格容器 */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ gap: var(--spacing-lg); padding: var(--spacing-lg) 0; } /* 响应式屏幕小于 768px 时变两列小于 480px 变一列 */ media (max-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } } media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } }repeat(3, 1fr)的意思是三列每列宽度相等。gap控制卡片之间的间距。媒体查询做了两档降级平板两列手机一列。这样在手机上不会出现卡片被压扁的情况。卡片内部的图片处理也有讲究。如果图片尺寸不统一卡片高度会参差不齐视觉上很乱。解决办法是给图片容器固定高度图片用object-fit: cover裁剪.card img { width: 100%; height: 200px; object-fit: cover; /* 保持比例裁剪不拉伸变形 */ display: block; } .card-body { padding: var(--spacing-md); } .card-body h3 { font-size: 18px; margin-bottom: var(--spacing-sm); color: var(--text-dark); } .card-body p { font-size: 14px; color: var(--text-light); line-height: 1.6; }object-fit: cover是解决图片变形的关键属性。没有它宽高比不一致的图片会被强行拉伸人脸变扁、风景变窄。加上它之后图片按比例填满容器超出部分裁掉视觉上整齐很多。3.3 页脚别让它成为“被遗忘的角落”页脚是很多模板里最敷衍的部分但答辩时老师往往会拉到页面底部看一眼。一个合格的页脚至少包含版权信息、联系方式可以是虚构的、快速导航链接。结构不用复杂但样式要和整体一致。footer classfooter div classcontainer footer-inner div classfooter-col h4关于家乡/h4 p记录家乡的风物与记忆用网页呈现一方水土。/p /div div classfooter-col h4快速导航/h4 a hrefindex.html首页/a a hrefscenery.html风景名胜/a a hreffood.html特色美食/a a hrefculture.html民俗文化/a /div div classfooter-col h4联系/h4 p邮箱exampledemo.com/p p地址某省某市某区/p /div /div div classfooter-bottom p© 2025 我的家乡 网页制作课程设计/p /div /footer.footer { background: #263238; color: #cfd8dc; padding: var(--spacing-lg) 0 0; margin-top: var(--spacing-lg); } .footer-inner { display: flex; justify-content: space-between; gap: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .footer-col h4 { color: #fff; margin-bottom: var(--spacing-sm); font-size: 16px; } .footer-col a { display: block; color: #b0bec5; text-decoration: none; font-size: 14px; margin-bottom: 6px; } .footer-col a:hover { color: #fff; } .footer-bottom { border-top: 1px solid #37474f; text-align: center; padding: var(--spacing-md) 0; font-size: 13px; color: #90a4ae; }页脚用深色背景和浅色文字形成对比和顶部白色导航呼应。.footer-inner用 Flexbox 做三列布局.footer-bottom单独一行放版权。这样即使内容不多页脚看起来也是完整的。4. 避坑与常见问题排查模板改到一半崩了怎么办4.1 图片路径问题本地能看换台电脑就白屏现象在自己电脑上打开页面图片正常显示。把文件夹拷给同学或者交到教师机图片全部裂开。原因路径用了绝对路径比如C:\Users\某某\Desktop\my-hometown\images\banner.jpg或者用了中文路径、空格路径。换一台电脑盘符和用户名不一样路径直接失效。解决所有资源引用一律用相对路径。图片放在images/下HTML 里写images/banner/banner.jpg。文件夹和文件名不要用中文和空格用英文小写加连字符。检查方法很简单把整个项目文件夹复制到 U 盘换一台电脑打开如果图片正常说明路径没问题。4.2 样式不生效改了 CSS 但页面没变化现象在page.css里改了某个卡片的颜色刷新页面后没反应。原因三种可能。一是 CSS 文件没有正确引入检查link标签的href路径二是选择器权重不够被common.css里的样式覆盖了三是浏览器缓存了旧的 CSS 文件。解决先看开发者工具F12的 Console 有没有 404 报错确认 CSS 文件加载成功。再看 Elements 面板里目标元素的样式被划掉的就是被覆盖的。如果是权重问题给选择器加父级限定比如.card-grid .card-body h3比单独的.card-body h3权重高。缓存问题用CtrlF5强制刷新。4.3 导航遮挡内容第一屏文字被切掉一半现象页面打开后最上面的标题或图片被导航栏盖住了一部分。原因导航用了position: fixed脱离了文档流页面主体从视口顶部开始渲染没有给导航留出空间。解决给body或页面主体容器加padding-top值等于导航高度。如果导航高度是 64px就加padding-top: 64px。如果导航高度在响应式下有变化padding-top 也要跟着用媒体查询调整。4.4 移动端横向滚动条页面能左右拖动现象在手机上打开页面可以左右滑动右侧有一片空白。原因某个元素宽度超过了视口宽度。常见元凶是固定宽度的容器、没有限制宽度的图片、或者负 margin 用过头了。解决先给body加overflow-x: hidden临时屏蔽但这只是遮住问题。根本办法是找到超宽元素。通常的做法是给所有图片加max-width: 100%给容器加width: 100%而不是固定像素宽度。用开发者工具逐个检查元素看哪个的宽度超出了视口。4.5 字体和颜色在不同浏览器不一致现象在自己电脑上排版正常换浏览器后字号、行高、颜色有细微差别。原因不同浏览器对默认样式的处理不同比如h1的默认margin和font-size在 Chrome 和 Firefox 里就不一样。解决reset.css的作用就是抹平这些差异。确保每个页面都先引入reset.css再引入common.css和page.css。引入顺序不能乱后面的文件会覆盖前面的同名样式。另外颜色尽量用十六进制或 CSS 变量避免用颜色名称如red、green因为不同浏览器对颜色名称的解析可能有细微差别。5. 验收与答辩怎么证明这套页面是你自己做的5.1 验收清单交之前逐项过一遍答辩前通常会有自查环节与其被老师问住不如提前把下面这张表过一遍。每一项都对应一个具体的检查动作不是泛泛的“检查页面是否正常”。检查项检查方法合格标准页面完整性逐个打开四个 HTML 文件无 404无空白页导航链接点击每个导航项跳转正确当前页高亮图片显示断网后刷新页面所有图片正常加载本地图片不依赖网络响应式布局浏览器窗口从宽拖到窄无横向滚动条卡片自动换行控制台报错F12 打开 Console无红色报错信息路径兼容复制文件夹到另一台电脑打开图片和样式正常代码规范检查 HTML 缩进和 CSS 命名缩进一致类名有意义这张表里的“路径兼容”是最容易被忽略但最致命的一项。很多同学在自己电脑上一切正常交到教师机直接白屏就是因为路径问题。提前用 U 盘拷到另一台电脑试一次能省掉答辩当天的很多麻烦。5.2 答辩时怎么讲从“做了什么”到“为什么这么做”答辩不是让你念代码而是让老师相信你理解了这套页面的设计逻辑。我一般会建议按这个顺序讲先讲需求拆解。为什么选“我的家乡”这个主题页面分几个板块每个板块承载什么信息。这部分不用长一两分钟说清楚就行。再讲技术选型。为什么用纯 HTMLCSS 而不是框架目录结构为什么这样划分CSS 变量解决了什么问题。这里可以打开common.css给老师看变量定义说明改一个颜色全站生效的设计意图。然后讲一个具体的实现细节。比如卡片网格的响应式怎么做object-fit: cover解决了图片变形的什么问题导航固定的同时怎么避免遮挡内容。挑一个你真正动手改过的点讲清楚“遇到了什么问题、怎么解决的”。最后讲排查过程。可以主动提一个你踩过的坑比如图片路径问题或者样式覆盖问题说清楚现象、原因和解决办法。老师往往对“你怎么发现问题并解决”比“你写了什么代码”更感兴趣。5.3 一个容易被问到的点为什么不用 JavaScript 做交互“我的家乡”这类静态展示页面JavaScript 的用武之地其实有限。模板里只保留了两个小功能导航当前页高亮其实用 CSS 的.active类就够了不需要 JS和返回顶部按钮。如果老师问“为什么不用 JS 做更多交互”可以这样回答这个页面的核心目标是信息展示不是交互应用。引入更多 JS 会增加调试成本而且对展示型页面来说CSS 能解决的问题不必要用 JS。如果确实需要加交互比如图片轮播再按需引入而不是一开始就堆上去。提示如果课程设计要求里明确写了“必须包含 JavaScript 交互”那就在模板基础上加一个简单的图片轮播或表单验证不用推翻现有结构。5.4 从那以后我每次交作业前都强制走一遍的流程带过几轮课设之后我养成了一个习惯不管页面做得多简单交之前一定做三件事。第一把整个文件夹复制到 U 盘换一台电脑打开确认图片和样式正常。第二用浏览器的响应式模式从 320px 宽拖到 1920px 宽看有没有横向滚动条或者布局错乱。第三打开 Console确认没有红色报错。这三件事花不了十分钟但能挡掉答辩现场八成的翻车。希望这套模板和这份验收思路能帮你把“我的家乡”这个题目稳稳当当地交出去。本文还有配套的精品资源点击获取