今天想聊聊办公网站模板这个事儿，一开始我也没想明白该从哪儿下手。

为啥突然搞这个？

上周接了个小活儿，帮朋友公司弄个内部用的办公网站。本来想着随便找个现成的改改就行，结果一看那些模板要么太花哨，要么功能缺胳膊少腿。干脆自己动手搭一个算了，反正最近活儿不多。

先从最简单的开始

我打开编辑器新建了个文件夹，名字就叫"办公模板"。先画了个最基础的页面框架，顶部放导航栏，左边搞个菜单列表，右边留出大片空白放内容。用CSS调了半天间距和颜色，光是一个按钮的阴影就反复改了五六次。

• 导航栏：固定了公司logo和几个主要栏目
• 侧边菜单：加了折叠功能，不然页面太挤
• 内容区：留了足够的边距，看着舒服

遇到个头疼的问题

做到响应式布局时彻底卡壳了。手机上看总有个侧边栏会跑到底部，把主要内容挤变形。后来发现是某个div没设最大宽度，改完又发现平板设备上图片显示不全。来来回回调试了三个多小时，把媒体查询的断点全重写了一遍才搞定。

往里塞实际功能

基础框架搭好后开始添加具体模块。公告栏用了滚动效果，通讯录做了按部门筛选，还有个简单的文件上传区。最麻烦的是日程表组件，光是让不同颜色的日程块对齐就费老大劲。

• 公告系统：支持富文本编辑
• 通讯录：可以按拼音首字母快速查找
• 文件管理：简单做了个拖拽上传

收尾的折腾

整体功能都做完后，发现加载速度特别慢。查了半天发现是图片没压缩，有个背景图居然有3MB多。压缩完图片又给CSS和JS文件做了合并，加了个加载动画遮罩。测试的时候让同事用不同浏览器打开，果然IE又出幺蛾子——日期组件显示不正常，只能单独写个兼容方案。

现在这个模板已经交给朋友公司试用了，反馈说基本够用。虽然还有很多可以优化的地方，但第一次做这种办公类的模板，能跑起来就算没白折腾。下次再改进的话，打算把消息推送功能做得更智能些。