首页中秋节网页设计Html代码

中秋节网页设计Html代码

时间: 2024-09-15 09:00:45 浏览: 81

中秋节网页设计可以包含节日元素、祝福语以及交互功能，下面是一个简单的HTML结构示例，你可以根据需要添加CSS样式和JavaScript效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>中秋快乐</title> <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; } .moon { width: 200px; height: 200px; border-radius: 50%; background-color: #d7e4b7; /* 月色 */ display: flex; justify-content: center; align-items: center; position: relative; } .rabbit { color: #fff; font-size: 50px; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); } .greeting { text-align: center; padding-top: 100px; } </style> </head> <body> <div class="moon"> <img src="moon.png" alt="月亮">  </div> <div class="rabbit"><span id="rabbit">玉兔</span></div> <div class="greeting"> <h1>中秋快乐！<br>愿您的生活像这圆月一样，团团圆圆。</h1> <p><input type="text" placeholder="写下您的祝福..."></p> <button onclick="sendGreeting()">发送祝福</button> </div> <script> function sendGreeting() { const input = document.querySelector('input'); const rabbit = document.getElementById('rabbit'); const blessing = input.value; if (blessing) { rabbit.textContent += ' ' + blessing; input.value = ''; } else { alert("请输入您的祝福！"); } } </script> </body> </html> ``` 在这个例子中，我们创建了一个带有月亮和兔子图像的简单布局，并设置了输入框供用户发送祝福。当点击按钮时，会获取用户的输入并显示在兔子的文字后。

阅读全文