QQ音乐播放器部分笔记

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