--- title: "便利贴留言墙" summary: "彩色便利贴墙加发帖框：四种纸色、每张微微歪着、贴胶带，悬停摆正；示例里新便签只存在本机。" category: "layout (整页与区块)" origin: "original" stack: ["html","css","javascript"] tags: ["留言板","便利贴","手作感","表单"] demo: "https://zhuoqidev.com/design/demos/sticky-guestbook/" url: "https://zhuoqidev.com/design/sticky-guestbook/" license: "MIT" added: "2026-10-14" translation: "https://zhuoqidev.com/en/design/sticky-guestbook/index.md" --- # 便利贴留言墙 > 彩色便利贴墙加发帖框：四种纸色、每张微微歪着、贴胶带，悬停摆正；示例里新便签只存在本机。 ## 看点 - **像纸**：四种便签色（黄 / 粉 / 蓝 / 绿）和深色字在深浅两种主题下都不变，纸就是纸；四周是点阵纸背景，表单卡片顶上贴一条胶带。 - **歪得稳定**：每张便签的倾斜角由它的 id 算出来（`(id * 37) % 7 - 3` 度），刷新多少次都歪得一样，不会每次乱跳。 - **悬停摆正**：鼠标移上去便签转正、抬起 3px，用弹簧曲线过渡，有一点「被手指按住」的感觉。 - **刚贴上的那张**：从上方落下来、稍微放大再回弹到位；自己的便签带虚线框和「只在本机」标记，可以撕掉。 - **表单细节**：字数按字符算（一个表情算 1 个字），超了计数变红；颜色选择是藏起来的单选框，键盘也能选；内容一律用 `textContent` 放进页面，输入 HTML 也只会显示成文字。 ## 怎么用 1. 拷 `.gb-form`、`.gb-wall`、`.gb-note` 几段 CSS 和页面结构，把颜色变量换成自己的。 2. 示例为了能单独运行，留言只存在浏览器 `localStorage` 里。接到自己的网站时，在 `submit` 里改成 `fetch` 你的后端接口（POST 内容、署名、颜色），墙上的便签改成从接口取回来的列表，`card()` 渲染函数不用动。 3. 公开的留言板建议先审核再上墙：刚提交的留言先只在作者自己的浏览器里显示（就是示例里「只在本机」那种样子），审核通过后再出现在所有人的墙上。 4. 后端也要再校验一遍长度和颜色取值，前端的限制只是方便用户。 ## 坑 - 墙用 `grid` + `align-items: start`，不然同一行的便签会被拉成一样高，失去便利贴参差的感觉。 - 倾斜用独立的 `rotate` 属性而不是 `transform`，这样悬停的 `translate` 和入场动画不会把倾斜覆盖掉。 - 便签里要 `white-space: pre-wrap` 保留换行，再加 `overflow-wrap: anywhere`，不然一长串网址会把便签撑破。 - 手机上输入框字号小于 16px 时，iOS 聚焦会自动放大页面，所以输入框都设成 16px。 ## 参考实现（完整源码）在线演示：https://zhuoqidev.com/design/demos/sticky-guestbook/。单文件，存成 .html 就能打开。 ### index.html ```html 便利贴留言墙

~/guestbook/ ls notes/

✦ 留言板

随手贴张便签：读后感、想看的题目、发现的错别字，或者就打个招呼。

墙上的便签

```