简介这是一份面向Web前端课程设计、期末大作业及毕业设计场景的完整HTML网页源码采用紫色大屏视觉风格以图片旅行摄影个人博客为内容主题适合计算机相关专业学生参考页面布局、交互脚本与响应式样式设计。压缩包共74个文件大小约2.17MB其中包含7个HTML页面、7个JS脚本、3个CSS样式表以及大量jpg/png图片素材、ttf字体和PSD源文件覆盖首页、作品集、联系、404等主要模块基本达到直接运行预览的程度。目前已有286人学习下载。资源目录层次清晰素材与代码分离HTML、CSS、JS结构直观便于快速定位和修改。借助这份源码读者可以学习个人博客类网站的设计思路理解前端三大技术如何配合实现图文展示、页面跳转和视觉统一也可在现有基础上替换图片和文案快速完成自己的课程作品。1. 一个紫色大屏旅行摄影博客模板为什么能直接当毕业设计期末最后一周你翻开压缩包看到的是紫色主调的旅行摄影站点首页整屏渐变背景往下是图片墙另外还有收藏、作品集、联系等多个页面。这种模板就是典型的“Web网页设计制作”课程设计素材没有后台和框架纯 HTML CSS 原生 JS正好覆盖静态页面、布局、交互三层要求。别急着双击 index.html 就交差——老师会问你“页面跳转如何处理”“图片墙响应式怎么写”“筛选怎么实现的”这正好说明把一套模板读成自己的话比重新写一遍更省力。接下来按解压、页面结构、CSS布局、JS交互、答辩改造的顺序拆一遍新手能照着落地熟手也能看到模板里需要补强的地方。2. 从zip到可运行解压后先看清目录结构与页面跳转2.1 压缩包里的文件并不是乱放的zip 解压后里面出现较多的是index.html、collection.html、folio.html、contact.html、single.html、404.html以及css、js、images、fonts目录。很多人把这些文件当成零散素材其实它们组合起来就是一个完整的多页面静态站点每一页都有明确的职责。文件/目录类型在模板里承担的角色index.html页面首页紫色大屏主视觉展示旅行摄影大图与最新文章入口collection.html页面收藏页把分散的图片按拍摄地或时间重新组织folio.html页面作品集页以卡片墙形式展示整套摄影作品single.html页面单张图片详情页通常和作品集页里的卡片形成跳转contact.html页面联系页提供社交链接或留言表单样式404.html页面访问不存在链接时的兜底页面css/目录全站样式含变量、栅格、动画、响应式js/目录筛选、灯箱、菜单等交互脚本images/目录模板自带图片素材多为旅行风景与人文照片fonts/目录字体文件避免在线字体加载慢导致样式跳动注意这个结构里没有node_modules、package.json或.git说明它不需要构建工具属于“拿来就能开服务器”的静态项目。另外压缩包里通常还会有一个使用须知重要.txt里面写的是模板作者的使用说明、字体引用和目录备注。解压后先读它可以避免直接打开index.html后看到空路径却不知道从哪排查如果中文打开乱码用 VS Code 以 UTF-8 重新打开即可。2.2 用本地HTTP服务代替file协议预览直接双击index.html能看首页但file://协议下浏览器会限制模块脚本、fetch 或跨目录读取。模板里如果用了fetch去读 JSON或者用import加载 JS 模块双击打开大概率报跨域错误。常见做法是在项目根目录开一个本地静态服务。cd /path/to/紫色大屏图片旅行摄影个人博客模板5073 python -m http.server 8000其中-m http.server是 Python 3 内置模块不需要安装任何第三方包8000 是端口号可以根据本机情况改成 8080 或 5500。启动后访问http://localhost:8000/index.html所有相对路径如images/hero.jpg都会以站点根目录为基准解析和最终部署到服务器时的行为一致。如果你没有配置 Python也可以用下面的命令替代npx serve .php -S 127.0.0.1:8080npx serve .是前端常用的零配置静态服务器php -S 127.0.0.1:8080是 PHP 内置服务。和 IDE 的 Live Server 相比用命令行起服务更接近线上环境不会自动注入刷新脚本排错时看到的 Network 请求也更干净。2.3 页面跳转、active高亮和404兜底多页面模板的跳转本质上就是a标签。首页导航长这样nav classsite-nav a hrefindex.html classactive首页/a a hrefcollection.html收藏/a a hreffolio.html作品集/a a hrefcontact.html联系/a /navclassactive在静态页面里通常是手动写死的。要让当前页自动高亮常见写法是在页面底部用 JS 根据location.pathname匹配导航项再追加 active 类const current location.pathname.split(/).pop(); document.querySelectorAll(.site-nav a).forEach(link { if (link.getAttribute(href) current) { link.classList.add(active); } });这段逻辑放在每个页面的head或 body 末尾都行前提是 JS 代码在所有导航链接渲染之后执行。这里split(/).pop()取的是 URL 中的最后一个文件名比如/collection.html提取出collection.html然后和每个a的href对比。这样不仅省去手动维护高亮还能让答辩时演示“当前页自动定位”成为一个小加分点。再看 404 兜底。本地 HTTP 服务下访问http://localhost:8000/notexist.html默认会显示浏览器自带的错误页和模板风格完全割裂。模板提供404.html就说明它希望站点在任何异常路径下都保持紫色主题的视觉。部署到 Nginx 时配置方法很简单server { root /var/www/template; error_page 404 /404.html; location /404.html { internal; } }这样用户访问不存在的页面时看到的是模板里的 404 页。本地用npx serve .启动时它也会自动寻找404.html并渲染。判断页面跳转关系是否理顺最直接的办法是打开浏览器 DevTools 的 Network 面板逐页点击导航凡是出现红色请求就要检查相对路径是不是从项目根目录写的。3. 紫色大屏视觉CSS变量、Grid栅格与图片裁剪3.1 先看颜色把紫色主题抽成CSS变量模板的“紫色大屏”观感主要来自深色底和亮紫渐变。想让整套模板快速变成自己的主题色不建议全文件替换颜色值而是先找css/下的样式文件里有没有:root变量块。这类静态模板最常见的组织方式如下:root { --primary: #7b2ff7; --primary-deep: #5a1cb8; --bg-dark: #140b1f; --surface: rgba(255, 255, 255, 0.06); --text-color: #f0eef4; --font-main: Noto Sans SC, sans-serif; --shadow: 0 12px 32px rgba(91, 28, 184, 0.35); }用 CSS 自定义属性的好处是调整主题色时只改:root里的一个值所有引用var(--primary)的地方都会同步变化。开发时打开 DevTools 的 Elements 面板选中html根节点直接在 styles 面板里改--primary的色值整站颜色会实时预览这在答辩演示时比“写完再刷新”直观得多。大屏首页的 Hero 区域一般这样写body { background: var(--bg-dark); color: var(--text-color); font-family: var(--font-main, Noto Sans SC, sans-serif); } .hero { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary) 100%); }min-height: 100vh保证第一屏占满视口形成大屏效果place-items: center是align-items和justify-items的简写让内容和标题同时水平垂直居中。如果模板原本用的是绝对定位改成 grid 后会少很多top/left/margin的魔法数字。3.2 图片墙用 grid 布局不用 float旅行摄影模板里的作品集页通常是一排卡片图片数量多、宽高比不统一。常见做法是使用 CSS Grid而不是早期模板里常见的float: left加百分比宽度。.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; padding: 2rem; }这里的auto-fill会在容器宽度足够时自动多排一列minmax(280px, 1fr)表示每一列最小 280px剩余空间平均分配给所有列。换句话说在 1440px 的屏幕上可能是四列在 768px 的平板上变成两列在手机上一列几乎不需要额外写媒体查询。有些模板会写成grid-template-columns: repeat(3, 1fr)固定三列屏幕变窄时图片被挤到看不清。改成auto-fill minmax是最小改动方案。属性/值效果repeat(auto-fill, minmax(280px, 1fr))根据容器宽度自动决定列数最少 280pxgap: 1.25rem卡片间距 20pxpadding: 2rem容器内边距避免卡片贴边再者为什么摄影作品更合适 grid 而不是 flexflex 擅长处理一维排列一行内部分换行也可以但要让每行卡片的高宽严格对齐、并且按行自动折行grid 的二维轨道模型更稳。评委如果问“为什么这么布局”这个选型理由要能说出来。3.3 摄影图片的尺寸统一与防止布局跳动模板里图片尺寸不一直接img { width: 100%; }会让每张卡片的高度参差不齐。摄影类模板最稳妥的做法是固定图片容器比例.gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transition: transform 0.3s ease; } .gallery-card:hover img { transform: scale(1.02); }aspect-ratio: 4 / 3是让图片区域在图片加载前就占好高度避免页面滚动时高度突然变化这是前端性能指标 CLS 里很关键的一点。object-fit: cover让图片缩放后裁剪掉多余部分而不是拉伸变形。scale(1.02)用于鼠标悬停时微放大搭配卡片上原有的暗色遮罩观感上更像展览墙。为了提升首屏加载体验可以给非首屏图片加loadinglazy但首屏 Hero 图和第一行作品集图片不要加否则浏览器会延迟加载它们反而拉低 LCP。这里推荐的做法是模板里保持loadinglazy的图片不做统一移除只在index.html的 hero 图上显式去掉或改为loadingeager。4. JavaScript交互分类筛选、灯箱与移动端导航4.1 分类筛选以 data 属性为锚点作品集页和收藏页里通常会有一排筛选按钮全部、城市、自然等。对应的卡片上会挂>button classfilter-btn>const filterBtns document.querySelectorAll(.filter-btn); const cards document.querySelectorAll(.gallery-card); filterBtns.forEach(btn { btn.addEventListener(click, () { filterBtns.forEach(b { b.classList.remove(active); b.setAttribute(aria-pressed, false); }); btn.classList.add(active); btn.setAttribute(aria-pressed, true); const filter btn.dataset.filter; cards.forEach(card { const match filter all || card.dataset.category filter; card.classList.toggle(is-hidden, !match); }); }); });这里btn.dataset.filter读取的是>.gallery-card.is-hidden { display: none; }按钮>div classlightbox idlightbox img src alt预览大图 /divCSS 让它默认隐藏有.open时覆盖全屏.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: none; place-items: center; z-index: 999; } .lightbox.open { display: grid; } .lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 8px; }JS 负责把点击图片的地址赋给灯箱里的 img再监听遮罩和 Escape 键const lightbox document.getElementById(lightbox); const lightboxImg lightbox.querySelector(img); document.querySelectorAll(.gallery-card img).forEach(img { img.addEventListener(click, () { lightboxImg.src img.src; lightbox.classList.add(open); }); }); lightbox.addEventListener(click, () { lightbox.classList.remove(open); }); document.addEventListener(keydown, e { if (e.key Escape) { lightbox.classList.remove(open); } });这里inset: 0等价于top: 0; right: 0; bottom: 0; left: 0。点击遮罩任意位置关闭按 Esc 也能关闭。要注意点击图片时事件会冒泡到#lightbox所以点击图片也会触发关闭。如果不想这样给lightboxImg加一行e.stopPropagation()即可。移动端如果模板启用了 touch 事件还要在touchstart里做同样的关闭判断否则手机上点遮罩可能没反应。4.3 移动端菜单与导航高亮模板在移动端一般会隐藏导航链接改用汉堡按钮。常见结构是button classmenu-toggle aria-label展开菜单菜单/button nav classsite-nav.../nav对应的交互逻辑很短document.querySelector(.menu-toggle)?.addEventListener(click, () { document.querySelector(.site-nav)?.classList.toggle(open); });这里用了可选链?.如果当前页面没有.menu-toggle脚本不会报错后面代码继续执行。配合 CSS 里的.site-nav.open做下拉或滑出效果。另一个高频交互是页面滚动后导航栏固定加阴影window.addEventListener(scroll, () { document.querySelector(.site-header)?.classList.toggle(scrolled, window.scrollY 10); });window.scrollY 10表示滚动超过 10px 时给 header 加类样式里可以调背景透明度和阴影。这个交互适合紫色大屏那种从上往下滑的页面让导航不透明层跟随内容滚动。5. 进阶把这个模板改造成能过答辩的课程设计作品5.1 用改造记录证明工作量答辩时老师最怕学生只会说“我用的是模板”。可以在项目根目录建一个CHANGELOG.md把改动逐条写清楚。表格形式最直观改动位置改了什么原因css/style.css 的 :root修改主色和渐变方向贴合个人旅行摄影主题index.html Hero 区替换标题和副标题去除模板占位文案folio.html 作品集替换成自己的照片避免版权问题js/filter.js增加事件委托支持动态加载卡片single.html增加 URL 参数渲染减少重复页面维护这不是形式主义而是为了让答辩时能指着屏幕说出“每一处为什么要改”。如果 git 环境可用顺手git init git add -A git commit -m init project再提交几个改动记录工作量会以版本树的形式直接呈现。5.2 给 single.html 加查询参数让详情页动起来single.html如果只是静态展示每新增一张图还得单独做一个 html维护成本高。一个不引框架的改造是用URLSearchParams读取?idxxx再映射到对应内容const params new URLSearchParams(location.search); const photoId params.get(id) || city-01; const photoData { city-01: { title: 城市夜景, location: 上海, image: images/city-01.jpg }, nature-01: { title: 山雾, location: 贵州, image: images/nature-01.jpg } }; const data photoData[photoId]; if (data) { document.querySelector(#single-title).textContent data.title; document.querySelector(#single-location).textContent data.location; document.querySelector(#single-image).src data.image; }URLSearchParams能直接解析single.html?idcity-01这样的地址不需要自己拆分字符串。作品集页里的卡片跳转只需写成single.html?idcity-01详情页内容统一集中在一个 JS 对象里。对于几十张图片的个人博客这种方案比模板自带的多个single-*.html更好维护也是前端路由思想的简化版本。5.3 提交前查一下性能和内容提交前打开浏览器 DevTools 的 Lighthouse 标签跑一次移动端检测重点看三项图片有没有设置width或aspect-ratio、字体请求有没有阻塞渲染、控制台有没有 404 请求。Lighthouse 给出的性能分不是最终成绩但能帮你发现模板里隐藏的 jpg 大图和重复加载的资源。把模板里的占位文案替换成自己的摄影故事会比保留“Lorem ipsum”更真实。另外把文件名很像下载站风格的使用须知重要.txt改成自己写的README.md内容写清楚“如何启动、页面清单、改造记录”会让老师觉得你做了工程化整理而不是下载完直接交。本文还有配套的精品资源点击获取