/* 设置整个页面的基本样式 */
 body {
     font-family: Arial, sans-serif;
     /* 设置字体 */
     background-color: #f4f4f9;
     /* 设置背景颜色 */
     color: #333;
     /* 设置文本颜色 */
     margin: 0;
     /* 去除页面默认的外边距 */
     padding: 20px;
     /* 设置页面内边距 */
     display: flex;
     /* 使用flex布局 */
     flex-direction: column;
     /* 设置flex布局的方向为列 */
     align-items: center;
     /* 设置子元素在主轴上居中对齐 */
 }

 /* 返回按钮样式 */
 .back-button {
     position: fixed;
     /* 固定定位 */
     top: 10px;
     /* 距离页面顶部10像素 */
     right: 10px;
     /* 距离页面右侧10像素 */
     padding: 10px 20px;
     /* 设置内边距 */
     border: none;
     /* 去除边框 */
     border-radius: 5px;
     /* 设置圆角 */
     background-color: #007bff;
     /* 设置背景颜色 */
     color: #fff;
     /* 设置文字颜色 */
     cursor: pointer;
     /* 设置鼠标悬停时的指针样式 */
     transition: background-color 0.2s;
     /* 设置背景颜色变化的过渡时间为0.2秒 */
 }

 .back-button:hover {
     background-color: #0056b3;
     /* 设置背景颜色 */
 }

 /* 设置一级标题样式 */
 h1 {
     color: #555;
     /* 设置标题颜色 */
     text-align: center;
     /* 设置文本居中对齐 */
     margin-bottom: 20px;
     /* 设置底部外边距 */
 }

 /* 设置段落样式 */
 p {
     text-align: center;
     /* 设置文本居中对齐 */
     margin-bottom: 20px;
     /* 设置底部外边距 */
 }

 /* 设置链接样式 */
 a {
     display: block;
     /* 将链接设置为块级元素 */
     text-align: center;
     /* 设置文本居中对齐 */
     margin-bottom: 20px;
     /* 设置底部外边距 */
 }

 /* 设置图片样式 */
 img {
     border-radius: 50%;
     /* 设置图片为圆形 */
     width: 150px;
     /* 设置图片宽度 */
     height: 150px;
     /* 设置图片高度 */
     transition: transform 0.2s;
     /* 设置图片缩放效果的过渡时间为0.2秒 */
     cursor: pointer;
     /* 设置鼠标悬停时的指针样式 */
 }

 /* 设置图片在悬停时的样式 */
 img:hover {
     transform: scale(1.1);
     /* 设置图片在悬停时放大1.1倍 */
 }

 /* 设置图片下方文字的样式 */
 .caption {
     font-size: 14px;
     /* 设置字体大小 */
     color: #777;
     /* 设置文字颜色 */
     text-align: center;
     /* 设置文本居中对齐 */
     margin-bottom: 20px;
     /* 设置底部外边距 */
 }

 /* 设置底部栏的样式 */
 .footer {
     text-align: center;
     /* 设置文本居中对齐 */
     padding: 10px;
     /* 设置内边距 */
     background-color: #f1f1f1;
     /* 设置背景颜色 */
     position: fixed;
     /* 设置固定定位 */
     bottom: 0;
     /* 距离页面底部0像素 */
     width: 100%;
     /* 宽度为100% */
 }

 /* 设置音乐播放器容器的样式 */
 .music-player {
     background-color: #fff;
     /* 设置背景颜色 */
     border-radius: 10px;
     /* 设置圆角 */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     /* 设置阴影效果 */
     padding: 20px;
     /* 设置内边距 */
     width: 400px;
     /* 设置宽度 */
     display: flex;
     /* 使用flex布局 */
     flex-direction: column;
     /* 设置flex布局的方向为列 */
     align-items: center;
     /* 设置子元素在主轴上居中对齐 */
 }

 /* 设置音乐图片的样式 */
 .music-cover img {
     width: 100px;
     /* 设置图片宽度 */
     height: 100px;
     /* 设置图片高度 */
     border-radius: 10px;
     /* 设置圆角 */
 }

 /* 设置音频控件的样式 */
 .audio-controls audio {
     width: 90%;
     /* 设置音频控件宽度为容器宽度的90% */
     margin-top: 10px;
     /* 设置顶部外边距 */
 }

 .audio-controls {
     display: flex;
     /* 使用flex布局 */
     justify-content: center;
     /* 设置子元素在主轴上居中对齐 */
     width: 100%;
     /* 设置宽度为容器宽度 */
 }

 /* 设置音乐切换按钮的样式 */
 .music-buttons button {
     margin: 5px;
     /* 设置外边距 */
     padding: 10px 20px;
     /* 设置内边距 */
     border: none;
     /* 去除边框 */
     border-radius: 5px;
     /* 设置圆角 */
     background-color: #007bff;
     /* 设置背景颜色 */
     color: #fff;
     /* 设置文字颜色 */
     cursor: pointer;
     /* 设置鼠标悬停时的指针样式 */
     transition: background-color 0.2s;
     /* 设置背景颜色变化的过渡时间为0.2秒 */
 }

 /* 设置音乐切换按钮在悬停时的样式 */
 .music-buttons button:hover {
     background-color: #0056b3;
     /* 设置背景颜色 */
 }

 /* 适配小屏幕设备 */
 @media (max-width: 600px) {
     body {
         font-size: 14px;
     }

     h1 {
         font-size: 24px;
     }

     .music-player {
         width: 100%;
         flex-direction: column;
         align-items: center;
     }

     .music-cover img {
         max-width: 100%;
         height: auto;
     }

     .music-buttons {
         margin-top: 10px;
     }

     .music-buttons button {
         margin: 5px;
     }

     .audio-controls {
         width: 100%;
         margin-top: 10px;
     }

     .audio-controls audio {
         width: 100%;
     }
 }