今天琢磨集团网站模板这事，纯粹是因为上周开会领导提了一嘴，说现在的官网太老旧，想统一换个新面貌。我寻思这活儿不难，正好练练手。

先找参考

我第一反应是打开几个大集团的官网，挨个看了一遍。发现现在流行简约风，导航栏清晰，重点突出业务介绍和新闻动态。颜色嘛基本都是蓝色系或者深灰色，显得稳重。我拿着小本本记了几个布局特点，比如banner图要大，下面紧跟三四个业务板块图标，再往下是新闻列表。

动手画草图

参考看得差不多了，我就打开设计软件，开始画首页的线框图。先拉个顶部区域，放logo和导航菜单，中间留个大横幅位置，底下规划三列内容区。画着画着发现不对劲——领导要求每个子公司都要有独立页面入口，这导航栏肯定放不下。得，赶紧改方案，在顶部加了个“旗下业务”的下拉菜单。

折腾代码

草图定稿后，直接打开编辑器写html。先搭框架，用div把头部、主体、脚部分开。写css的时候最头疼，调间距调了半天才对齐。特别是导航栏的hover效果，试了三种颜色才选中合适的蓝色渐变。响应式布局更是磨人，用media query调了一下午，手机上看总算不会错位了。

填内容碰壁

模板骨架搭好之后，找行政部门要资料填内容。结果发现子公司logo尺寸五花八门，有的还是带背景的png图。只好临时学了下图片批量处理，用脚本统一改成白底正方形。新闻列表更麻烦，后台字段和模板对不上，又返工改了两遍数据结构。

验收

今天上午给领导演示的时候，他指着脚注位置说要把电话号字体调大。改完第三版终于过关了。现在回头看，这种集团网站看着简单，实际要考虑的细节真不少。光是协调不同部门的内容规范就够喝一壶的。不过模板跑通之后，后面其他子站直接套用就轻松多了。