写一个生日祝福网页代码
时间: 2023-10-19 16:07:48 浏览: 190
生日祝福代码
以下是一个简单的生日祝福网页的示例代码,包括 HTML、CSS 和 JavaScript:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生日快乐!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>生日快乐!</h1>
<p>祝你生日快乐,天天开心!</p>
<img src="birthday-cake.jpg" alt="生日蛋糕">
<button onclick="playSong()">播放生日歌</button>
<audio id="birthdaySong" src="birthday-song.mp3"></audio>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
#container {
text-align: center;
margin-top: 50px;
}
h1 {
font-size: 48px;
color: #ff69b4;
}
p {
font-size: 24px;
color: #333;
}
img {
width: 400px;
height: 400px;
margin-top: 50px;
}
button {
background-color: #ff69b4;
color: #fff;
padding: 10px 20px;
font-size: 24px;
border: none;
border-radius: 5px;
margin-top: 50px;
cursor: pointer;
}
button:hover {
background-color: #ff1493;
}
```
JavaScript:
```javascript
function playSong() {
var audio = document.getElementById("birthdaySong");
audio.play();
}
```
在上面的示例中,HTML 代码包括一个标题、一段文本、一张图片、一个播放歌曲的按钮和一个 audio 元素,用于播放生日歌。CSS 代码用于布局和样式。JavaScript 代码用于控制播放生日歌的功能。请注意,如果要使用这些代码,需要将图片和音乐文件替换为自己的。
阅读全文