<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐主题网页</title>
<link rel="shortcut icon" href="images/音乐图标.jpg"/>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
header {
text-align: center;
padding: 30px 0;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #2c3e50;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
h2 {
color: #2575fc;
border-bottom: 2px solid #2575fc;
padding-bottom: 8px;
margin-top: 30px;
}
section {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
margin-bottom: 25px;
}
.highlight {
background-color: #eef7ff;
padding: 15px;
border-left: 4px solid #2575fc;
border-radius: 0 8px 8px 0;
margin: 20px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: #eef7ff;
}
form {
background: #f9fafa;
padding: 20px;
border-radius: 8px;
}
fieldset {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
}
legend {
font-weight: bold;
color: #2575fc;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="date"], select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="checkbox"], input[type="radio"] {
margin-right: 5px;
}
button {
background-color: #2575fc;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #1a5fc2;
}
footer {
text-align: center;
padding: 20px;
color: #666;
font-size: 0.9rem;
}
img[usemap] {
border: 2px solid #2575fc;
}
.link-item {
margin: 10px 0;
padding: 12px 15px;
background-color: #f0f4ff;
border-left: 4px solid #2575fc;
border-radius: 6px;
transition: all 0.3s ease;
}
.link-item:hover {
background-color: #e0e8ff;
transform: translateX(5px);
}
.link-item a {
text-decoration: none;
color: #2575fc;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
}
.link-item i {
font-size: 1.2em;
width: 24px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1><i class="fas fa-music"></i> 沉浸式音乐体验</h1>
<p>探索声音的艺术世界</p >
</header>
<section id="links">
<h2><i class="fas fa-link"></i> 超链接</h2>
<div class="link-item">
<a href="https://www.bilibili.com/" target="_blank">
<i class="fas fa-globe-americas"></i> 网站链接：访问哔哩哔哩
</a >
</div>
<div class="link-item">
<a href="https://music.163.com/" target="_blank">
<i class="fas fa-globe-americas"></i> 网站链接：访问网易云音乐
</a >
</div>
<div class="link-item">
<a href="images/音乐会.jpg" target="_blank">
<i class="fas fa-image"></i> 图像链接：查看音乐会大图
</a >
</div>
<div class="link-item">
<a href="music/我用什么把你留住.mp3" download>
<i class="fas fa-download"></i> 下载链接：下载《我用什么把你留住》
</a >
</div>
<div class="link-item">
<a href="#contact">
<i class="fas fa-anchor"></i> 锚点链接：跳转到音乐爱好者反馈表单
</a >
</div>
<h3><i class="fas fa-map-marked-alt"></i> 图像热点链接</h3>
< img src="images/恋人.png" alt="歌曲恋人" usemap="#concert-map" width="460px"height="460px">
<map name="concert-map">
<area shape="rect" coords="0,0,470,470" href="https://www.bilibili.com/video/BV1pE421N7Vi/?spm_id_from=333.337.search-card.all.click" alt="恋人" title="恋人歌曲MV">
</map>
< img src="images/Star Crossing Night.png" alt="歌曲Star Crossing Night" usemap="#Star Crossing Night-map" width="460px"height="460px">
<map name="Star Crossing Night-map">
<area shape="rect" coords="0,0,470,470" href="https://www.bilibili.com/video/BV1EYhQz6EM5/" alt="Star Crossing Night" title="Star Crossing Night歌曲MV">
</map>
</section>
<section id="featured-music">
<h2>本日推荐</h2>
<div class="music-info">
<div class="music-player">
<h3>《我用什么把你留住》</h3>
<p>是福禄寿FloruitShow创作的一首关于生命、失去与珍惜的哲思之作。</p >
<p>“在这浩瀚星河你是什么</p >
<p>在她温柔眼眸的你是什么</p >
<p>闪着光坠落 又依依不舍</p >
<p>所以生命啊 它璀璨如歌</p >
<p>你一定要看到花开</p >
<p>你一定等燕子归来</p >
<p>想着它们都会回来</p >
<p>你誓死为了这些而存在”</p >
<div class="media-container">
<audio src="music/我用什么把你留住.mp3" controls>
<source src="music/我用什么把你留住.mp3" type="audio/mpeg">
您的浏览器不支持音频元素
</audio>
</div>
</div>
<div class="music-player">
<h3>《雪人》</h3>
<p>由新锐音乐人驼儿创作，融合电子与说唱元素，带你进入梦幻般的音乐旅程。</p >
<p>“来年再见吧雪人 现在这骄阳太旺了</p >
<p>等来年都装上嘴唇、鱼尾纹和下巴</p >
<p>一期一会喽雪人 我会陪你一起融化的</p >
<p>我们把这寒冷忘了</p >
<p>让我们把这寒冷都忘了”</p >
<div class="media-container">
<video src="shipin/雪人视频.mp4"controls>
<source src="【2116 《雪人》-驼儿】https://www.bilibili.com/video/BV1W4XPYxExC?vd_source=dadd11e03a268117e18a56aaf18bcf9e" type="video/mp4">
您的浏览器不支持视频元素
</video>
</div>
</div>
</div>
</section>
<section id="music-lists">
<h2>音乐分类</h2>
<div class="music-info">
<div class="music-categories">
<h3>热门音乐类型</h3>
<ul>
<li>流行音乐</li>
<li>摇滚乐</li>
<li>电子舞曲</li>
<li>古典音乐</li>
<li>爵士乐</li>
</ul>
</div>
<section id="table">
<h2>音乐排行榜与信息表</h2>
<table>
<thead>
<tr>
<th rowspan="2">排名</th>
<th rowspan="2">歌曲名称</th>
<th colspan="2">相关信息</th>
</tr>
<tr>
<th>歌手</th>
<th>发行年份</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《恋人》</td>
<td>李荣浩</td>
<td>2024-10-18</td>
</tr>
<tr>
<td>2</td>
<td>《打火机》</td>
<td>Penny</td>
<td>2025-06-05</td>
</tr>
<tr>
<td>3</td>
<td>《Star Crossing Night》</td>
<td colspan="2" style="text-align: center;">徐明浩/GALI</td>
</tr>
<tr>
<td>4</td>
<td>《如果呢》</td>
<td>郑润泽</td>
<td rowspan="2" style="text-align: center;">2021</td>
</tr>
<tr>
<td>5</td>
<td>《还是会想你》</td>
<td>林达浪/h3R3</td>
</tr>
</tbody>
</table>
</section>
</div>
<h3>音乐术语词典</h3>
<dl>
<dt>和弦 (Chord)</dt>
<dd>三个或更多不同音高的音符同时发声</dd>
<dt>节奏 (Rhythm)</dt>
<dd>音乐中时间组织的模式，包括节拍和节奏型</dd>
<dt>音色 (Timbre)</dt>
<dd>声音的品质特征，使不同乐器演奏相同音符时产生区别</dd>
</dl>
</div>
</section>
<!-- 表单部分 -->
<section id="contact">
<section id="contact">
<h2><i class="fas fa-edit"></i> 音乐爱好者反馈表单</h2>
<form action="#" method="post">
<fieldset>
<legend>👤 个人信息</legend>
<label for="name"><i class="fas fa-user"></i> 姓名：</label>
<input type="text" id="name" name="name" required placeholder="请输入您的姓名">
<label for="email"><i class="fas fa-envelope-open"></i> 邮箱：</label>
<input type="email" id="email" name="email" required placeholder="example@domain.com">
<label for="website"><i class="fas fa-globe"></i> 个人主页：</label>
<input type="url" id="website" name="website" placeholder="https://your-site.com">
<label for="phone"><i class="fas fa-phone"></i> 电话号码：</label>
<input type="tel" id="phone" name="phone" placeholder="138-0000-0000">
</fieldset>
<fieldset>
<legend>🎧 偏好设置</legend>
<label><i class="fas fa-check-square"></i> 喜欢的音乐类型：</label>
<label><input type="checkbox" name="genre" value="pop"> <i class="fas fa-music"></i> 流行</label>
<label><input type="checkbox" name="genre" value="rock"> <i class="fas fa-drum"></i> 摇滚</label>
<label><input type="checkbox" name="genre" value="electronic"> <i class="fas fa-synagogue"></i> 电子</label>
<label for="experience"><i class="fas fa-star-half-alt"></i> 音乐经验：</label>
<select id="experience" name="experience">
<option value="">请选择</option>
<option value="beginner">初学者</option>
<option value="intermediate">中级</option>
<option value="expert">专家</option>
</select>
<label><i class="fas fa-question-circle"></i> 是否愿意参加线下活动？</label>
<label><input type="radio" name="event" value="yes"> ✅ 是</label>
<label><input type="radio" name="event" value="no"> ❌ 否</label>
</fieldset>
<fieldset>
<legend>其他信息</legend>
<label for="birthday">出生年份：</label>
<input type="date" id="birthday" name="birthday">
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" placeholder="写下您的想法..."></textarea>
<button type="submit">提交反馈</button>
</fieldset>
</form>
<section id="resources">
<h2>音乐学习资源</h2>
<ul>
<li>在线音乐课程平台</li>
<li>乐器选购指南</li>
<li>音乐制作软件推荐</li>
<li>本地音乐工作坊信息</li>
</ul>
</section>
<footer>
<p>© 2025 沉浸式音乐体验 | 使用HTML5技术构建</p >
<p>视频来源：哔哩哔哩 | 音频来源：网易云音乐</p >
</footer>
</body>
</html
根据以上代码，加入1．样式引入：在网页中引入 CSS3 样式的方式，包括行内样式、内嵌样式表和链接样式表。
2．使用选择器：
基本选择器：标签选择器、类选择器、ID选择器
复合选择器：交集选择器、并集选择器、后代选择器、子代选择器
伪类选择器：锚点伪类，有":link"和":visited"；行为伪类，有":hover"、":active"和":focus";
3．尝试一下ess样式的继承性和层叠性。继承性是指在 HTML5 结构中，后代元素会继承祖先元素的 CSS3 样式。层叠性是指当为一个元素设置了多个样式时，这些样式会根据各自的权重来确定呈现的优先级，然后其中一个值会层叠／覆盖掉其他值，并显示最终效果。
博客介绍了使用CSS设置样式的内容，具体展示了通过代码“a img{border:0px;}”来去除图片边框，属于前端开发中CSS样式设置的应用。
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
