HTML静态网页作业——电影介绍-你的名字 5页 无js 带音乐
以下是一个简化的HTML代码示例,展示了如何创建一个包含音乐的电影介绍静态网页,每页都有不同的电影海报和个人名字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影介绍 - 你的名字</title>
<style>
body {
background-color: #333;
color: white;
font-family: Arial, sans-serif;
}
.poster {
width: 100%;
margin: 20px 0;
}
h1 {
text-align: center;
}
a {
color: #f90;
}
</style>
</head>
<body>
<!-- 页面 1/5 -->
<h1>《电影1》</h1>
<img src="posters/poster1.jpg" alt="电影1海报" class="poster">
<audio src="music/music1.mp3" autoplay loop></audio>
<!-- 页面 2/5 -->
<h1>《电影2》</h1>
<img src="posters/poster2.jpg" alt="电影2海报" class="poster">
<audio src="music/music2.mp3" autoplay loop></audio>
<!-- 页面 3/5 -->
<h1>《电影3》</h1>
<img src="posters/poster3.jpg" alt="电影3海报" class="poster">
<audio src="music/music3.mp3" autoplay loop></audio>
<!-- 页面 4/5 -->
<h1>《电影4》</h1>
<img src="posters/poster4.jpg" alt="电影4海报" class="poster">
<audio src="music/music4.mp3" autoplay loop></audio>
<!-- 页面 5/5 -->
<h1>《电影5》</h1>
<img src="posters/poster5.jpg" alt="电影5海报" class="poster">
<audio src="music/music5.mp3" autoplay loop></audio>
<footer>
<p>版权所有 © 你的名字</p>
</footer>
</body>
</html>
这个示例展示了如何在每个页面加载时播放不同的音乐。注意,为了简化代码,海报图片和音乐文件的路径需要根据实际情况进行替换。此外,每个页面的内容应根据实际电影信息进行个性化定制。
评论已关闭