今天正好要给公司的一个老网站换模板，之前那个界面实在太土了，客户总抱怨找不到按钮。我就想着自己动手改改看，反正用的是*，听说改起来不难。

先搞清楚模板文件在哪儿

我打开Visual Studio，找到那个网站项目，第一件事就是满世界找模板文件。折腾了半天才发现，原来那些页面布局和样式都放在MasterPage文件和Theme文件夹里。主模板叫*，里面管着整个网站的头部导航和底部版权这些公共部分。

动手改导航菜单

原来的菜单是竖着排的，点起来特别别扭。我直接打开*文件，找到nav那堆代码，把ul标签的样式改成了inline-block。改完顺手调了调颜色，把那个扎眼的亮蓝色换成了沉稳的深灰色。

• 把竖排菜单改成横排
• 调整了菜单项的间距
• 统一了按钮的圆角大小

折腾样式表的时候踩了坑

本来想换个字体，结果改完CSS发现页面根本没变化。急得我刷新了十几遍浏览器，才发现是缓存搞的鬼。清空缓存再一看，新字体总算显示出来了。还有个图片路径问题，因为模板里用了相对路径，我移动文件夹后图片全裂了，只好老老实实改回绝对路径。

给内容页加了个侧边栏

想着客户可能需要快速入口，我又在ContentPage里加了侧边栏。先用div划出区域，然后塞进去常用功能链接。测试的时候发现宽度没算对，侧边栏把正文挤变形了，赶紧调了调CSS的浮动参数。

把整个项目重新生成了一遍，本地跑起来点点每个链接，确认没报错才打包部署。虽然改的时候手忙脚乱的，但看着最终成品还挺有成就感。下次再改模板估计能快不少，关键就是要先摸清文件结构，别像我一开始那样瞎找。