1. 先搞清楚这份个人网页到底是给谁看的做HTML个人网页制作这件事我见过太多同学一上来就打开编辑器敲代码敲到一半发现首页风格和自己想的不一样又推倒重来。问题不在技术在于动手前没想清楚一件事这个静态HTML个人网页作品交付对象到底是谁他会在什么场景下打开它。多数大学生的个人网页落点无非三种课程作业、作品集、个人名片。这三者的评分逻辑完全不同用同一套东西交差往往哪边都不讨好。1.1 课程作业的评分点藏在细节里如果是交《网页设计》这类课的期末作业老师手里的评分表通常长这样结构是否完整有没有导航、多页面、页脚、标签是否语义化、样式是否外部引入、有没有交互效果、有没有做响应式、代码是否整洁。注意这里面没有一项是页面好不好看好看只是加分项。我帮学弟改过一份作业页面做得挺花哨用了大量内联style还引了三个不同的CDN结果老师第一句话是你这CSS写在哪。所以作业场景下你真正该花力气的是文件分目录、样式抽离到外部、导航能跳转、至少三个页面互通、手机打开不变形。这些做到了分数基本就稳了。1.2 作品集的逻辑是三秒判断如果是为了找工作或者保研面试准备的作品集站情况反过来——没人会去看你的代码除非他已经是技术面试官。HR或者项目老师点开链接三秒内判断两件事这个人有没有审美这个人有没有拿得出手的东西。所以作品集站的首页第一屏必须放你的名字或者一句话定位、一张清晰的图或者代表作缩略图、一个明确的联系方式入口。不要把欢迎光临我的个人主页这种话放在最显眼的位置那句话不传递任何信息纯占地方。1.3 个人名片的取舍少即是多还有一种情况是纯粹想要一个链接放在简历、社交平台或者邮件签名里。这种站最适合单页设计一屏到两屏搞定不需要复杂的路由和多页面。单页结构的静态HTML维护成本极低改一次内容只要动一个文件这对平时课业已经够忙的同学来说非常现实。提示三种定位可以复用同一套代码骨架但首页信息密度差别很大。建议先定定位再决定是单页还是多页别想着一次做完以后再说。1.4 动手前先画一张信息架构图这一步花你十分钟能省后面十小时。拿纸笔把页面画成方块方块之间画箭头。一个典型的四页结构是首页介绍自己能力标签、作品页卡片列表每张卡点进去是详情、关于我时间线形式的经历、联系页邮箱表单或社交入口。画完之后问自己两个问题从任意页面能不能两次点击内回到首页有没有哪个页面内容其实只有两行、根本不值得单独成页如果某个页面内容太少合并掉。页面数量不是越多越好四个内容扎实的页面远胜八个空荡荡的页面。2. 从空文件夹开始静态站点的目录结构目录结构这件事刚开始学HTML网页制作的人几乎都不在意觉得能跑就行。等到作品要加第五个页面、要换一套配色、要上传到服务器的时候才发现文件名一片混乱改一处错三处。下面这套结构我从大二用到现在基本能覆盖从作业到小作品集的所有需求。2.1 一套能撑住后期扩展的目录树my-website/ ├── index.html ├── works.html ├── about.html ├── contact.html ├── css/ │ ├── reset.css │ └── style.css ├── js/ │ └── main.js ├── images/ │ ├── avatar.jpg │ └── works/ │ ├── work-01.jpg │ └── work-02.jpg └── favicon.ico这里有几个刻意的设计。css目录下拆了reset.css和style.css两个文件reset.css负责清掉浏览器默认的边距和字号style.css只写你自己的样式。为什么要拆因为你在调试的时候如果所有样式混在一个文件里清默认样式的那几行会淹没在几百行自己的代码里改起来极难定位。images下面再开一个works子目录是因为作品页的图片往往是大头十几张起步和头像、背景图混在一起会非常乱。2.2 文件名规范中文、空格、大写都是隐患我踩过最典型的一个坑是一个文件名叫做我的照片 01.JPG。本地用浏览器打开完全没问题上传到托管平台后图片直接挂了。原因是URL里中文和空格会被编码成%E6%88%91%...%2001.JPG这种形式某些服务器或者静态托管服务处理不了还有一些平台对大小写敏感JPG和jpg会被当成两个文件。所以命名规矩就三条全小写、用连字符-连接、不用中文。avatar-01.jpg、work-detail-02.png这样写永远不会出问题。这条规矩在你以后接触任何web工程的时候都用得上现在养成习惯最划算。2.3 相对路径的三种写法静态HTML里的路径问题占了我见过的初学者报错的一半以上。搞清楚三种写法基本就通杀了。写法示例含义用在哪同级引用./style.css或style.css和当前HTML同级根目录的index.html引css里文件时不用这个子级引用css/style.css进入下级目录HTML 引 CSS、JS、图片父级引用../images/logo.png退回上一级子目录页面引根目录资源最容易出错的是子目录里的页面引根目录资源。比如works/detail.html要引css/style.css必须写../css/style.css。我的做法是干脆不建子目录放HTML所有页面都平铺在根目录这样所有资源引用统一写成css/style.css、images/xxx.jpg永远不用数../有几个。注意绝对不要用C:\Users\你的名字\Desktop\xxx这种本地绝对路径。这种路径只在你自己电脑上有效交上去或者部署后一定失败。3. HTML骨架里那些被跳过的细节很多同学的HTML文件第一行是html前面那几行全没有。本地打开看着正常但一旦上传到服务器或者被手机浏览器打开问题就来了。这几行看着不起眼实际各管一摊事。3.1 doctype、lang、charset 三件套各管什么!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title张同学的个人主页 | 前端方向/title meta namedescription content这里是张同学的个人主页记录我的前端学习作品与实践经历。 link relicon hreffavicon.ico typeimage/x-icon link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css /head!DOCTYPE html是告诉浏览器用标准模式渲染。不加这一行浏览器会进入怪异模式quirks mode盒模型的算法会跟标准模式不一样你会发现设了width: 200px加上padding: 20px之后总宽度还是 200px怎么算都不对。这个坑很多人调半天都找不到原因。meta charsetUTF-8管编码。中文乱码绝大多数就是这一行缺失或者文件本身保存的编码不是 UTF-8。编辑器里另存为的时候选 UTF-8这一行写上双保险。langzh-CN影响的是浏览器选择哪套字体渲染、屏幕阅读器读哪种语音、以及搜索引擎判断页面语言。写上去只有好处。3.2 viewport移动端适配的第一道门槛meta nameviewport contentwidthdevice-width, initial-scale1.0这一行如果漏掉手机浏览器会假装自己有 980px 宽然后把整个页面缩小塞进屏幕。结果就是你精心排的三栏布局在手机上变成蚂蚁大小的三栏一个字都看不清。这一行写上之后页面宽度就等于设备实际宽度你写的媒体查询才会生效。可以这么说没有 viewport 的响应式是假的响应式。3.3 语义化标签怎么分一个具体例子div满天飞是初学者最常见的问题。语义化标签不只是为了显得专业还有一个很实际的好处写CSS的时候选择器更好写结构一眼能看懂改起来快。body header classsite-header nav classnav a classnav__logo hrefindex.htmlZHANG/a ul classnav__list lia classis-active hrefindex.html首页/a/li lia hrefworks.html作品/a/li lia hrefabout.html关于/a/li lia hrefcontact.html联系/a/li /ul /nav /header main section classhero h1你好我是张同学/h1 p前端方向 · 正在学习 JavaScript/p /section section classskills h2技能标签/h2 !-- 卡片列表 -- /section /main footer classsite-footer p© 2025 张同学的个人主页/p /footer /body分工是这样的header放站点的头部区域logo、导航nav专放导航链接main是页面主体且一个页面只能有一个section是一个有主题的内容块里面必须有标题article是可以独立成立的内容比如一篇博客正文footer是页脚。顺带说一句 class 命名。上面用的nav__list是 BEM 风格块__元素好处是看到类名就知道它属于哪个组件。你不用严格照搬 BEM但至少做到从类名能猜到它是干什么的别出现.a1、.box2、.div3这种名字。3.4 title 和 description 别乱写title会显示在浏览器标签页和搜索结果的标题上。写成我的主页太平淡写成张同学 | 前端学习者 · 个人作品集信息量就出来了。meta namedescription不直接显示给用户看但搜索结果里标题下面那两行摘要经常就是它。另外favicon.ico放在根目录下浏览器会自动去找不写link也能生效。但它确实能提升这个站被认真做过的感觉成本几乎为零建议加上。没有图的话用一个纯色方块配上你名字首字母用在线工具生成一下两分钟的事。4. CSS布局从能看到好看的几次跃迁HTML决定了页面的内容CSS决定了页面的气质。同样一套内容CSS写得好和写得差观感差距可能有五年。这一节讲的是我实际做静态HTML个人网页作品时反复用到的几套布局思路。4.1 盒子模型和 reset 到底在重置什么浏览器给每个元素都自带默认样式body有 8px 外边距、h1有巨大无比的上下边距、ul有点和左缩进、a标签是蓝色带下划线。这些默认值在不同浏览器里还不完全一致。所以几乎所有项目的第一步都是清默认样式。最简单的做法是在reset.css里写这么几行* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } body { font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: #2b2b2b; }这里有两个点值得单独说。box-sizing: border-box让width包含内边距和边框计算宽度的时候不用再做加法这是几乎所有现代项目的默认选择。img { max-width: 100%; display: block; }解决的是图片超出容器和图片底部莫名多出几像素空白的老问题——因为img默认是行内元素基线对齐会留缝改成块级元素就干净了。字体那句-apple-system和PingFang SC是给苹果设备用的Microsoft YaHei覆盖 Windows最后sans-serif兜底。这样一来页面在 Mac 和 Windows 上都能用系统里最合适的中文字体比硬引一个几MB的网页字体划算得多加载快观感也自然。4.2 Flex 管一行Grid 管一片这两个现代布局方案的职责很清晰。Flex 解决的是一排东西怎么摆比如导航栏、卡片内的图标加文字、按钮组。Grid 解决的是一片区域怎么切比如整页的头部、主体、侧栏、页脚。导航栏用 Flex 处理几乎是标准答案.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 24px; } .nav__list { display: flex; gap: 28px; }justify-content: space-between把 logo 和菜单推到两端align-items: center让它们在垂直方向居中gap控制间距。这三行大概能省掉你以前用float和margin调半天的活。作品卡片列表用 Grid 更省事.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }这一行的意思是每列最小 260px能塞下几列就塞几列剩下的空间均分。也就是说屏幕宽就三列四列屏幕窄就一列不需要写任何媒体查询就实现了自适应。我当年第一次知道auto-fill和minmax组合的时候感觉以前写的响应式都白写了。4.3 响应式断点到底定在哪网上最常见的答案是一堆固定值768px、992px、1200px。这些数字来自老一代的栅格框架照抄没有错但也不是唯一正确的答案。更实在的做法是把浏览器窗口从宽拖到窄盯着页面看哪个宽度下开始别扭了那里就是断点。比如你的三栏在 900px 的时候已经挤成一团那断点就定在 960px 左右。移动端的媒体查询我一般只写两三个media (max-width: 960px) { .content-layout { grid-template-columns: 1fr; } } media (max-width: 600px) { .nav__list { gap: 16px; font-size: 14px; } .hero h1 { font-size: 28px; } }注意媒体查询写在样式表最后被覆盖的规则才能生效。写在前面会被后面的普通样式盖掉这是新手经常遇到的媒体查询不生效的原因之一。4.4 配色和字号三个颜色足够初学者最容易犯的视觉错误是颜色太多。五个主色、三种强调色堆在一起页面会显得很吵。我的做法是固定三个颜色一个主色品牌色用在你希望用户注意的地方比如按钮、链接悬停、标题下划线的装饰条、一个深色正文文字不要用纯黑#000用#2b2b2b这类深灰看着柔和很多、一个浅灰背景分区、分割线比如#f5f6f8。再加一个白色做底就够了。字号也一样别一个段落里出现七八种大小。一般正文 15-16px小字说明 13-14px二级标题 22-28px主标题 32-48px移动端降到 26-30px。行高设在 1.7 左右中文在这个值上读起来最舒服。留白是另一个被严重低估的东西。同样一个卡片padding从 12px 加到 24px观感提升是肉眼可见的。宁可少放点内容也别把内容挤在一起。5. 几个花小力气出效果的交互静态HTML个人网页作品如果一点交互都没有会显得很平。但也不需要引动画库、写几百行JS。下面这几个效果加起来不到一百行原生代码但评委或者访客的感知提升很明显。5.1 一键返回顶部的完整实现这是被问得最多的一个小功能思路其实很简单滚动超过一定距离显示按钮点击按钮让页面平滑滚回顶部。button idbackToTop classback-to-top aria-label返回顶部↑/button.back-to-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border: none; border-radius: 50%; background: #3478f6; color: #fff; font-size: 18px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, transform .25s; } .back-to-top.is-visible { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-3px); }(function () { var btn document.getElementById(backToTop); if (!btn) return; var THRESHOLD 400; var ticking false; function update() { btn.classList.toggle(is-visible, window.scrollY THRESHOLD); ticking false; } window.addEventListener(scroll, function () { if (!ticking) { window.requestAnimationFrame(update); ticking true; } }, { passive: true }); btn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); }); update(); })();这里有两个平时文档里不太会讲的细节。第一scroll事件触发极其频繁直接在里面改 DOM 会导致滚动卡顿所以用requestAnimationFrame做节流每帧最多执行一次。第二监听器加了{ passive: true }告诉浏览器这个回调不会阻止默认滚动行为移动端的滚动会明显顺滑。还有个容易忽略的边界情况如果页面内容很短本身就没滚动条按钮永远不显示这没问题但如果按钮被写死成一直显示短页面下点它没有任何反应会让人困惑。所以用scrollY 400来控制显隐是必要的不是装饰。至于用 CSS 的html { scroll-behavior: smooth; }一行搞定平滑滚动可不可以可以但它在某些浏览器上会被用户的减少动态效果系统设置影响而失效。用window.scrollTo的 JS 方案更可控。5.2 导航吸顶与当前栏目高亮导航吸顶现在是主流做法实现成本很低.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid #eceef1; }position: sticky配合top: 0就是吸顶比用position: fixed好得多——因为它不脱离文档流后面不用再给主体补一段padding-top。半透明背景加backdrop-filter模糊滚动时能透出下面内容质感比纯白实心好很多。当前页面高亮最简单的做法是在每个HTML页面里手动给对应链接加is-active类。多页面静态站没有路由手动加是最稳的。如果是单页锚点导航那种就需要用IntersectionObserver监听各个区块的可见状态来切换高亮逻辑会复杂一些。5.3 滚动淡入别用滚动事件硬算给内容块加滚到就淡入的效果很多人第一反应是监听scroll然后每个元素算getBoundingClientRect().top。这个方案能用但元素一多就会掉帧。更合理的做法是用IntersectionObserver(function () { var items document.querySelectorAll(.reveal); if (!items.length) return; if (!(IntersectionObserver in window)) { items.forEach(function (el) { el.classList.add(is-in); }); return; } var observer new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { entry.target.classList.add(is-in); observer.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: 0px 0px -60px 0px }); items.forEach(function (el) { observer.observe(el); }); })();.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; }threshold: 0.15表示元素露出 15% 就触发。rootMargin那个负值让触发点比视口底部再往上 60px这样元素不是贴着屏幕边缘才出现观感更从容。unobserve是关键元素已经出现过了就不用继续监听省性能。还有一点必须提醒如果你的页面内容本来就短或者用户用的是减少动态效果设置全屏元素都opacity: 0是很危险的——万一 JS 报错整个页面就是一片空白。所以我习惯在html上加个no-js类JS 正常执行时再移除或者像上面那样做能力检测兜底。5.4 打字机、轮播这些效果的取舍打字机效果、自动轮播、粒子背景这些确实是看起来很厉害的东西。但我要说一句实在话在课程作业里它们加分有限在作品集里它们有可能减分。原因是这类效果往往要么是抄来的代码看不懂要么调不好导致手机上卡顿。我见过一个同学的作品集首页放了个全屏粒子动画手机上打开直接掉到十几帧滚动都费劲。评委的第一印象就是这站有问题。我的建议是如果一定要加加在次要位置比如页脚的装饰、头像旁边的光标闪烁这种极轻量的东西。首页第一屏保持干净加载迅速比什么都重要。6. 实测最容易翻车的几个地方这一节我按排查顺序写遇到问题可以对照着往下走。这些都是我自己和身边同学真实踩过的。6.1 中文乱码先看编码再看保存页面上出现锟斤拷或者一堆问号方块99% 是编码问题。排查顺序是第一步检查HTML里有没有meta charsetUTF-8第二步检查编辑器保存文件时用的编码是不是 UTF-8VS Code 右下角能看到第三步如果引了外部CSS或JS那些文件也必须是 UTF-8。三步都对了还是乱码那大概率是CSS里charset声明的位置不对或者文件中间被别的工具改过编码。重新另存为一次通常能解决。6.2 图片不显示按路径、文件名、格式三查图片挂了先按 F12 打开开发者工具切到 Network 面板刷新页面那条红色的 404 请求会告诉你浏览器实际在找哪个路径。对照着看问题基本就三种。现象常见原因处理方式404 找不到路径写错或大小写不匹配按 Network 里的实际路径核对找到了但显示破图文件本身损坏或后缀名不对换个图重试确认真实格式显示了但被拉伸变形只设了 width 没设 height用object-fit: cover配合固定容器object-fit: cover这个属性特别有用。做作品缩略图的时候图片尺寸往往不统一用固定高度的容器加object-fit: cover所有图都会被裁成同样比例排列起来整齐不会出现高低不齐的情况。6.3 改了CSS页面没变化缓存这只拦路虎这个坑我印象最深。有一次改了一个字体的颜色刷新了十几次页面都没变化一度以为是选择器权重写错了查了半小时。最后发现是浏览器缓存了旧的 CSS 文件。排查方法是按Ctrl F5Mac 上是Cmd Shift R强制刷新或者在开发者工具的 Network 面板里勾上 Disable cache。如果确认是缓存问题正式部署的时候给资源链接后面加个版本号比如css/style.css?v2每次改动更新这个数字就能强制浏览器拉新文件。6.4 手机上出现横向滚动条这个问题在移动端极其常见表现是页面能左右拖动或者右侧内容被切掉一块。原因通常是某个元素的宽度超出了屏幕。排查技巧是在 CSS 里临时加一句* { outline: 1px solid red; }然后缩小窗口看看是哪个红框超出了右边的边界。常见元凶有固定宽度写死的容器width: 1200px、负的margin、position: absolute定位跑出去的元素、以及100vw加上了滚动条宽度。修复方式通常是给容器加max-width: 100%或者给body加overflow-x: hidden。后者是治标但应急的时候很好用。6.5 file:// 打开和 http:// 打开的差异本地双击HTML文件地址栏是file:///C:/...这种。这种模式下有些功能会失效fetch请求本地文件会被跨域策略拦住、部分浏览器的localStorage行为不一致、Service Worker 完全用不了。如果你只是做纯静态页面展示file://打开看看效果完全够用。但如果你用了任何需要发请求的功能或者要测试 PWA 相关的东西就必须起一个本地服务器。VS Code 装个 Live Server 插件右键选 Open with Live Server它会用http://127.0.0.1:5500打开还能自动刷新非常好用。提示Live Server 还有个附带好处它默认绑定的端口是 5500页面里写的绝对路径/images/a.jpg在这个环境下能正常工作和将来部署后的行为一致。用file://打开时这种绝对路径是会失效的。6.6 表单和链接的小问题联系页如果放了表单静态站是没有后端接的提交按钮点了不会有任何效果。这时候有两种处理一是用第三方表单服务有免费额度二是干脆不放表单写清楚邮箱让对方直接发邮件。放一个点了没反应的提交按钮比不放表单更糟会让人觉得这站半成品。链接方面a href#这种空链接点一下页面会跳到顶部体验很怪。如果不是真的要跳转用button或者加rolebutton别用空href。7. 部署上线让别人点开链接就能看本地做好只是一半能给别人一个可访问的链接这件事的完成度会完全不一样。静态站部署本身非常成熟把文件拖上去就行。7.1 选一个静态托管平台常见的选择有这几类代码托管平台自带的 Pages 服务、对象存储配静态网站功能、以及各种前端托管平台。对个人作品来说我比较推荐带版本管理的那一类因为你可以随时改、随时更新历史记录都在不怕改坏。流程基本统一建一个仓库把整个文件夹推上去在设置里开启 Pages 功能选好分支等一两分钟链接就出来了。地址通常是用户名.github.io/仓库名这种形式。推送这一步如果没用过 Git最省事的做法是用平台网页端的上传文件功能把index.html、css、js、images一起拖进去。不会命令行也能完成这点很重要别被必须会 Git吓住。7.2 部署前的自查清单检查项为什么重要入口文件名是index.html服务器默认找这个文件别的名字会 404所有路径都是相对路径绝对路径部署后必然失效没有大写中文文件名部分平台区分大小写中文需编码图片总大小控制住一张 5MB 的原图会让首屏加载很慢手机打开检查一遍部署后视图宽度是真实设备宽度控制台无红色报错报错说明有资源没加载成功图片这一条我想多说两句。手机随手拍的照片动辄三四MB五六张堆在首页加载时间就上去了。上传前用图片压缩工具压到 200KB 以内或者把长边限制在 1600px肉眼看几乎没差别加载快好几倍。这件事花五分钟收益很大。7.3 域名和后续维护如果想要个更好记的地址可以绑一个自定义域名。要注意的是如果用平台默认提供的二级域名绑自定义域名时需要同时配置解析记录这个过程平台文档里写得挺清楚跟着做就行。后续维护层面建议留一个README说明这个站的结构尤其是隔几个月再回来改的时候你会感谢当时的自己。另外把源文件同时留一份在本地别只在网页端有万一要改又找不到文件就麻烦了。8. 从模板到原创改造一份模板的正确姿势网上搜web个人网站模板能找到大量免费资源用它们起步完全没有问题甚至是很聪明的做法。问题在于很多人改完还是一眼模板这就失去了自己做一份的意义。8.1 先拆骨架别急着改文字拿到一份模板第一步不是打开编辑器改字而是打开页面用开发者工具点几下看清楚它的结构头部多高、主体是几栏、卡片是怎么排的、断点在哪几个宽度、用了哪些颜色变量。具体做法是在 Elements 面板里从上往下点每点一个元素看它在页面上的高亮区域几分钟就能把结构摸清楚。这个动作花你十分钟比盲目改代码高效得多。8.2 替换内容的顺序先结构再内容最后皮我改模板的顺序固定是三步。第一步删掉用不上的区块。模板里通常有很多你没内容的模块比如博客列表服务介绍客户评价全删掉别留着占地方。第二步把剩下的区块替换成自己的内容。文字、图片、链接一个个来。这时候先不管好不好看能跑通就行。第三步改视觉。换配色、换字体、调整间距、改圆角和阴影。到这一步你会发现因为结构已经理顺了改起来非常快。这个顺序的核心逻辑是结构和内容决定了页面有几个部分视觉只是最后的呈现。反过来做的话你调好了颜色结果发现要删掉一个区块之前的功夫全白费。8.3 怎么让页面看起来是你自己的有三个成本很低但效果明显的手段。配色。模板的默认配色往往是很饱和的蓝或者紫用在任何站上都一样。换一套低饱和的配色比如墨绿配米白、深灰配橙整个气质就变了。间距节奏。把模板里所有区块的上下间距统一成一个值比如 96px然后按需缩减成 64px 或者 48px。统一的间距节奏会让页面显得很整这是很多人说不清但能感觉到的差别。细节处理。给标题加一条 4px 宽、40px 长的短横线作为装饰给卡片的悬停加上轻微的translateY(-4px)和阴影变化给链接悬停加个下划线的滑入动画。这些小东西加起来的手工感很强是模板不会给你的。注意改模板时删掉作者留的注释里的署名信息时注意看下原作者的授权协议。很多免费模板要求保留版权信息删之前确认一下这是基本的规矩。8.4 一个我常用的自查方法做完了别急着交。把页面在手机上打开通勤路上刷一遍隔一天再打开看一遍。第二天看的时候你会突然发现很多前一天觉得没问题的地方很奇怪。这个方法我用过很多次每次都能挑出几个毛病。当天做当天看眼睛是钝的隔一段时间再看判断力会准很多。说了这么多我自己做个人网页这几年最大的体会是技术上真正难的东西其实不多难的是取舍。配色用几个、页面做几页、效果加不加这些决定比写代码本身更影响最终结果。刚开始做的时候我总想一次把会的东西全用上结果做出来像个功能演示页面什么都有一点什么都不精。后来慢慢学会做减法页面反而更像样了。还有一个小技巧分享给正在准备答辩或者面试的同学如果被问到某个效果是怎么实现的别背概念直接打开代码指着那一行说这里判断滚动距离超过 400 显示按钮。能讲清楚具体数值和判断条件比说一堆名词有说服力得多。