01
配色变量与字体搭配
主色、强调色、纸底和描边都集中在样式表顶部的变量区。改一处，按钮、卡片、导航和页脚会一起更新，不用逐页替换。
指南内容
四块内容，覆盖从改色到上线的主要环节
你可以按顺序往下读，也可以直接用上面的搜索框跳到具体环节。每一块都给出可以照做的步骤和容易踩错的细节。
02
页面骨架与模块清单
首页放首屏、功能截图、系统要求、评价、下载区、资讯与常见问题；分类页和文章页各自保留独立的版式，互不挤压。
03
封面图与背景图规格
首屏封面按 16:10 准备，功能截图按 16:9 准备，背景图铺在深色区块时把透明度压到一成左右，纹理才不会抢正文。
04
上线检查与故障排查
传完文件先看首页、分类页和文章页是否都能打开，再在手机上过一遍导航、按钮和表单，最后确认图片路径与样式缓存。
上手顺序
按这四步走，多数站点当天就能打开
先把配色定下来再动内容，返工最少。每一步做完都建议在浏览器里看一眼实际效果，不要等全部改完才检查。
1
定配色与字体
打开样式表顶部的变量区，先确定主色、纸底和描边三项，再决定标题用衬线还是无衬线，其余颜色跟随这三项调整。
2
搭页面骨架
保留首屏、内容区、常见问题和页脚，其余模块按需要增减。删掉模块时连同对应的样式一起清理，页面会更轻。
3
放入素材与文案
把封面图、背景图放进 images 目录，按实际路径替换引用。文案建议先写长再删短，标题控制在两行以内更整齐。
4
检查并上线
用手机和电脑各看一遍，重点检查导航折叠、按钮点击区域和图片是否溢出，确认无误后再把文件传到站点根目录。
常见用法
三种常见的站点类型，改法不太一样
同样的模板放在不同场景里，需要调整的模块顺序和内容密度并不相同。下面三种情况覆盖了大部分新站需求。
个人作品站点
重点在首屏和作品卡片，说明文字可以短一些，把注意力留给图片。
- 首屏只放一句自我介绍和一个联系入口
- 作品卡按 16:10 比例统一裁切
- 页脚保留邮箱，去掉多余栏目
小型工作室官网
需要讲清服务范围和合作方式，模块数量和文字密度都会比作品站高。
- 首屏下方紧跟服务与流程两个板块
- 放两组客户评价，写明具体合作场景
- 底部留联系方式与工作时间
内容与资讯小站
列表和文章页是主要入口，配色要更克制，阅读区域的对比度要够。
- 首页留出资讯列表和分类入口
- 文章正文宽度控制在 760 像素以内
- 标签与时间信息放在标题下方一行
常见问题
改配色、换素材、传文件时最容易卡住的地方
下面按主题分成三组，都是实际动手时问得最多的问题。点开即可看到处理办法。
主题与配色
深空墨紫做主色，正文页会不会显得太暗？
正文页使用的是月白纸底，深空墨紫只出现在首屏视觉、下载区块和页脚三处。这样阅读区域保持明亮，深色块承担收束和对比的作用，长时间阅读也不会觉得压抑。如果你的站点文字量很大，可以把首屏视觉块的高度再压一压。
星砂金用多了会不会显得旧气？
把星砂金限制在按钮、序号、下划线和少量强调文字上，正文和标题仍然以墨色为主。浅金只用于悬停状态和描边，占比控制在一成以内，整体会显得克制而不是堆砌。如果页面里金色元素超过五处，建议删掉其中一两处。
想把配色换成暖色系，需要改几处？
样式表顶部的变量区集中定义了主色、强调色、纸底和描边，改动这几项后，按钮、卡片、导航和页脚会一并更新。改完记得清一次浏览器缓存再查看效果，否则看到的可能还是旧配色。纸底不建议调得过黄，否则和金色元素会互相打架。
素材与图片
封面图应该按什么尺寸准备？
首屏和图文区块常用 16:10 与 16:9 两种比例，宽度准备 1600 像素即可满足大屏显示。压缩成 webp 后单张控制在 300KB 以内，页面加载会明显更快。图片里的主体尽量放在中间区域，这样在不同裁切下都不会被切掉关键部分。
背景图铺在深色区块里看不见纹理，怎么处理？
把背景图透明度降到零点一左右，再叠加一层径向遮罩让边缘渐隐，纹理就会自然浮出来而不会盖住文字。如果背景本身对比很强，可以先用图片工具统一压暗，再放进样式里。
图片路径写错，页面会显示什么？
模板会回落到纸底次层的色块占位，不会出现破图图标，但内容会显得空。发现区块变空时，先确认文件名大小写和目录层级，再检查路径是否以斜杠开头。
部署与适配
文件上传到站点根目录后访问首页提示 404，怎么查？
先确认入口文件是否命名为 index.php 并放在根目录，再检查目录是否给了读取权限。如果部署在子目录里，还要核对页面内链接的前缀是否与目录名一致，否则样式和图片都会加载失败。
改了样式表但页面没有变化，是什么原因？
多数情况是浏览器缓存了旧样式。可以强制刷新页面，或者在样式表链接后加一个版本参数。若使用了模板缓存，清除一次缓存目录后再打开页面确认。还有一种可能是改错了文件，检查一下同目录下是否还存在另一份样式表。
手机上按钮点不动、导航展开后遮挡内容怎么办？
按钮最小高度保持在 48 像素以上，点击区域才够用。导航展开后的搜索条是有背景和边框的固定层，如果出现遮挡，检查一下页面顶部是否有其他定位元素层级高于它。滚动时吸顶效果在小屏上可以直接关闭，操作会更顺手。
还是没查到答案？把具体现象写下来
描述得越具体，回复越快。建议写清你改动的位置、看到的提示、使用的浏览器，如果能附上截图会更好。
- 说明现象：比如“分类页标题变成两行，右侧图片溢出屏幕”。
- 说明环境：浏览器、是否手机、站点放在根目录还是子目录。
- 说明已尝试：换过配色、清过缓存、重新上传过文件，都可以写一句。
- 回复时间：工作日当天提交的问题，一般在次个工作日给出处理建议。