标题
马年大吉酒桌马年酒桌语” 为主题的 HTML 单页
逍遥 - 02月15日 21:18
48℃ 0
内容
代码关键升级 / 调整说明
- 场景适配优化：
标题装饰元素替换为「酒杯🍶+ 小马🐴」，更贴合酒桌场景；
新增「场景标签」（通用酒局 / 商务酒局 / 亲友欢聚 / 年轻朋友），快速区分适用场景；
新增「酒桌使用小技巧」独立模块，补充实用的敬酒礼仪和话术改编建议。
- 交互与样式细节：
行高调整为
1.8，让酒桌语文字阅读更舒适；技巧模块用暖橙色边框 / 标题色，与祝福语卡片的红色形成区分，视觉层次更清晰；
保留一键复制功能，复制提示框 2 秒后自动消失，不干扰操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>马年大吉 - 酒桌祝福语</title> <style> /* 全局样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", 微软雅黑, sans-serif; } /* 页面背景与整体布局 */ body { background-color: #fdf2e9; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e63946' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); padding: 20px; line-height: 1.8; /* 酒桌语换行更舒适 */ } /* 页面标题样式 */ .header { text-align: center; margin-bottom: 40px; padding: 20px 0; background-color: #e63946; color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(230, 57, 70, 0.3); position: relative; overflow: hidden; } .header h1 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); animation: fadeInDown 1s ease; } .header p { font-size: 1.2rem; opacity: 0.9; animation: fadeInUp 1s ease 0.3s both; } /* 装饰元素 - 酒杯+小马图标 */ .header::before { content: "🐴"; font-size: 3rem; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); animation: bounce 2s infinite; } .header::after { content: "🍶"; /* 酒杯图标更贴合酒桌场景 */ font-size: 3rem; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); animation: bounce 2s infinite 0.5s; } /* 酒桌语分类容器 */ .toast-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; } /* 酒桌语卡片样式 */ .toast-card { background-color: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; border-top: 5px solid #e63946; } .toast-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); } .toast-card h2 { color: #e63946; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px dashed #f8c5c8; font-size: 1.5rem; } /* 场景提示标签 */ .scene-tag { font-size: 0.85rem; color: #fff; background-color: #f77f00; /* 暖橙**分场景 */ padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; display: inline-block; } .toast-card ul { list-style: none; margin-bottom: 15px; } .toast-card li { padding: 12px 0; border-bottom: 1px solid #f5f5f5; color: #333; font-size: 1.1rem; animation: fadeIn 0.8s ease; } .toast-card li:last-child { border-bottom: none; } /* 复制按钮样式 */ .copy-btn { margin-top: 10px; padding: 8px 15px; background-color: #e63946; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.3s ease; } .copy-btn:hover { background-color: #d62828; } /* 酒桌小技巧模块 */ .tips-card { max-width: 1200px; margin: 40px auto 20px; background-color: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); border-left: 5px solid #f77f00; } .tips-card h2 { color: #f77f00; margin-bottom: 15px; font-size: 1.5rem; } .tips-card ul { padding-left: 20px; color: #333; font-size: 1.1rem; } .tips-card li { margin-bottom: 10px; } /* 响应式调整 */ @media (max-width: 768px) { .header h1 { font-size: 2rem; } .toast-container { grid-template-columns: 1fr; } .tips-card { margin: 20px auto; padding: 20px; } } /* 动画效果 */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes bounce { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-60%); } } /* 提示框样式 */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 10px 20px; border-radius: 5px; opacity: 0; transition: opacity 0.3s ease; z-index: 9999; } .toast.show { opacity: 1; } </style> </head> <body> <!-- 页面头部 --> <div> <h1>马年大吉 酒桌贺词</h1> <p>举杯迎马年，把酒话吉祥！</p> </div> <!-- 酒桌语内容区域 --> <div> <!-- 通用敬酒版 --> <div> <span>通用酒局</span> <h2>通用敬酒版</h2> <ul> <li>马年举杯，万事顺遂！我敬大家一杯，愿咱们龙马精神，喝了这杯酒，日子红似火，事业马到成功！</li> <li>金驹迎春，美酒添福！这杯酒，祝各位新岁扬鞭奋进，一马平川，喝好、玩好、万事好！</li> <li>马年行大运，酒浓情更浓！敬在座各位，愿大家财运如万马奔腾，福气如快马加鞭，干了这杯！</li> </ul> <button onclick="copyToast(this)">复制本类酒桌语</button> </div> <!-- 商务酒局版 --> <div> <span>商务酒局</span> <h2>商务酒局版</h2> <ul> <li>策马迎新岁，携手赢未来！敬X总/各位合作伙伴，愿咱们新的一年事业一马当先，合作马不停蹄，这杯我干了，您随意！</li> <li>值此马年新春，以酒为媒，敬各位一路相伴！愿贵公司龙马呈祥，大展宏图，财源广进，我先敬大家一杯！</li> <li>马年启新程，酒香聚宾朋！感谢各位的支持与信任，这杯酒祝大家前程似锦，步步登高，万事兴“马”！</li> </ul> <button onclick="copyToast(this)">复制本类酒桌语</button> </div> <!-- 亲友欢聚版 --> <div> <span>亲友欢聚</span> <h2>亲友欢聚版</h2> <ul> <li>马年碰杯，快乐翻倍！兄弟们/家人们，喝了这杯酒，愿咱们新岁没烦恼，日子策马奔腾，越过越有！</li> <li>小马送福，酒暖心头！敬各位亲人，愿咱们阖家幸福，身体龙马精神，喝好喝尽兴，马年行大运！</li> <li>举杯迎马年，万事都如愿！走一个！祝大家吃好喝好，新的一年干啥都“马”上成，干啥都“马”上有！</li> </ul> <button onclick="copyToast(this)">复制本类酒桌语</button> </div> <!-- 趣味俏皮版 --> <div> <span>年轻朋友</span> <h2>趣味俏皮版</h2> <ul> <li>马年喝好酒，好运跟你走！这杯我敬你，愿你新岁“狂飙”向前，赚钱快马加鞭，干了！</li> <li>解锁马年酒局buff！碰个杯，祝兄弟们马年不emo，快乐不停歇，酒喝够，事顺意！</li> <li>骑上好运小马，干了这杯烈酒！祝大家马年吃喝不愁，快乐无忧，举杯！</li> </ul> <button onclick="copyToast(this)">复制本类酒桌语</button> </div> </div> <!-- 酒桌使用小技巧 --> <div> <h2>酒桌使用小技巧</h2> <ul> <li>敬酒时可结合对方身份调整话术（如对长辈加“祝您身体健康”，对晚辈加“愿你前程似锦”）；</li> <li>语速放缓、语气真诚，简短有力的话术更适配酒桌节奏，避免过长；</li> <li>灵活改编：比如“敬X哥一杯，马年祝你干啥都马到成功，喝了这杯，全年顺风顺水！”；</li> <li>敬酒礼仪：起身举杯，杯沿略低于长辈/领导杯沿，更显得体。</li> </ul> </div> <!-- 复制提示框 --> <div id="toast">复制成功！</div> <script> // 复制酒桌语函数 function copyToast(btn) { // 获取当前卡片下的所有酒桌语 const card = btn.parentElement; const lis = card.querySelectorAll('li'); let text = ''; lis.forEach((li, index) => { text += `${index + 1}. ${li.textContent}\n`; }); // 复制到剪贴板 navigator.clipboard.writeText(text).then(() => { // 显示提示框 const toast = document.getElementById('toast'); toast.classList.add('show'); // 2秒后隐藏提示框 setTimeout(() => { toast.classList.remove('show'); }, 2000); }).catch(err => { alert('复制失败，请手动复制！'); console.error('复制失败:', err); }); } // 页面加载完成后给每个酒桌语li添加延迟动画 document.addEventListener('DOMContentLoaded', () => { const lis = document.querySelectorAll('.toast-card li'); lis.forEach((li, index) => { li.style.animationDelay = `${index * 0.1}s`; }); }); </script> </body> </html>
你可能想看：
标签
- 最近发表
- 相关推荐
-
- WordPress主题模板_WP中文社区论坛主题_zibll主题_子比主题官网
- 赞助我们HTML页面
- HTML美食大转盘，想吃什么而犹豫不决的最佳选择
- 个人相册小广场，类似于图片墙，HTML体积小不占地方，喜欢的快来使用
- 简约代挂引导页HTML源码，全自动代挂无需你操心
- 网站暂时闭站公告纯HTML，一键部署源码
- 时空穿越 · 闭站公告纯HTML
- HTML5 + Web Audio API + lamejs 实现的音频在线剪切助手源码
- 随机美女热舞HTML 页面包含样式美化和随机切换逻辑。
- 智能网页工作便签备忘录包含 HTML 结构、CSS 样式、基础 JavaScript 交互
- 文字转PNG和ICOHTML+CSS+JavaScript+Canvas，结合js-ico库实现 ICO 格式
- 引导页html5源码Notepad++、VS Code
- 高频 HTML 代码片段和高频 CSS 代码片段
- 网站跳转HTML代码GO跳转导航网站必备广告必备跳转
- 网站导航页面，引导页HTML，自带子页面