留言板模板这东西，网上能搜到几百个版本。但大部分要么塞了一堆用不上的 CSS 框架，要么把结构搞得像迷宫。上面那个是我自己写博客时顺手整理的，只保留最必要的部分：一个带昵称和内容的表单，一个展示留言的列表。没有分页，没有头像上传，没有富文本编辑器——那些都是后话。

为什么强调“手写”？因为你看那些用 Bootstrap 或者 Tailwind 快速搭出来的留言板，代码里全是 class="mb-3 col-md-6" 之类的工具类，改起来反而费劲。我这个模板里所有样式都写在 <style> 里，一共不到 80 行。你甚至可以直接把 <style> 块删掉，纯 HTML 也能看——只是丑一点，但结构清清楚楚。

说个具体的细节：留言列表里我给每条留言加了一个左边框，颜色是 #dacbbd，暖灰调。这个颜色不是随便选的，它和背景 #fcfbfa 搭配起来不刺眼，又比纯灰色多一点温度。如果你把边框改成 #cccccc，整个留言板立刻变得像企业后台。这种细微的差别，在模板里往往被忽略。

还有一个容易踩的坑：表单的 onsubmit 我写的是 alert('演示模板，不会真的提交。'); return false;。很多人复制模板的时候把这行删了，结果一点“发布留言”页面就刷新，留言也没了。如果你不想写后端，至少可以用 localStorage 存几条假数据。但那是另一个话题了。

最后提一下响应式。这个模板没有写媒体查询，因为默认的 max-width: 760px 和 padding 已经能在手机上正常显示。输入框宽度是 100%，按钮会自动换行。如果你非要加媒体查询，我建议只改一下 margin 和 padding，别动布局——留言板不需要花哨的栅格。

有人问我为什么不加“回复”功能。加了回复，就得有嵌套结构，有父子关系，有折叠展开。一个静态 HTML 模板扛不住这些。真要那种功能，去用现成的评论系统，比如 Waline 或者 Twikoo。这个模板的定位就是：你有一个小网站，想放个简单的留言本，不想折腾数据库，也不想引入第三方服务。那就复制上面的代码，改改颜色和文字，收工。

对了，留言时间我写的是“2025-03-21 14:07”这种格式。你也可以换成“3分钟前”之类的相对时间，但那就需要 JavaScript 了。静态模板就老老实实写死时间，或者留空让使用者自己填。别为了一个时间格式把整个模板搞复杂。

如果你真的把它用起来了，记得把 onsubmit 里的 alert 换成你自己的逻辑。哪怕只是 console.log 一下，也比弹窗强。我见过一个网站上线了三个月，留言按钮点下去还是弹“演示模板”，用户都以为网站坏了。