今天想聊聊做标准网站模板这事儿。一开始我也没想那么多，就是觉得每次建新网站都得从头写代码，太麻烦了，浪费好多时间。

为啥要搞这个模板

前阵子接了个小活儿，给一个开小店的朋友做个展示页面。需求特别简单，就是放点产品图片、联系方式、店铺地址这些。我想这还不简单，唰唰唰就开始写HTML和CSS了。

结果写着写着发现，每次都是那几样东西：导航栏、页头大图、内容区域、页脚版权信息。结构都差不多，就是内容换一换。我就琢磨，能不能把这些重复的部分打包成一个固定的模板，下次直接用？

开始动手折腾

说干就干。我先打开代码编辑器，新建了一个文件夹。第一步就是把最基础的HTML骨架搭起来，就是那个!DOCTYPE声明、html、head、body这些必备标签。

然后我开始一块一块地拼：

• 先搞导航栏，用nav标签包起来，里面放几个a链接。
• 接着是页头，放了个大大的h1标题和一段介绍文字。
• 主要内容区用了main标签，里面先空着，打算以后放具体内容。
• 是页脚，写了个版权声明和年份。

结构弄好了，就开始调样式。我建了个CSS文件，把导航栏弄成横着排的，链接颜色调成蓝色，鼠标放上去变个色。页头给个背景色，标题字体调大。页脚放到最下面，背景弄成深灰色，文字变成白色。

遇到的坑

你以为这就完了？哪有那么简单。我最开始用浮动布局，结果在不同尺寸的屏幕上看起来乱七八糟的。手机上看导航栏都挤成一团了。

后来改用了Flexbox，感觉顺手多了。元素排列听话了不少，响应式的问题也基本解决了。我还加了媒体查询，让小屏幕上的导航栏变成竖着排列的。

还有个问题是图片自适应。一开始图片老是超出容器，后来设置了max-width: 100%才搞定。

最终成果

反反复复改了大概三四天，总算是弄出了一个能看的模板。这个模板包含了：

• 响应式导航栏
• 可替换的页头横幅
• 灵活的内容区域
• 自适应的网格布局
• 统一的样式规范

现在我再给朋友做简单网站，直接拿这个模板改改文字和图片，半天就能交活儿，省了不少力气。

虽然这个模板可能比不上那些专业的框架，但对我来说够用了。最重要的是，这个过程让我对网站结构有了更深的理解，下次再优化就知道该从哪儿下手了。