简介这份网页设计资源面向刚接触前端、需要完成课程作业或入门练习的学习者围绕“三个页面”这一典型场景讲解如何用HTML搭建文字、图片与超链接内容并借助CSS完成基本美化解决页面结构组织与页面间跳转的入门问题。压缩包共8个文件约176KB以3个html页面文件为主体配合4个webp与1个jpg图片素材可直接打开对照结构与样式效果。内容涉及标题、段落、强调文本、img图片引用、a标签超链接及锚点跳转等基础知识点并演示用ID选择器设置背景色、字号与链接颜色。已有4972人学习下载适合作为课堂练习或自学参考帮助读者快速理解页面分区、素材引用与跳转逻辑并在此基础上动手改造出功能完整、视觉协调的多页面小站。1. 从三个静态页开始这套网页设计源码到底能跑出什么效果很多新手学前端卡在“看得懂标签写不出页面”这一步。这套网页设计源码就是冲着这个痛点来的它用三个互相能跳转的静态页面把文字排版、图片展示、超链接导航这三件最基础的事串成了一条完整链路。首页放标题和导航第二页铺图文混排第三页做跳转回环点来点去不会断。适合刚接触 web 开发、想找一个能直接打开浏览器就看到效果的小项目练手的人也适合拿它当模板去改自己的个人介绍页或课程作业。整个项目不依赖构建工具双击 HTML 文件就能跑改完刷新即见省掉了配环境的玄学环节。下面把它拆开讲清楚。2. 项目结构与技术选型三个 HTML 文件怎么组织才不乱2.1 目录布局与文件职责拿到源码先别急着改把目录看一遍。这类三页静态站通常长这样web-three-pages/ ├── index.html # 首页放导航和入口 ├── gallery.html # 图文页展示图片和说明文字 ├── about.html # 关于页放超链接跳转示例 ├── css/ │ └── style.css # 全站公共样式 ├── js/ │ └── main.js # 可选处理简单交互 └── images/ ├── banner.jpg └── photo-01.jpgindex.html是入口浏览器默认加载它。gallery.html和about.html是另外两个页面通过a标签互相跳转。css/style.css抽走公共样式避免每个页面重复写。images/放图片资源。这个结构的好处是职责清晰改样式只动 CSS换图片只动 images加页面就复制一份 HTML 再改内容。提示如果源码里没有js/目录说明这个项目纯静态不需要 JavaScript 也能跑通全部跳转这对新手反而更友好。2.2 为什么选纯 HTML CSS 而不是上框架这个项目的定位是“能跳转的三个页面”不是“能上线的单页应用”。用原生 HTML CSS 有几个实际好处第一不需要 Node.js、不需要 npm install拿到就能开第二浏览器直接解析没有编译步骤改一行刷新就见效第三代码量小三个页面加起来通常不超过 300 行读得完。常见做法是新手阶段先用原生写一遍理解a href怎么跳、img src怎么加载、link怎么引样式再去碰框架。如果一上来就 React 或 Vue反而容易把“页面怎么跳”这件事交给路由库自己没搞明白。2.3 页面之间的跳转关系三个页面的跳转逻辑是这套源码的核心。典型设计是首页有导航栏点“图库”去gallery.html点“关于”去about.html图库页和关于页的导航栏里都有“返回首页”链接指回index.html。这样形成一个闭环用户不会走进死胡同。实现方式就是普通的a标签!-- index.html 里的导航 -- nav a hrefindex.html首页/a a hrefgallery.html图库/a a hrefabout.html关于/a /navhref写相对路径三个文件在同一目录下所以直接写文件名即可。如果放到子目录里就要写成pages/gallery.html这种形式。跳转关系看着简单但它是整个项目“能点通”的基础改的时候优先确认这三个链接没写错。3. 核心代码拆解文字、图片、超链接三块怎么落地3.1 文字排版标题层级与段落控制文字部分主要靠h1到h3和p标签。首页通常用h1放站点名h2放板块标题正文用p。关键点是别跳级h1下面直接跟h3会让结构乱搜索引擎和屏幕阅读器都不喜欢。一个典型的首页文字块!-- index.html 主体内容 -- main h1我的第一个网页/h1 p这是一个用 HTML 和 CSS 搭建的静态页面示例包含文字、图片和超链接。/p h2页面导航/h2 p点击下方链接可以跳转到图库页或关于页。/p /mainmain表示页面主体内容一个页面只用一个。h1全站建议只出现一次放在首页最合适。p段落之间浏览器会自动加间距不用手动写br。如果文字要居中或调行高交给 CSS 的text-align和line-height别在 HTML 里塞样式。3.2 图片展示src、alt 与尺寸控制图片用img标签两个必填属性是src和alt。src指向图片路径alt是图片加载失败时显示的文字也是无障碍访问的关键。图库页通常放多张图每张配一句说明!-- gallery.html 图片区域 -- figure img srcimages/photo-01.jpg alt示例图片一 width400 figcaption图一这是图片下方的说明文字/figcaption /figurefigure和figcaption是语义化标签把图片和说明绑在一起。width400控制显示宽度高度会自动等比缩放。常见做法是图片实际尺寸别太大否则页面加载慢如果原图很大先用工具压到 800px 宽以内再放进images/。alt别偷懒写“图片”两个字写清楚内容比如“蓝色背景的产品展示图”。3.3 超链接站内跳转与锚点定位超链接是这套源码的骨架。除了页面之间的跳转还可以做页内锚点。比如关于页内容长顶部放一个“回到顶部”!-- about.html 锚点示例 -- a href#top回到顶部/a ... h2 idtop关于本页/h2href#top里的#表示页内跳转top是目标元素的id。点击后页面会滚到idtop的位置。站内跳转用相对路径站外跳转写完整地址并以https://开头。如果链接要新窗口打开加target_blank但记得同时加relnoopener这是安全习惯。a hrefhttps://example.com target_blank relnoopener外部链接/atarget_blank让链接在新标签页打开relnoopener防止新页面通过window.opener操作原页面。这个细节很多新手会漏加上不费事但能避免潜在风险。3.4 公共样式一个 CSS 管三个页面三个页面共用css/style.css通过link引入!-- 每个 HTML 的 head 里都要有这一行 -- link relstylesheet hrefcss/style.css样式文件里通常先做基础重置再写导航和内容区/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; line-height: 1.6; padding: 20px; } nav a { margin-right: 16px; text-decoration: none; color: #0366d6; } nav a:hover { text-decoration: underline; }*选择器重置默认边距box-sizing: border-box让宽度包含内边距算尺寸不容易翻车。font-family优先用系统自带中文字体不依赖网络字体。nav a控制导航链接间距和颜色hover加下划线做反馈。三个页面共用这一份样式改一处全站生效这是抽离 CSS 的最大价值。4. 本地运行与验证双击就能跑但有几个细节要确认4.1 运行步骤这套项目不需要服务器直接双击index.html用浏览器打开即可。完整流程把源码文件夹解压到任意目录路径别带中文和空格比如放D:\projects\web-three-pages。双击index.html浏览器地址栏会显示file:///D:/projects/web-three-pages/index.html。点击导航里的“图库”和“关于”确认能跳到对应页面。在gallery.html和about.html里点“返回首页”确认能回到index.html。检查图片是否正常显示如果显示裂图看images/里的文件名和src是否一致。如果想让手机也能访问可以在本机起一个简单服务# 在项目根目录执行Python 3 自带 python -m http.server 8000然后浏览器访问http://localhost:8000。这样做的另一个好处是路径行为更接近真实部署环境能提前发现大小写敏感等问题。4.2 验证跳转是否完整跳转验证不能只点一遍。要确认三件事第一每个页面的导航栏链接都指向正确文件第二没有死链接也就是点了没反应的a第三返回路径存在。可以打开浏览器开发者工具的 Console 面板点一遍所有链接看有没有 404 报错。常见问题是href写成了gallery而不是gallery.html或者文件名大小写不一致在 Windows 上能跑传到 Linux 服务器就 404。4.3 图片路径的常见坑图片不显示九成是路径问题。srcimages/photo-01.jpg表示从当前 HTML 文件所在目录出发找images文件夹里的photo-01.jpg。如果 HTML 在子目录里路径就要调整。另外注意扩展名.jpg和.jpeg是两回事.JPG大写在某些系统上也不认。建议统一用小写扩展名文件名用短横线连接别用空格和中文。5. 避坑与排查新手最容易翻车的五个点5.1 页面跳转后样式丢失现象从首页跳到图库页页面变成白底黑字导航也没了样式。原因gallery.html的head里漏了link relstylesheet hrefcss/style.css或者路径写成了style.css但文件在css/目录下。解决检查每个 HTML 文件的head确保三页都引入了同一份 CSS路径用相对路径且大小写一致。5.2 图片显示裂图现象图片位置出现一个破图标alt文字显示出来。原因src路径错误、文件名拼错、图片没放进images/目录或者扩展名不匹配。解决在浏览器里右键裂图选“在新标签页打开”看地址栏实际请求的路径是什么和文件系统里的真实路径对比逐段排查。5.3 点击链接没反应现象鼠标放上去有手型但点了页面不动。原因href写成了空值href或href#或者写成了hrefjavascript:;。解决把href改成真实路径站内跳转写文件名站外写完整地址。如果只是占位至少写href#并加注释说明待补。5.4 中文乱码现象页面上的中文变成方块或问号。原因HTML 文件保存时用了 GBK 编码但head里声明的是 UTF-8或者反过来。解决在head第一行加meta charsetUTF-8然后用编辑器把文件另存为 UTF-8 编码。VS Code 右下角可以切换编码改完保存刷新。5.5 导航栏在手机上看挤成一团现象电脑上正常手机上导航链接换行错位。原因没有加 viewport 声明手机浏览器按桌面宽度渲染再缩小。解决在head里加meta nameviewport contentwidthdevice-width, initial-scale1.0。这行不加后面做响应式都是白搭。6. 二次开发把三页模板改成你自己的站拿到这套源码最值的用法不是原样跑一遍而是改成自己的内容。改造顺序建议从内容到样式再到结构别一上来就动布局。第一步换文字。打开index.html把h1和p里的内容替换成你自己的介绍。三个页面的文字都换一遍保持语气一致。这一步不碰代码结构风险最低。第二步换图片。把自己的图片按photo-01.jpg、photo-02.jpg命名覆盖images/里的原图。如果图片数量不一样就在gallery.html里增删figure块。每加一张图复制一个完整的figure结构改src和figcaption即可。第三步调样式。改css/style.css里的颜色和字体。比如把nav a的color改成你的主题色把body的font-family换成你喜欢的字体。改完刷新看效果不满意就撤销CSS 改起来没有副作用。第四步加页面。如果要加第四个页面复制about.html重命名为contact.html改内容然后在三个页面的导航栏里都加一行a hrefcontact.html联系/a。注意每个页面的导航都要同步加否则跳转关系就断了。第五步做响应式。在 CSS 里加媒体查询小屏幕下让导航竖排/* 屏幕宽度小于 600px 时生效 */ media (max-width: 600px) { nav a { display: block; margin: 8px 0; } }display: block让链接各占一行margin控制上下间距。这样手机上导航就不会挤在一起。改造过程中有一个习惯我每次都强制走一遍改完任何一个页面把三个页面的跳转全部点一遍确认没有断链。因为加页面或改文件名时最容易漏掉某个页面的导航更新。从那以后我每次动导航结构都会在纸上画出三个页面的跳转箭头确认闭环没断才收工。希望帮到你。本文还有配套的精品资源点击获取