今天想聊聊做网站模板这事儿，一开始我压根没想搞什么模板，就是自己手痒想弄个简单页面练练手。

为啥突然想搞这个

前几天翻电脑发现两年前写的网页代码，打开一看差点没笑出声。布局歪歪扭扭，图片大小都不统一，简直没法看。我就琢磨着重新写个规整点的当样板，以后要用直接复制改改就行。

从画草图开始折腾

我先抓了张废纸画布局，最上面肯定得有个横幅，左边导航栏，右边主要内容区，底下再来个页脚。画完觉得太普通，又把导航栏改成顶部横条，这样看起来利索点。

• 用铅笔涂改了三遍布局草图
• 把手机里存的各种网站截图翻出来参考
• 决定用最经典的"上中下"结构

打开编辑器动手写

打开代码编辑器先敲基础框架，html头尾标签这些闭着眼睛都能打。然后开始堆div盒子，给每个区域都加上醒目的背景色，这样调试时候一眼就能看出谁是谁。

写到导航栏时卡壳了，本来想用表格排版，后来发现用ul列表加浮动更灵活。就是浮动总出问题，调了半小时才把菜单项横过来排列整齐。

明明设置了宽度百分比，换个浏览器就乱套。只好给图片外套个div限定最大宽度，再让图片按比例缩放，总算搞定不同屏幕的显示问题。

东拼西凑搞样式

css写得我直挠头，颜色搭配试了十几种方案。先试了蓝配白显得太冷清，又试橙配黑看着像万圣节，用了浅灰配深蓝才顺眼。

• 边框圆角改了五次数值才找到合适的弧度
• 字体大小用rem单位代替px，方便后期调整
• 给按钮加了鼠标悬停变色效果

中途还遇到个坑：页脚死活不肯乖乖呆在页面底部，内容少的时候它就悬在半空中。查了半天才知道要用定位布局解决，白浪费两小时。

总算搞出个雏形

折腾到半夜终于弄出个能看的模板，虽然粗糙但结构清晰。把重复使用的导航和页脚单独存成片段，内容区留了大片空白方便以后填充。

现在这个模板已经扔进我的资源文件夹吃灰了，不过下次再要做类似页面就能省不少事。要是你们想自己搞，记住别追求太花哨，先把基础框架搭牢固最重要。