上个月在天津接了一个很典型的小项目本地一家做门窗的小公司要做网站需求说得很简单——就用htmlcss做5页吧。说真的这种需求在二三线城市特别常见客户不要后台、不要动态效果只要干干净净的几张页面把公司讲清楚。但越是这种简单的需求越容易在细节上翻车。我最后做完交付时客户打开IE浏览器说样式全乱了这事让我折腾了大半天才排查出来。这篇博文就把整个项目从需求拆解、目录规划、样式设计到兼容性踩坑的过程完整写下来给正准备做多页静态站的朋友一个可以直接参考的完整路线。1. 接到5页需求后我先把导航和信息架构定死了很多初学者做一个多页站点时最容易犯的错误是一上来就打开编辑器写代码写着写着发现页和页之间跳不明白或者某个页面不知道该放什么内容。我接这种小项目第一步从来不是写代码而是把站点结构理清楚。1.1 五页到底选哪五页客户说5页听起来很死板但其实这里的5页指的是5个顶级页面。我按照展示型小企业官网的常规逻辑直接给出这5个index.html首页、about.html关于我们、services.html产品与服务、cases.html工程案例、contact.html联系我们。这里有个经验可以分享小企业的网站不需要新闻系统也不需要行业动态这种需要长期更新的栏目。客户自己都没有内容维护能力你硬做一个空栏目进去三个月后看着更尴尬。五页这个数量其实刚刚好首页负责展示形象关于页讲清楚来历服务页把产品列出来案例页用实际项目说话联系页留下转化入口。确定页面清单之后我还做了一件事把每个页面的核心内容先口头跟客户确认了一遍。比如about页要放公司成立年份、厂房面积、有哪些设备cases页要放哪几个小区的门窗安装实拍。这一步省掉了后期大量返工——你等页面做完了再去跟客户要照片十有八九对方一个月都拿不出来。1.2 目录结构从第一天就用相对路径确定了5个页面的名字接下来就是文件目录。我的习惯是这样的project/ ├── index.html ├── about.html ├── services.html ├── cases.html ├── contact.html ├── css/ │ ├── style.css │ └── pages.css ├── images/ │ ├── logo.png │ ├── banner.jpg │ └── cases/ │ ├── case1.jpg │ └── case2.jpg有几个细节我必须单独点出来都是实际项目里踩过的第一文件名全用英文小写不要出现关于我们.html这种中文文件名。曾经有客户自己下载网页后改名导致链接全部失效。英文小写文件名在Linux服务器、Windows服务器上都不会出乱子。第二页面之间互相跳转一定要用相对路径不要写href/about.html这种绝对根路径。因为你本地测试的时候路径对打包发给客户放在子目录里打开绝对路径就会直接跳错。相对路径意味着只要整个文件夹一起拷走网站内部链接就不会断。第三css目录里我习惯拆成两个文件style.css放全局公共样式pages.css放页面差异化样式。很多人觉得5页站一个css文件就够了但项目后期你会频繁修改某个页面的独有样式混在一起容易误伤其他页面。拆开之后改about页样式的时候脑子里很清楚不会影响index页。2. 公共样式和首页CSS重置、变量、导航高亮的落地信息架构定好了下一步是写公共样式。这里不只是写样式而是要为后面5个页面打一个统一的地基。2.1 样式引入方式为什么我坚持用外部CSScss样式引入方式无外乎三种外部样式表link relstylesheet hrefcss/style.css、内部样式表写在style标签里、行内样式写在标签的style属性上。很多新手写多页站图省事把样式全部写在每个页面的style里结果同一个导航栏样式复制了5份改个颜色要改5个文件。我在这类项目里一律用外部样式表原因就一个公共部分只改一处全站生效。比如客户中途说我们品牌色从蓝色换成绿色你只需要在style.css里改一个变量定义5个页面全部变了。如果用的是内部样式你得一个文件一个文件找漏掉一个就会变成蓝绿混搭的灾难现场。配合外部样式表我还会在style.css最前面写一小段reset。别小看这段代码不同浏览器的默认样式差异很大尤其margin和padding不重置的话页面看起来会莫名偏移。我的习惯是这种极简写法* { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; display: block; }box-sizing: border-box这一行尤其重要。不写它你给一个div设置width: 300px; padding: 20px;实际占用的宽度是340px布局很容易超出容器。写了之后300px就是最终渲染宽度padding和border都往里收计算省心太多。全局样式里我还会定义一组CSS变量让后续页面配色有据可依:root { --primary: #1b6e5a; --primary-dark: #14503f; --text-main: #333; --text-muted: #666; --bg-light: #f5f8f6; --radius: 8px; }为什么用变量因为5个页面的头部、页脚、标题样式都要引用同一种绿色。如果不用变量你会在5个css文件里写5遍#1b6e5a只要有一次输入错误那个页面的颜色就悄悄变了。用了变量之后引用处写var(--primary)写错的概率直接从值拼写错误降低为变量名错误好排查得多。2.2 首页布局展示型首页需要哪几块首页是5个页面里最关键的一页。小企业官网的首页来访问的人只有一个诉求快速知道你是干什么的、靠不靠谱、怎么联系。所以我的首页结构一般是五块顶部栏logo 导航全站复用主视觉区一句话品牌标语 背景图特色介绍3到4个卡片讲优势公司简介切片一段文字 一张厂房实景图页脚地址、电话、备案信息全站复用顶部导航的HTML骨架类似这样header classsite-header div classcontainer header-inner a hrefindex.html classlogo img srcimages/logo.png altXX门窗 /a nav classmain-nav ul li classcurrenta hrefindex.html首页/a/li lia hrefabout.html关于我们/a/li lia hrefservices.html产品与服务/a/li lia hrefcases.html工程案例/a/li lia hrefcontact.html联系我们/a/li /ul /nav /div /header注意首页导航里我加了一个classcurrent这是当前页高亮标记。多页站跟单页站不一样用户需要随时知道我正处在网站的哪个位置。这个高亮不需要JavaScript纯CSS就能解决我后面会专门展开讲。首页主视觉区的CSS我会用背景图加半透明遮罩的做法而不是直接把文字叠在图片上。遮罩能保证不管背景图是什么色调白色文字都能看清。核心代码长这样.hero { background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(../images/banner.jpg); background-size: cover; background-position: center; color: #fff; padding: 100px 0; text-align: center; }rgba(0,0,0,0.35)这个半透明黑色层就是遮罩叠加在背景图上面文字区域的对比度一下就上来了。这个方法成本极低效果好属于必会的实战技能。3. 内页设计服务页卡片、案例页图文、联系页表单与地图首页负责抓眼球剩下的内页负责装干货。5页站的内页虽然内容不多但每一页的布局逻辑都不一样。3.1 服务页flex布局做卡片组注意换行和间距服务页的核心是产品展示。我做了一个四卡片的网格每个卡片包含一张产品图、产品名称、一段简介。这个布局用flex就能实现不一定要上grid——除非你预期卡片数量会动态增加。CSS布局方式大致有五种文档流、浮动、定位、flex、grid。在这个场景里我选flex的原因很简单卡片数量固定4到6个flex换行足够用代码短旧浏览器兼容性相对好。而grid虽然写起来更现代适合不规则布局这里有点杀鸡用牛刀。flex卡片组的代码核心.services-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; } .service-card { width: calc(50% - 24px); background: #fff; border-radius: var(--radius); padding: 24px; }width: calc(50% - 24px)的含义是每行放两个卡片每个卡片占一半宽度但要减去gap的24px否则两个卡片加间距会把容器撑破。这个calc是CSS里很实用的小技巧尤其是配合flex或grid的间距使用时很多新手容易漏掉。如果是在IE11兼容场景下gap属性是不支持的那就得改用margin来模拟间距。这段兼容性话题我放到后面单讲这里先记住一个点flex布局本身在IE11上能用但它的一些新属性如gap不行。3.2 案例页图片列表与hover效果案例页是门窗公司的成绩单放小区实拍照片。我用一个两列或三列图片清单来排。图片与图片之间不能排得太密否则看起来像在逛图库。这个页面里我会用到一段很实用的样式——让图片在鼠标移入时出现一层说明文字效果类似悬浮卡片。纯CSS就能写用绝对定位加透明度变化.case-item { position: relative; overflow: hidden; border-radius: var(--radius); } .case-item .overlay { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); color: #fff; opacity: 0; transition: opacity 0.3s ease; } .case-item:hover .overlay { opacity: 1; }鼠标移入时底部渐变浮层从透明变成可见上面写着小区名称和窗型型号。这个效果看起来很高级其实都是transition和opacity在配合。做小企业站的时候这种低成本但观感好的动效最讨喜客户会认为你很懂设计。图片尺寸方面还有个实战问题客户发来的照片分辨率天差地别有的横着有的竖着。如果直接img铺开页面就会歪七八扭。我的做法是给图片容器设置一个固定宽高比用aspect-ratio属性配合object-fit: cover.case-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }object-fit: cover会把图片按比例缩放并裁剪填满整个4:3区域而不变形。这一行代码解决了我无数个图片排版问题。不过要注意aspect-ratio在IE上是没有的如果必须兼容IE就得用经典padding-bottom: 75%的hack方式或者干脆给图片设固定高度。3.3 联系页表单元素样式重置与地图嵌入联系页是整个网站的转化出口一定要把联系电话、公司地址、联系表单这三样东西放得足够醒目。表格和地图的细节不少。表单的HTML大概是form classcontact-form action# methodpost label forname您的称呼/label input typetext idname namename required label forphone联系电话/label input typetel idphone namephone required label formessage留言内容/label textarea idmessage namemessage rows5 required/textarea button typesubmit classbtn发送留言/button /form这里有两个细节新手几乎必踩。第一浏览器默认的input和textarea样式很丑而且不同浏览器长得不一样你需要在CSS里先重置一下.contact-form input, .contact-form textarea { width: 100%; padding: 10px 14px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-family: inherit; background: #fff; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(27, 110, 90, 0.15); }font-family: inherit这段容易被忽略但不写的话表单文字字体和页面正文字体很可能不一致。focus时的边框高亮效果非常提升质感你看很多做得很糙的网页点进输入框时根本没有反馈用户会怀疑自己是不是没点上。第二嵌入地图的时候如果你直接复制百度地图的iframe你会发现它默认带个比较宽的白边。我的做法是给地图包一层容器让iframe填满整个容器div classmap-wrap iframe src... width100% height400 styleborder:0; loadinglazy/iframe /divborder:0去掉iframe边框loadinglazy让地图在滚动到该区域时才加载这个属性对首屏性能有一点帮助。如果客户所在位置比较偏地图上搜不到公司名那就在地图中心用标记点标一下附近的路口再在旁边配文字说明XX路与XX路交口东行200米。4. DOCTYPE、编码、兼容性客户用旧IE打开变形的真实教训这个项目最大的坑不是功能写不出来而是客户用旧浏览器打开时样式全乱了。这个问题我必须单独写一节因为也是纯htmlcss项目中看起来很小但杀伤力很大的一环。4.1 标准文档声明和字符编码不是摆设客户项目的HTML头我一开始是这样写的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title天津XX门窗-首页/title link relstylesheet hrefcss/style.css /head这几行看起来像是模板但每一行都有实际意义。!doctype html是文档类型声明它告诉浏览器按HTML5标准模式解析页面。如果不写这行浏览器会进入怪异模式quirks mode默认的盒模型和标准模式完全不一样你写width: 300px实际渲染出来的宽度可能就是312px多了border和padding。之前就有同事闹过笑话页面在Chrome里是好的打包发出去客户用360浏览器打开整个布局全乱了查了一天最后发现是文件被某些工具转码时把!doctype html吃掉了。html langzh-cn声明页面语言是简体中文。这个属性表面看不影响样式但它影响浏览器的自动翻译、朗读辅助工具的发音以及一些浏览器对语言的默认字体选择。做中文网站这句话一定带上而且要用zh-cn而不是zh虽然差别在老浏览器上不太明显但严谨点没坏处。meta charsetutf-8声明字符编码为UTF-8这行缺失或者顺序不对页面里的中文会有大概率乱码。尤其当你用的是Windows环境文件如果默认保存成GBK编码而HTML里声明的是UTF-8就会满屏鍏冲紡这种乱码。所以现在我每次新建HTML文件第一行就敲上完整的头并且我会随时检查编辑器右下角的编码格式是不是UTF-8。4.2 兼容性排查顺序先结构再样式最后降级说回我遭遇的客户IE问题。客户在自己电脑上打开网页在Windows 7自带的IE浏览器里打开首页的头部导航乱成了一行一行的竖排服务卡片全部堆在一起没有并排。我排查这个问题的时候一开始怀疑是flex布局的兼容性改了半天发现IE上仍然不行。后来我把页面源码另存下来在本地反复验证才找到真正的坑客户说我用IE打开但他的IE版本是IE8。IE8对HTML5元素的支持非常有限比如header、nav、section这些标签在IE8里默认是没有样式的内联元素浏览器完全不知道它们是什么自然排版就乱了。解决方式有两种一是要求客户用现代浏览器比如Chrome或Edge。很多小企业的客户根本没有浏览器版本这个概念你直接告诉他请在电脑上安装Chrome大多数人可以接受。二是做兼容处理。如果你的客户群体里有大量老设备用户你就得考虑为旧浏览器写降级样式。当时这个项目的最终解决方案是我保留了flex布局给现代浏览器同时用supports和回退样式给老浏览器做了兼容。当然对于IE这种根本不支持supports的浏览器CSS规则里前面的float布局就起作用了.service-card { float: left; width: 50%; padding-right: 12px; } supports (display: flex) { .services-grid { display: flex; flex-wrap: wrap; gap: 24px; } .service-card { float: none; width: calc(50% - 24px); } }在这个场景里老浏览器读到第一条float规则卡片并排新浏览器读到supports里的flex规则覆盖前面的定义。这种渐进增强的写法比单独维护一个老浏览器专用css文件更省事。但说实话如果你接的项目客户群是年轻用户居多的行业直接要求现代浏览器就完了不要过度迁就。我这次是因为对方公司内部电脑确实老才做的兼容。5. 把5页站做出彩的细节当前页高亮、字体渐变、流光边框、3D旋转5个页面如果只是纯文字配图做完会很素。在不引入JS的前提下CSS仍然可以做出不少让人眼前一亮的细节。这里分享几个我在项目里实际用到的点。5.1 多页站最容易忽略的标题与当前页标注多页静态站有两个地方几乎每个外包项目都会被忽略但确实影响体验第一个是每个页面的title。五个页面的title不能都写天津XX门窗而是应该区分内容。比如服务页写门窗产品与服务-天津XX门窗案例页写工程案例-天津XX门窗。这样用户浏览器开了多个标签页时能快速分辨哪个标签是哪个页面。对搜索排名也有点帮助等于免费做了基础SEO。第二个是meta namedescription每个页面单独写一句页面描述。虽然对初学者来说这个不影响视觉但客户公司将来如果要做推广这是基础中的基础。我的写法是meta namedescription content天津XX门窗公司主营断桥铝门窗、铝合金门窗定制与安装服务天津各区及周边县市提供免费上门量尺服务。还有一个很容易被忽略的细节每个页面只保留一个h1。首页的h1放公司名内页的h1放页面标题。很多新手在导航栏里用h1套logo在页面里又来一个h1这会导致一个页面出现多个一级标题对SEO是一个减分信号。我现在做页面时习惯把logo放在div或span里把唯一的h1留给真正传达页面主题的那个标题。关于当前页高亮我前面提到过。最省事的做法是给每个页面的body添加一个不同的类名然后CSS里写.main-nav .current a, .page-about .main-nav a[hrefabout.html] { color: var(--primary); font-weight: bold; }第二种写法a[hrefabout.html]是属性选择器它只在当前href匹配时生效。如果你不想在HTML里手动加current类这个写法可以自动根据URL高亮。不过个人经验是手动在HTML里给当前页导航项加classcurrent更直观维护起来不费脑。如果用了上面的属性选择器你必须在每个页面的导航link里保持href完全一致大小写、路径都不能差否则就高亮不上。5.2 低成本CSS特效渐变文字、流光边框、涟漪光圈做小企业站客户喜欢看起来高级的效果。我给你几个不依赖图片和JS、纯CSS就能落地的效果第一个是渐变文字。服务页的每个卡片标题我用了一段从左到右的绿色渐变视觉上比纯黑更有层次.card-title { background: linear-gradient(90deg, var(--primary), #2ea380); -webkit-background-clip: text; background-clip: text; color: transparent; }注意必须配合background-clip: text和color: transparent否则渐变背景会被文字盖住。-webkit-前缀主要是照顾老一点的Safari和Chrome。这个效果在Chrome、Edge、Firefox上都正常。第二个是流光边框。如果你想给某个重点卡片设计一个金属质感边框可以用conic-gradient配合伪元素实现。具体用法是给卡片外包一层带渐变背景的容器再让内层卡片挡住中间部分只露出边缘一圈渐变。代码稍长但效果很出挑适合放在服务页的第一张重点卡片上。不过我这里要提醒你一句流光边框这类动效更像按需使用的装饰不适合全站每个卡片都上。我跟同行交流时有个共识——小企业官网的动效应该克制所有动作的目的都应该是引导点击而不是炫技。客户要的是让人感觉正规不是让人头晕。第三个是涟漪光圈扩散效果。这是一个很受欢迎的热搜词场景比如在联系页的电话号码旁放一个动画圆圈暗示点这里拨打。纯CSS实现的思路是这样用::before伪元素做一个圆圈通过animation让它不断向外放大并淡出.pulse-ring::before { content: ; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); animation: pulse 1.5s ease-out infinite; } keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }这个动效和流光边框一样属于适度点缀。用在联系方式旁可以用在导航上就诡异了。这里有一个细节值得说明animation: pulse 1.5s ease-out infinite后面的infinite表示无限循环实际项目里如果是低频使用也可以控制只在hover时启用动画避免整个页面一直闪。第五个要补充的是热搜里的transform: rotateY(60deg) translateZ(300px)。这行CSS的效果是元素先绕Y轴旋转60度右侧向屏幕外转再沿Z轴正向平移300px也就是朝屏幕观察者方向平移300px。如果你把它应用在图片上会看到一个轻微的斜向飘向屏幕外的透视效果。不过这种3D旋转变换要发挥视觉意义通常需要配合perspective透视距离属性否则效果容易显得生硬。我在5页站里其实用得很克制最多用在一个装饰元素上让它有点空间感但绝不去干扰正文阅读。5.3 换行省略、删除线和文字细节页面排版中还有一个几乎必用的技巧让长文本在一行内显示超出部分用省略号。尤其是在案例页的图片说明、服务页的产品简介里不需要让整段文字全都堆出来。CSS写法.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }这三行缺一不可。white-space: nowrap让文字不换行overflow: hidden把超出的部分藏起来text-overflow: ellipsis在隐藏处显示省略号。如果想让文字保留两行再省略可以用-webkit-line-clamp.two-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这个写法只对display: -webkit-box生效兼容性上现代浏览器都没问题但老IE就不行了。实际做项目时我一般优先用第一种单行省略简单可靠。至于删除线text-decoration: line-through这个用得不多但在做价格对比、活动价上会用得到。比如服务页放活动期间旧窗无损拆换原价划掉、现价高亮就很直观。这只是一个单行CSS不需要专门记知道有这回事即可。6. 交付前的收尾本地起服务、压缩校验、给客户留说明页面做完了、样式调好了、兼容性处理完了还差最后一步。很多新手直接双击index.html预览一下没问题就发给客户这其实埋了不少隐患。我收尾的习惯固定有几步。6.1 本地起HTTP服务模拟真实访问环境直接用文件管理器双击打开HTML地址栏是file:///C:/...这种环境和你把文件传到服务器用http://访问是有区别的。尤其是如果页面里引用了外部图片、外部字体或者iframe地图file://协议下有些资源会被浏览器拦截。我的做法是在项目根目录打开终端执行一行命令python -m http.server 8080然后在浏览器里访问http://localhost:8080。这个命令会启动一个简单的本地HTTP服务器把当前目录变成网站的根目录。这一步可以完整还原线上访问环境检测出所有相对路径的坑。对于没有Python环境的Windows用户也可以用VS Code的插件Live Server原理一样。本地起服务之后我会从头到尾把5个页面全部点一遍重点检查三件事第一导航栏5个链接是否都能跳对当前页高亮是否站站正确。第二所有图片是否正常显示有没有红叉。第三表单是否能正常提交——当然这里action#不会真正提交但如果客户有后端接口我会先占位并在交付文档里写明将来对接的位置。6.2 压缩HTML和CSS控制图片体积5页站虽然不大但压缩还是会带来直观的性能提升。我的做法是HTML和CSS文件用文本压缩工具比如VS Code里的插件或者在线工具去掉多余的空格和换行。你可以对比一下原本20KB的CSS压缩后可能只剩12KB这对首屏加载有一点点帮助但这个效果对小网站而言并不显著。我更看重的是去掉代码里的调试注释和临时改的标记让最终文件干净一些。图片这块是重头戏。客户给的照片动辄5MB一张直接用的话整个页面加载会慢到让人抓狂。我在项目交付前把所有用于网页的图都用工具统一压过。具体标准是首页banner图宽度不超过1920px压缩后体积控制在200KB以内案例缩略图宽度800px左右一张控制在100KB以内公司实拍图宽度1200px左右控制在150KB以内格式选择上如果图片是照片类优先用jpg如果是带透明背景的logo或者图形用png或webp。但要注意webp在老浏览器上可能不支持如果已经决定要求客户用Chrome那可以大胆用webp。否则保险起见我仍然选择jpg/png并用工具把质量参数调低一些可视化损失几乎没有。6.3 给客户留一个改版说明.txt最后交付时除了把整个项目文件夹打包成zip我还会额外写一个改版说明.txt放在根目录里。内容大概是1. 修改电话号码打开 contact.html搜索 022-XXXXXXXX替换为新号码。 2. 修改公司地址同样在 contact.html 里搜索天津市XX区XX路XX号。 3. 替换案例图片把新图片直接覆盖 images/cases/ 里对应文件名即可注意像素不要太糊。 4. 修改首页口号在 index.html 里搜索匠心门窗 守护万家替换为新文字。这个txt文件看着不起眼但能帮你省掉大量这个怎么改的售后电话。小企业客户不懂代码但对照着文件名和关键字去改文本绝大多数人都能搞定。你也可以再进一步把网站的标题和description写清楚方便客户将来找人做推广时能看懂文件结构。项目最后我把zip发给客户对方打开之后说这回对了颜色也正了。这个项目本身技术难度不高但整个过程中那些看起来优先级很低的步骤反而决定了交付是否顺利。做这种5页静态站不要只盯着CSS炫技你要盯的是链接是否全通、中文是否不乱码、换台电脑打开是否依旧整齐。这些基础问题处理好了哪怕页面设计朴素客户也会觉得你专业。