目录
一、项目概述
本次分析的代码围绕一个类似 QQ 音乐的网页项目展开，包含了 HTML、CSS 以及少量 JavaScript 代码，旨在构建一个集音乐推荐、新歌展示、排行榜、MV 展示等功能于一体的音乐网站页面。项目结构清晰，各部分分工明确，下面将从不同方面对代码进行详细分析。
二、项目结构
项目主要包含以下几个关键部分：
- HTML 文件：index.html 是整个项目的核心页面，负责展示网页的整体结构和内容，如轮播图、新歌列表、排行榜、MV 列表等。
- CSS 文件：css/base.css 用于定义通用的样式，如清除内外边距、统一盒模型、设置字体样式等，确保页面在不同浏览器中的一致性。
- 图标相关文件：
iconfont文件夹包含了项目所需的图标资源，其中 demo_index.html 和 demo.css 用于展示和使用图标。 - 图片资源：
uploads文件夹存放了项目中使用的各种图片，如轮播图、歌曲封面、MV 封面等。
三、HTML 结构设计与内容
1、头部区域
头部区域采用了 <header> 标签，符合 HTML5 的语义化规范。内部包含了 logo、导航、搜索和用户操作四个部分，每个部分都有明确的功能和样式。
<header id="top">
<div class="wrapper">
<div class="logo">
<h1><a href="#">QQ 音乐</a></h1>
</div>
<div class="nav">
<ul>
<li><a href="#" class="active">音乐馆</a></li>
<!-- 其他导航项 -->
</ul>
</div>
<div class="search">
<input class="search-input" type="text" placeholder="搜索音乐、MV、歌单、用户">
<a href="#" class="iconfont icon-wangdianquanxihuaxiangICON-06"></a>
</div>
<div class="option">
<button class="login">登录</button>
<div class="vip-container">
<button class="vip-button">
<p>开通VIP</p>
<em></em>
<ul class="vip-dropdown">
<li><a href="#">开通超级会员</a></li>
<li><a href="#">开通绿钻豪华版</a></li>
</ul>
</button>
</div>
</div>
</div>
</header>2、导航栏部分
导航栏使用 <div> 标签包裹 <ul> 和 <li> 元素，创建了一个水平导航菜单。通过 active 类来标识当前选中的菜单项，增强了用户的交互体验。
<div class="subnav">
<div class="wrapper">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">歌手</a></li>
<!-- 其他导航项 -->
</ul>
</div>
</div>3、主体部分
主体部分包含了歌单推荐、新歌首发等多个模块。每个模块都有自己的标题和内容区域，通过 <div> 标签进行划分，结构清晰。
3.1. 轮播图部分
在 index.html 中，多处使用了轮播图来展示推荐内容。以 carousel-item 为主要的轮播项，每个轮播项包含一个 recommend-list 容器，其中又包含一个 pic-cover 链接和一个 text 信息区域。pic-cover 中包含一个遮罩层 mask 和一张图片，text 区域则显示推荐内容的标题和播放量。
<li class="carousel-item">
<div class="recommend-list">
<a href="#" class="pic-cover">
<!-- 遮罩层 -->
<div class="mask"></div>
<img src="./uploads/pic13.webp" alt="pic">
</a>
<div class="text">
<h4><a href="#">抖音最火：听说你也在找这些歌</a></h4>
<p>播放量：2034.5万</p>
</div>
</div>
</li>3.2. 新歌列表部分
新歌列表以 new-song-list 为容器，包含歌曲封面 song-cover 和歌曲信息 song-info。歌曲封面同样有遮罩层，歌曲信息包括歌曲名称、演唱者和歌曲时长。
<li>
<div class="new-song-list">
<div class="song-cover">
<a href="#" class="pic-cover">
<!-- 遮罩层 -->
<div class="mask"></div>
<img src="./uploads/new_pic3.webp" alt="new_pic">
</a>
</div>
<div class="song-info">
<div class="name-auther">
<h4><a href="#">寻光</a></h4>
<p><a href="#">希林娜依高</a></p>
</div>
<div class="song-time">
<a href="#">03:47</a>
</div>
</div>
</div>
</li>3.3. 排行榜部分
排行榜以 chart-list 为容器，包含排行榜标题和歌曲列表。每首歌曲以 chart-song 为项，包含歌曲排名 chart-number、歌曲名称 chart-song-name 和演唱者 chart-song-writer。
<li class="chart-song">
<div class="chart-number">3</div>
<div class="chart-song-info">
<div class="chart-song-name">
<a href="#">你是人间四月天</a>
</div>
<div class="chart-song-writer">
<a href="#">邵帅</a>
</div>
</div>
</li>3.4. MV 列表部分
MV 列表以 mv-list 为容器，包含 MV 封面和 MV 信息。MV 信息包括 MV 名称、演唱者和播放量。
<li>
<div class="mv-list">
<a href="#" class="pic-cover">
<!-- 遮罩层 -->
<div class="mask"></div>
<img src="./uploads/mv8.webp" alt="mv">
</a>
<div class="mv-info">
<h4><a href="#">I'm Alive</a></h4>
<p><a href="#">王力宏</a></p>
<div class="mv-play iconfont icon-MV">5.6万</div>
</div>
</div>
</li>四、CSS 样式分析
1. 通用样式
在 css/base.css 中，定义了一系列通用样式，如清除内外边距、统一盒模型、设置字体样式等。这些样式确保了页面在不同浏览器中的一致性。
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
/* 禁止水平滚动条 */
/* overflow-x: hidden; */
}
/* 统一盒模型 */
*,
*::before,
*::after {
box-sizing: border-box;
}2. 链接样式
链接的默认颜色为黑色，鼠标悬停时颜色变为 #31c27c，增强了用户交互体验。
a {
color: #000;
cursor: pointer;
text-decoration: none;
}
a:hover {
color: #31c27c;
}3. 图片样式
图片设置了最大宽度为 100%，高度自适应，并显示为块级元素，确保图片在不同屏幕尺寸下的适配性。
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
/* vertical-align: middle; */
/* 确保图片和媒体元素能自适应容器宽度，避免溢出。 */
max-width: 100%;
height: auto;
display: block;
}4、响应式设计
项目中使用了 vw 作为单位，实现了一定程度的响应式设计。vw 是视口宽度的百分比单位，使得元素的尺寸能够根据视口的大小进行自适应调整。例如，在 index.css 文件中，很多元素的宽度和高度都使用了 vw 单位。
.new-disc .index-nav {
width: 100%;
max-width: 92.26973684vw;
margin: 0 auto;
position: relative;
width: 92.26973684vw;
height: 4.93421053vw;
}5、布局技术
5.1 Flexbox 布局
广泛使用了 Flexbox 布局来实现元素的水平和垂直对齐。例如，头部区域使用 display: flex 和 align-items: center 实现了元素的垂直居中对齐。
header .wrapper {
display: flex;
align-items: center;
}5.2 绝对定位和相对定位
通过 position: relative 和 position: absolute 实现了元素的定位和重叠效果。例如，遮罩层使用绝对定位覆盖在图片上方。
.banner ul li .pic-cover {
position: relative;
}
.banner ul li .pic-cover .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.3s ease;
}5.3 动画效果
使用 CSS 动画实现了一些交互效果，如图片的缩放和遮罩层的显示。这些动画效果增强了用户体验，使页面更加生动。
.banner ul li .pic-cover:hover img {
transform: scale(1.1);
}
.banner ul li .pic-cover:hover .mask {
opacity: 1;
transform: scale(1.7);
}五、图标使用
项目中使用了自定义图标，通过 iconfont 文件夹中的资源实现。在 demo_index.html 中，详细介绍了图标的使用步骤，包括引入 symbol 代码、加入通用 CSS 代码和应用图标类名。
<!-- 第一步：引入项目下面生成的 symbol 代码 -->
<script src="./iconfont.js"></script>
<!-- 第二步：加入通用 CSS 代码（引入一次就行） -->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<!-- 第三步：挑选相应图标并获取类名，应用于页面 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>六、项目实现效果
QQ音乐
扫一扫
2080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
