QQ音乐播放器案例
1. 基本结构分析
三个部分:
- 头部区域
- 中间内容区
- 左边歌曲列表信息
- 上边按钮工具条和下边的滑动列表[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qebn5hBX-1593490234092)(C:\Users\HP\Desktop\2.jpg)]
- 右边封面和歌词
- 左边歌曲列表信息
- 底部控制区
2. 代码实现
1. 整体布局及头部
html
<div class="header">
<h1 class="logo"><a href="#"></a></h1>
<ul class="register">
<li>登录</li>
<li>注册</li>
</ul>
</div>
<div class="content">
<div class="content_in">
<div class="content_left"></div>
<div class="content_right"></div>
</div>
</div>
<div class="footer">
<div class="footer_in"></div>
</div>
css
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 45px;
background: red;
}
.header .logo {
float: left;
margin-left: 20px;
opacity: 0.5;
}
.header .logo:hover {
opacity: 1;
}
.header .logo a {
display: inline-block;
width: 78px;
height: 21px;
background: url("../images/player_logo.png") no-repeat 0 0;
}
.header .register {
float: right;
line-height: 25px;
}
.header .register li {
list-style: none;
float: left;
margin-right: 20px;
color: #fff;
opacity: 0.5;
cursor: pointer;
}
.header .register li:hover {
opacity: 1;
}
.content {
width