内容摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>留言板网页设计代码</title> <style> body {  font-family: "Microsoft YaHei",板网 sans-serif; background: #f5f0e8; margin: 0; padding: 20px; display: flex; justify-content: center; } .board {  max-width: 600px; width: 100%; background: #fffaf2; border-radius: 12px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } h1 {  font-size: 22px; color: #4a3728; margin-top: 0; border-bottom: 2px dashed #d9c7b0; padding-bottom: 12px; } .message-form {  display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .message-form input, .message-form textarea {  border: 1px solid #d9c7b0; border-radius: 6px; padding: 8px 12px; font-size: 14px; background: #fffdf8; } .message-form textarea {  min-height: 70px; resize: vertical; } .message-form button {  align-self: flex-end; background: #8b6f52; color: white; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background 0.2s; } .message-form button:hover {  background: #6e543c; } .message-list {  list-style: none; padding: 0; margin: 0; } .message-item {  background: #f9f3e9; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; border-left: 4px solid #b89a7a; } .message-item .name {  font-weight: bold; color: #4a3728; font-size: 14px; } .message-item .time {  font-size: 12px; color: #a08c78; margin-left: 10px; } .message-item .content {  margin-top: 6px; color: #5a4a3a; font-size: 14px; line-height: 1.5; } .empty-tip {  text-align: center; color: #b8a898; font-size: 14px; padding: 30px 0; } </style> </head> <body> <div class="board"> <h1>📝 小店留言板</h1> <form class="message-form" id="msgForm"> <input type="text" id="nameInput" placeholder="你的名字（必填）" required> <textarea id="contentInput" placeholder="想说点啥？写在这里..." required></textarea> <button type="submit">贴上去</button> </form> <ul class="message-list" id="msgList"> <li class="empty-tip">还没有留言，来当第一个说话的页设人吧</li> </ul> </div> <script> const form = document.getElementById('msgForm'); const list = document.getElementById('msgList'); const nameInput = document.getElementById('nameInput'); const contentInput = document.getElementById('contentInput'); // 从 localStorage 加载已有留言 let messages = JSON.parse(localStorage.getItem('messages') || '[]'); function render() {  if (messages.length === 0) {  list.innerHTML = '<li class="empty-tip">还没有留言，来当第一个说话的计代人吧</li>'; return; } list.innerHTML = ''; messages.forEach(msg => {  const li = document.createElement('li'); li.className = 'message-item'; const now = new Date(msg.time); const timeStr = now.getFullYear() + '-' + String(now.getMonth()+1).padStart(2,'0') + '-' + String(now.getDate()).padStart(2,'0') + ' ' + String(now.getHours()).padStart(2,'0') + ':' + String(now.getMinutes()).padStart(2,'0'); li.innerHTML = '<span class="name">' + escapeHtml(msg.name) + '</span>' + '<span class="time">' + timeStr + '</span>' + '<div class="content">' + escapeHtml(msg.content) + '</div>'; list.appendChild(li); }); } // 防XSS，转义特殊字符 function escapeHtml(text) {  const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } form.addEventListener('submit',板网 function(e) {  e.preventDefault(); const name = nameInput.value.trim(); const content = contentInput.value.trim(); if (name === '' || content === '') return; messages.unshift({  name: name, content: content, time: Date.now() }); // 只保留最近50条，防止localStorage撑爆 if (messages.length > 50) messages.length = 50; localStorage.setItem('messages',页设 JSON.stringify(messages)); nameInput.value = ''; contentInput.value = ''; render(); }); render(); </script> </body> </html> 

---

这段代码做了一件很朴素的事——让访客留句话，然后永久存下来。计代我故意没用后端，板网纯靠浏览器 localStorage 撑场子。页设数据存在访客自己的计代电脑上，刷新不丢，板网但换个浏览器就看不见了。页设这种取舍挺有意思：省了服务器成本，计代却也牺牲了跨设备同步。板网小店老板要是页设真想收集顾客反馈，这招肯定不行，计代但做个人网站或者内部测试，绰绰有余。 样式方面我选了暖色调，米黄背景配深棕文字，像老式咖啡馆的留言簿。那个虚线分隔线，是我故意加的，模仿纸质笔记本撕下来的边缘感。按钮做成圆角胶囊形状，悬停时颜色变深，这种小交互不需要复杂动画，但手感会舒服很多。 表单提交逻辑里有个细节：我用 `unshift` 把新留言插到数组开头，而不是 `push` 追加到末尾。这样最新留言永远显示在最上面，访客打开页面第一眼就能看到刚写的内容，不用滚到底部。留言超过50条就截断，这个数字是我拍脑袋定的，考虑到 localStorage 有5MB上限，每条留言按200字符算，50条也就10KB，绰绰有余。 防 XSS 那段 `escapeHtml` 函数，很多人会忽略。如果直接拼接用户输入到 innerHTML，有人写个 `` 就能弹窗。我用 textContent 转义一遍，把尖括号变成实体字符，显示出来还是原样，但浏览器不会执行。这种安全问题在纯前端项目里容易被轻视，但养成习惯总没坏处。 时间格式化那几行，我写得很啰嗦，又是 padStart 又是手动拼字符串。其实用 `toLocaleString` 一行就能搞定，但那个输出格式带英文月份，中文界面看着别扭。手动拼虽然代码长，至少保证了“2025-3-14 09:30”这种一眼能读懂的格式。 整个页面没有用任何框架，CSS 就几十行，JS 也是原生操作 DOM。这种写法放在今天有点“返祖”，但好处是零依赖，复制到任何 html 文件里双击就能跑。真要做个功能完整的留言板，还得配后端和数据库，可那就超出“网页设计代码”的范畴了。这版代码的价值在于：它展示了前端存储、渲染、交互的基本套路，够教学用，也够小场景折腾。要是你想升级，加个删除按钮、按时间排序切换、甚至导出留言为文本文件，都是现成的思路。