以下是一个HTML生日祝福网页的例子,使用粉色主题:
复制
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生日祝福网页</title> <style> body { background-color: #fce4ec; font-family: Arial, sans-serif; text-align: center; padding: 20px; } h1 { color: #f48fb1; } p { color: #ff80ab; font-size: 18px; line-height: 24px; margin-bottom: 20px; } .cake { width: 200px; margin: 0 auto; } .message { color: #f06292; font-weight: bold; } </style> <h1>生日快乐!</h1> <img class="cake" src="cake.png" alt="生日蛋糕"> <p class="message"> 祝你在新的一年里,天天开心,事事顺利! </p> <p> <a href="https://www.example.com">点击这里</a> 查看更多祝福。 </p>
复制
在这个例子中,网页的背景颜色为粉色(#fce4ec),标题使用了淡粉色(#f48fb1)的字体颜色,正文和消息使用了亮粉色(#ff80ab)的字体颜色。蛋糕图片被居中显示,点击“点击这里”可以跳转到更多祝福的链接。
你可以将代码复制到一个文本编辑器中,将蛋糕图片替换为你自己想要的图片,然后将文件保存为.html
扩展名,即可在浏览器中打开查看效果。记得将cake.png
替换为你的图片文件名,并将图片文件与HTML文件放置在同一个目录下。