制作一个以html为格式的生日祝福
时间: 2024-10-01 09:09:21 浏览: 16
当然可以,这是一个简单的HTML格式的生日祝福页面示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f7f7f7;
}
h1 {
color: #ff69b4;
margin-top: 50px;
}
p {
color: #666666;
padding: 20px;
}
button {
display: block;
width: 150px;
height: 50px;
background-color: #ff69b4;
border: none;
color: white;
cursor: pointer;
margin: 50px auto;
}
button:hover {
background-color: #d54e21;
}
</style>
</head>
<body>
<h1>祝你生日快乐!</h1>
<p>今天是一个特别的日子,愿你的生活充满阳光和欢笑,每一个愿望都能如愿以偿。</p>
<button onclick="showMessage()">发送祝福</button>
<div id="message" style="display:none;">
<p>已为你送上最诚挚的祝福,希望你度过一个美好的一天!</p>
</div>
<script>
function showMessage() {
document.getElementById("message").style.display = "block";
}
</script>
</body>
</html>
```
在这个例子中,我们创建了一个带有标题、祝福语以及一个点击后显示祝福消息按钮的HTML页面。当用户点击按钮时,JavaScript会控制隐藏的消息块显示出来。
阅读全文