简介面向求职面试与个人作品集展示场景的HTML源码包专为图片图文列表展示而设计内置响应式布局可自动适配移动端、平板与桌面屏幕。整套模板包含首页、关于、联系、博客、作品详情与404页面等7个HTML页面配合3份CSS样式、4份JavaScript交互与1个SVG图标能直接构成一个完整可运行的响应式网站其中HTML负责页面结构、CSS控制视觉与响应式布局、JavaScript提供交互效果、SVG用于图标展示。27张jpg与17张png图片则用于示例内容与作品占位包体仅675KB共59个文件结构清晰、便于二次修改。已有101人学习下载适合前端初学者快速搭建个人作品集也适合求职者用于面试作品展示。通过这套源码可以省去从零搭建框架的时间快速替换图片与文案即可上线还能借此展示对响应式设计、页面组织与移动端适配的理解。1. 作品展示 HTML 模板压缩包解压后先别急着换图拿到这份作品展示与图片展示的 HTML 源码 zip大多数人第一件事是打开 index.html 把图片地址改成自己的然后发现移动端要么图片被裁、要么列表挤成一行、要么横向滚动条冒出来。这个标题里真正的关键词不是“作品展示”而是“响应式网页模板”和“适配移动端”。一套能直接改的图片图文列表展示页核心不在轮播图而在栅格布局和图片缩放策略。先想清楚这一点后面改源码才不会越改越乱。我下面会从布局策略、源码骨架、移动端适配到 zip 内改动流程把这套模板该有的长这样讲透。2. 响应式图文列表先定布局策略再谈断点与图片尺寸作品展示页的图片图文列表最常见的问题是不同屏幕下列数不统一、图片比例失衡。要一次解决得先把布局策略定成 CSS Grid而不是依赖 Flexbox 的换行效果。2.1 为什么是 Grid 不是 Flex对齐与换行控制很多响应式网页模板里用的是display: flex; flex-wrap: wrap;然后给每个作品项设一个百分比宽度。这种做法在小图列表里够用但一旦某一行的图片数量不齐Flex 布局会把最后一张图拉伸或缩进看起来像排版事故。CSS Grid 的优势在于列数是显式声明的每一行都按同样的轨道宽度对齐。我一般会给模板里.gallery容器直接写这样的结构.gallery { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; } media (min-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); } } media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } } media (min-width: 1440px) { .gallery { grid-template-columns: repeat(4, 1fr); } } .gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }这段代码的逻辑并不复杂默认手机竖屏一列平板两列笔记本三列大屏四列。gap: 16px既控制间距也决定图片之间的呼吸感。关键在图片那一组属性height: 100%配合object-fit: cover让图片无论原始比例是横幅还是竖幅都被裁剪到容器尺寸内不会把 grid 行高撑乱。aspect-ratio: 4 / 3是给浏览器一个占位比例图片还没加载完时卡片高度已经确定避免了列表上下跳动。2.2 断点设置与列数映射很多人拿到模板后喜欢改断点数字我觉得合适的做法是先看内容密度而不是照搬常见尺寸。下面这组参数是我在图片展示类页面里用得比较顺手的视口宽度列数适用场景 768px1手机竖屏单列大图适合左右滑动查看更多信息768px ~ 1023px2平板竖屏或手机横屏两列刚好够触摸1024px ~ 1439px3笔记本三列是图片列表的黄金数量 1440px427 寸及以上显示器四列减少留白断点写min-width而不写max-width的好处是窄屏是默认状态宽屏一层层往上叠。你只需要维护“从下往上”的规则不用在多个max-width之间反复判断优先级。如果模板里原作者用了max-width我也建议改成min-width后续加列会更容易。2.3 object-fit 让图片不管什么比例都不变形图片列表里最容易被忽略的就是object-fit。很多 html 网页制作初学者会直接用img加固定宽高结果图片被拉伸成一坨。object-fit的cover值会裁剪溢出部分但保留图片原始比例contain则完整展示图片但会留白。作品展示建议用cover因为封面图更需要视觉统一。如果想保留图片的完整构图就不要在 img 上强制宽高而是去掉height: 100%让行高由图片高度自己决定。这样列表会像瀑布流但响应式复杂度会高一些。从 zip 模板里的图片图文列表展示需求来看统一比例的网格更稳妥移动端也更好看。3. 模板源码的文档骨架与列表项语义打开 index.html先不要急着看样式模板源码的结构往往决定了后期维护成本。作品展示页的语义化做得好不仅搜索引擎看得懂屏幕阅读器也能读出每张作品对应的标题。3.1 文档头移动到移动端的 viewport 设置只要是适配移动端的响应式网页模板head里必须先出现正确的 viewport 设置。很多失效的移动端适配问题不在 CSS而是少了这行 meta。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover title作品展示 - 图片列表/title link relstylesheet hrefassets/css/style.css script defer srcassets/js/main.js/script /head这段模板源码的头部是标准基本功。widthdevice-width让页面宽度跟随设备屏幕initial-scale1禁止默认缩放viewport-fitcover则是给 iPhone 等带刘海屏设备用的让内容扩展到安全区以外时背景色能铺满。写script时用defer让 HTML 先解析完再执行 JS避免移动端白屏。3.2 用 figure 和 article 组织作品项图片列表里的每一项都应该是一个独立的article图片和说明文字用figure包起来。这样当模板被二次开发或接入 CMS 时整个列表项的复制、排序、删除都能做到模块化。main section classgallery aria-label作品列表 article classgallery__item figure a hrefassets/images/work-01.jpg classgallery__link>.gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background-color: #e5e5e5; }background-color是图片加载前给卡片一块浅灰色占位区域避免白屏感。如果你有更精细的占位需求可以生成一张约 20 像素宽的模糊缩略图 base64 放到 CSS 里图片加载完再覆盖。这个技巧在图片展示站里提升感知速度非常有效。4.2 一个几十行的轻量灯箱效果作品列表需要点击查看大图时模板里常配灯箱。如果只是展示不需要引入第三方库手写一个几十行的轻量版本反而更好维护。核心逻辑是把点击图片的地址放到一个全屏遮罩层里然后关闭时移除。const gallery document.querySelector(.gallery); const overlay document.getElementById(lightbox); gallery.addEventListener(click, (event) { const link event.target.closest(.gallery__link); if (!link) return; event.preventDefault(); overlay.innerHTML img src${link.href} alt${link.dataset.title || }; overlay.classList.add(lightbox--open); }); overlay.addEventListener(click, () { overlay.classList.remove(lightbox--open); });这段代码用事件委托把点击事件绑定在.gallery容器上所以新增列表项不用重新绑定。link.href直接取超链接地址>const backTop document.getElementById(back-top); window.addEventListener(scroll, () { const show window.scrollY 300; backTop.classList.toggle(back-top--visible, show); }, { passive: true }); backTop.addEventListener(click, () { const start window.scrollY; const duration 300; const begin performance.now(); function step(now) { const progress Math.min((now - begin) / duration, 1); window.scrollTo(0, start * (1 - progress)); if (progress 1) { requestAnimationFrame(step); } } requestAnimationFrame(step); });这段一键返回顶部算法用performance.now()记录开始时间然后线性插值滚动位置。progress超过 1 时结束滚动就停在顶部。scroll监听加passive: true告诉浏览器不调用preventDefault可以避免移动端滚动性能下降。4.4 移动端性能优化压缩图片与缓存策略源码层面做再多图片本身太大也没用。我通常会在 zip 模板里附一套图片处理建议缩略图宽度不超过 800 像素体积控制在 200 KB 以内大图宽度不超过 1920 像素。格式上优先 WebP兼容性要求高就用 JPEG。下面的表格可以直接用到图片导出的参数上场景推荐格式最大宽度质量列表缩略图WebP / JPEG800px80%灯箱大图WebP / JPEG1920px85%背景装饰SVG自适应-模板上传到服务器后还要让 Nginx 或 Apache 给图片加长缓存。静态图片的资源路径一般不变可以设置Cache-Control: max-age2592000即 30 天。这样移动端用户第一次加载后再次进入页面不会重复消耗流量。注意如果以后替换了同名图片浏览器可能仍使用缓存文件名加版本号能解决。5. 解压 zip 后改模板的标准化步骤与四个易踩的坑zip 压缩包解开后不要直接双击 index.html 就上线。先检查目录结构再按流程替换内容最后用移动端浏览器过一遍。5.1 zip 包内文件结构建议一份规范的作品展示模板源码里文件至少是这个样子work-showcase/ ├── index.html ├── assets/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── main.js │ └── images/ │ ├── work-01.jpg │ ├── work-02.jpg │ └── work-03.jpg如果 zip 里只有一堆 HTML 和图片混在一起建议你重建这个结构。所有相对路径都以 index.html 为起点CSS 引用写assets/css/style.css图片引用写assets/images/work-01.jpg。这样上传到服务器子目录或改域名时src和href不用动。5.2 替换作品图片的最小改动替换图片时最好保持原文件名不变。比如把新图片命名为work-01.jpg直接覆盖旧文件如果原模板的链接是相对路径页面几乎不用改。如果一定要用新文件名记得全局搜索 HTML 里的.jpg、.png引用尤其注意大小写。Linux 服务器上WORK-01.JPG和work-01.jpg是两个不同的文件。5.3 用变量改主题颜色和间距源码中批量改颜色是一件烦心事。我建议把主色、间距、圆角都声明为 CSS 变量放在:root里后续换肤只需要改一处。:root { --primary-color: #1a1a1a; --accent-color: #e63946; --spacing-base: 16px; --radius-card: 8px; }--primary-color控制文字和主背景--accent-color控制标题和按钮色--spacing-base是列表间距的基础单位。模板里所有padding和margin都优先用calc(var(--spacing-base) * n)表达。这样一套模板做多套主题会非常顺手。5.4 四个坑大小写、路径、缓存、字体第一个坑是大小写敏感上面已经提过。第二个坑是绝对路径有些源码里写的是/images/work-01.jpg部署在子目录时会 404改成相对路径assets/images/work-01.jpg最省心。第三个坑是浏览器缓存旧样式改动 CSS 后在移动端看不到效果可以强制刷新或者给 CSS 链接加版本号?v202501。第四个坑是字体文件引用模板如果用了在线字体库国内移动端访问可能极慢最好把字体文件下载到本地放进 zip 的字体目录然后用font-face引用。验证时在 iOS Safari 和 Android Chrome 各开一遍重点看图片加载速度和列表是否出现横向滚动条这两条过了适配基本就稳了。本文还有配套的精品资源点击获取