生日快乐网页示例

Usinian

已于 2023-03-22 22:52:07 修改

阅读量2.3k

点赞数 4

文章标签： html css javascript 前端 php

于 2023-03-22 22:38:20 首次发布

本文链接：https://blog.csdn.net/weixin_64542139/article/details/129721120

版权

以下是一个简单的生日快乐网页示例，你可以根据你的需要进行修改：

<!DOCTYPE html>
<html>
<head>
	<title>生日快乐！</title>
	<style type="text/css">
		body {
			background-color: #F9D5E3;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 50px;
		}
		h1 {
			font-size: 48px;
			color: #FF69B4;
			margin-bottom: 20px;
		}
		p {
			font-size: 24px;
			color: #333;
			margin-bottom: 40px;
		}
		img {
			max-width: 100%;
			height: auto;
		}
	</style>
</head>
<body>
	<h1>生日快乐！</h1>
	<img src="https://example.com/birthday.png" alt="生日快乐">
	<p>祝你生日快乐，万事如意！</p>
</body>
</html>

这是一个非常基本的网页模板，其中包括一个带有标题和祝福消息的标头，以及一个用于显示生日祝福图像的图像元素。请注意，该模板的样式已设置为默认的 Arial 字体、淡粉色背景和一些基本的文本和图像调整。

你可以使用该模板作为起点，根据需要自定义其样式、布局和内容。例如，你可以更改背景颜色、添加更多文本、添加音乐等等。
一下是优化后的

<!DOCTYPE html>
<html>
<head>
	<title>生日快乐！</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			background-color: #F9D5E3;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 50px;
		}
		h1 {
			font-size: 48px;
			color: #FF69B4;
			margin-bottom: 20px;
		}
		p {
			font-size: 24px;
			color: #333;
			margin-bottom: 40px;
		}
		img {
			max-width: 100%;
			height: auto;
			margin-bottom: 40px;
			border: 5px solid #FF69B4;
			box-shadow: 5px 5px 10px #888888;
		}
		button {
			background-color: #FF69B4;
			color: #fff;
			font-size: 18px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin-bottom: 20px;
		}
		button:hover {
			background-color: #FF7FAB;
		}
	</style>
</head>
<body>
	<h1>生日快乐！</h1>
	<img src="https://example.com/birthday.png" alt="生日快乐">
	<p>祝你生日快乐，万事如意！</p>
	<button onclick="playMusic()">播放音乐</button>
	<audio id="music" src="https://example.com/happy-birthday.mp3"></audio>
	<script type="text/javascript">
		function playMusic() {
			var audio = document.getElementById("music");
			if (audio.paused) {
				audio.play();
			} else {
				audio.pause();
			}
		}
	</script>
</body>
</html>