今天想弄个网站模板，结果发现网上那些现成的模板要么太花哨要么用起来别扭。干脆自己动手写个简单的，反正就是练练手。

先从最基础的架子搭起

我打开编辑器新建了个html文件，顺手把结构标签敲上去。脑袋里琢磨着反正就是展示些文字图片，干脆分成头部、内容区和底部三块。对着空白文档发了会儿呆，决定先给头部加个导航栏，用ul糊了几个链接凑数。

• 首页链接扔最前面
• 中间塞两个栏目占位置
• 补个联系方式的假链接

折腾样式的时候最头疼

接着新建css文件开始调布局。把导航栏改成横排时差点忘了加float，刷新页面看到链接竖着排成一列当场笑出声。调颜色时试了五六种蓝，选了个最顺眼的藏青色。给内容区加内边距时手抖多按个零，整个版面向右飘出去老远，赶紧撤回重改。

最麻烦的是处理图片自适应，明明设置了max-width:100%却总被父元素挤变形。蹲在电脑前啃了半小时面包才想起来检查盒模型，果然忘了设置box-sizing。改完再看图片终于老实缩在容器里，顺手给图片角落加了点阴影效果。

临时起意加交互效果

本来打算纯静态完事，但看导航栏太单调就手痒加了js。写鼠标悬停高亮时把hover错写成hober，调试半天发现控制台报错才反应过来。给按钮写点击事件时差点用alert做反馈，幸好及时改成修改文字颜色。给页面滚动的锚点链接加了段平滑移动的代码，虽然只是简单的scrollTop但看着挺丝滑。

完工时已经晚上十点多，把浏览器窗口拖来拖去检查不同尺寸下的显示效果。手机上看小图排版有点挤，但实在懒得写媒体查询了。关电脑前把文件打包扔进硬盘角落，说不定下回改改又能当成新模板用。