我们以前到底浪费了多少时间？

做企业站这活儿，看着简单，但要命的是重复。我每年都得帮公司弄个三五个新项目，有时候是部门介绍页，有时候是活动专题页，反正底下的东西总是换汤不换药。每次都得重新搭一遍架子，从头开始写导航栏，写页脚，调整那个该死的响应式布局。费劲！

一套下来，顺利的话两天，不顺利卡在某个浏览器兼容问题上，三天四天就过去了。算下来，光是搭架子就占了项目总时长的一半。我觉得这简直是糊弄自己，必须得搞一套通用的东西出来，把所有重复的活儿一次性干完。这，就是我做模板的起点。

我怎么定义这个“万能”模板？

我就把公司这几年所有的网站都翻出来看了一遍。我发现，虽然内容不一样，但架子是死的。无非就是：

• 顶部都有Logo和导航。
• 中间总有那么几个内容区，比如产品介绍、联系我们、新闻列表。
• 底部永远是版权信息和备案号，样式基本不变。

抓住了这几点，我就知道这个模板要长啥样了。我决定：架子定了，内容就活了。我先找了一张空白的画布，啥多余的东西都没有，直接开干！

动手！从零开始搭骨架与模块化

我做这个模板，主要是分了四个大步。

第一步，先把骨架子支起来。我用最简单的HTML，写了header、main和footer这三个大区。我没用什么大框架，自己写了一套简单的CSS，主要是用来做那个屏幕自适应的。手机看电脑看都能自动适应，这个必须弄不然每次都得调死人。

第二步，拆零件。我把header和footer单独拿了出来，让它们独立于main区域。这样以后换新的项目，只需要改动核心的main区域内容，header和footer直接复制过去就能用，不用担心把代码弄乱了。这个办法特好使，节省了我反复复制粘贴的时间。

第三步，品牌色大统一。我把我们公司那一套固定的颜色、字体大小、按钮样式，全部写进了一个核心CSS文件里。以后做新站，只要一导入这个CSS，站点的颜色基调和按钮风格就统一了，不用反复问市场部“我们这回的蓝色到底用哪个色号”。所有的基本样式，一次性写死，永久复用！

第四步，内容区区块化。我在main区域设计了几个常用的模块样式，比如“两栏图文”、“三列卡片”、“联系表单”等等。我的思路是把样式写内容空着。比如两栏图文，你把图片和文字往里一套，它自动就会分成两列，不用你再写一遍布局或者样式。

效果：以后别再从零开始了，直接复制！

我现在做新网站，流程简单得让人舒服：

• 找到这个模板文件夹。
• 复制，改个名字。
• 把原来那些示例图片和文字换成新的内容。

几小时，一个新站的骨架就搭好了，而且风格统一，移动端适配也没问题。以前要两天的工作，现在半天搞定。剩下的时间，我就可以踏踏实实地去写那些功能复杂的JS代码，或者去优化页面内容了。这套模板，真的是把重复劳动的时间全给我省出来了，少走了多少弯路！你要是天天在重复搭架子，听我的，赶紧自己也搞一个，绝对划算！