仿QQ音乐(HTML+CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/">
<link rel="stylesheet" href="css/">
<title>QQ音乐</title>
</head>
<body>
<header>
<div class="w clearfix">
<h1><a href="" title="QQ音乐">qq音乐</a></h1>
<ul class="header_nav">
<li><a href="#">音乐馆</a></li>
<li><a href="#">我的音乐</a></li>
<li><a href="#">客户端</a></li>
<li><a href="#">开放平台</a></li>
<li><a href="#">VIP</a></li>
</ul>
<div class="search">
<input type="text" placeholder="搜索音乐、MV、歌单">
<button>搜索</button>
<div class="result">
<ul>
<li><a href="#"><i>1</i>可乐<span>76.6万</span></a></li>
<li><a href="#"><i>2</i>说谎<span>258.7万</span></a></li>
<li><a href="#"><i>3</i>张杰<span>32.6万</span></a></li>
<li><a href="#"><i>4</i>桥边姑娘<span>24.3万</span></a></li>
<li><a href="#"><i>5</i>星辰大海<span>34.4万</span></a></li>
</ul>
<p>历史记录</p>
</div>
</div>
<span><a href="#">登录</a></span>
<span class="shang"><a href="#">开通VIP</a>
<div class="xia">
<a href="#">开通绿钻豪华版</a>
<a href="#">开通付费包</a>
</div>
</span>
<span class="shang"><a href="#"">充值</a>
<div class=" xia_2">
<a href="#">购买乐币</a>
<a href="#">充值饭票</a>
</div>
</span>
</div>
<div class="mark">
<img src="images/mark_1.png" alt="">
</div>
</header>
<nav>
<div class="w">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">新碟</a></li>
<li><a href="#">排行榜</a></li>
<li><a href="#">分类歌单</a></li>
<li><a href="#">电台</a></li>
<li><a href="#">MV</a></li>
<li><a href="#">数字专辑</a></li>
<li><a href="#">票务</a></li>
</ul>
</div>
</nav>
<div class="playlist bg title">
<div class="w">
<h1>歌单推荐</h1>
<ul>
<li><a href="#">为你推荐</a></li>
<li><a href="#">情歌</a></li>
<li><a href="#">经典</a></li>
<li><a href="#">KTV热歌</a></li>
<li><a href="#">官方歌单</a></li>
<li><a href="#">网络歌曲</a></li>
</ul>
<div class="popup_guide">
<img src="images/logo (1).png" alt="">
<p>千万高品质曲库共享</p>
<button class="btn">客户端下载</button>
</div>
<div class="pl_content cover">
<ul>
<li><a href="#"><img src="wd/img/" alt=""></a>
<a href="#" class="play"></a>
<p>故事再美，结局还是再见</p>
<i>播放量：203.1万</i>
</li>
<li><a href="#"><img src="wd/img/300(1).png" alt=""></a>
<a href="#" class="play"></a>
<p>嘻哈情歌第一次见你的欢喜</p>
<i>播放量：239.9万</i>
</li>
<li><a href="#"><img src="wd/img/300(2).png" alt=""></a>
<a href="#" class="play"></a>
<p>分手以后才渴望以前的美好</p>
<i>播放量：7299.6万</i>
</li>
<li><a href="#"><img src="wd/img/300(3).png" alt=""></a>
<a href="#" class="play"></a>
<p>喜欢一个人很久终于要放手了</p>
<i>播放量：3682.8万</i>
</li>
<li><a href="#"><img src="wd/img/300(4).png" alt=""></a>
<a href="#" class="play"></a>
<p>港音流行歌,"粤"听"粤"钟意</p>
<i>播放量：3043.8万</i>
</li>
</ul>
</div>
</div>
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
<div class="circle">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div class="newsong bg title">
<div class="w">
<button>播放全部</button>
<h1>新歌首发</h1>
<ul>
<li><a href="#">最新</a></li>
<li><a href="#">内地</a></li>
<li><a href="#">港台</a></li>
<li><a href="#">欧美</a></li>
<li><a href="#">韩国</a></li>
<li><a href="#">日本</a></li>
</ul>
<div class="ns_content cover">
<ul>
<li><a href="#"><img src="wd//img/" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>侦探</i><br><em>沈以诚/张钰琪</em></div>
<span>04:16</span>
</li>
<li><a href="#"><img src="wd/img/600(1).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>国王密室</i><br><em>吴克群/kc</em></div>
<span>03:20</span>
</li>
<li><a href="#"><img src="wd/img/600(2).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>明星</i><br><em>Lisa(织布里沙)</em></div>
<span>04:16</span>
</li>
<li><a href="#"><img src="wd/img/600(3).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>最好的礼物</i><br><em>周深</em></div>
<span>03:52</span>
</li>
<li><a href="#"><img src="wd/img/600(4).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>迎梦而来</i><br><em>范丞丞/曾瞬晞</em></div>
<span>04:28</span>
</li>
<li><a href="#"><img src="wd/img/600(5).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>Easy On Me</i><br><em>Adele</em></div>
<span>03:43</span>
</li>
<li><a href="#"><img src="wd/img/600(6).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>这就是爱情</i><br><em>李代沫</em></div>
<span>04:40</span>
</li>
<li><a href="#"><img src="wd/img/600(7).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>莫离</i><br><em>鞠婧祎</em></div>
<span>04:40</span>
</li>
<li><a href="#"><img src="wd/img/600(8).png" alt=""></a><a href="#" class="play"></a>
<div class="name"><i>好好珍惜自己</i><br><em>钟嘉欣</em></div>
<span>03:46</span>
</li>
</ul>
</div>
</div>
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
<div class="circle">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div class="recom bg title">
<div class="w">
<h1>精彩推荐</h1>
<a href="#"><img src="wd/img/" alt=""></a>
<a href="#"><img src="wd/img/" alt=""></a>
</div>
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
<div class="circle">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div class="first bg title">
<div class="w">
<h1>新碟首发</h1>
<ul>
<li><a href="#">内地</a></li>
<li><a href="#">港台</a></li>
<li><a href="#">欧美</a></li>
<li><a href="#">韩国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">其他</a></li>
<a href="#">更多</a>
</ul>
<div class="fr_content cover">
<ul>
<li><a href="#"><img src="wd/img/" alt=""></a><a href="#" class="play"></a>
<p>三打白骨精</p>
<i>孟鹤堂</i>
</li>
<li><a href="#"><img src="wd/img/100(1).png" alt=""></a><a href="#" class="play"></a>
<p>已然如此</p>
<i>张磊</i>
</li>
<li><a href="#"><img src="wd/img/100(2).png" alt=""></a><a href="#" class="play"></a>
<p>只当从未认识过</p>
<i>贺一航</i>
</li>
<li><a href="#"><img src="wd/img/100(3).png" alt=""></a><a href="#" class="play"></a>
<p>BANANA</p>
<i>李昊佑</i>
</li>
<li><a href="#"><img src="wd/img/100(4).png" alt=""></a><a href="#" class="play"></a>
<p>晚风</p>
<i>陈芊宇</i>
</li>
<li><a href="#"><img src="wd/img/100(5).png" alt=""></a><a href="#" class="play"></a>
<p>不再继续</p>
<i>将申</i>
</li>
<li><a href="#"><img src="wd/img/100(6).png" alt=""></a><a href="#" class="play"></a>
<p>荣耀同行</p>
<i>徐均朔/邢琛/王者荣耀</i>
</li>
<li><a href="#"><img src="wd/img/100(7).png" alt=""></a><a href="#" class="play"></a>
<p>满庭恨</p>
<i>尹昔惋</i>
</li>
<li><a href="#"><img src="wd/img/100(8).png" alt=""></a><a href="#" class="play"></a>
<p>倒带</p>
<i>ONER灵超</i>
</li>
<li><a href="#"><img src="wd/img/100(9).png" alt=""></a><a href="#" class="play"></a>
<p>Rap Gentle</p>
<i>赵让</i>
</li>
</ul>
</div>
</div>
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
<div class="circle">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div class="rank bg title">
<div class="w">
<h1>排行榜</h1>
<a href="#">更多</a>
<div class="ranking">
<ul>
<li>
<h3>巅峰榜</h3>
<h2>热歌</h2>
<div class="line"></div>
<ul>
<li class="clearfix"><i>1</i><span>我怕来者不是你（dj）版<br>
小蓝背心</span></li>
<li class="clearfix"><i>2</i><span>路山河<br>
七叔（叶泽洁）</span></li>
<li class="clearfix"><i>3</i><span>晴天<br>
周杰伦</span></li>
</ul>
<a href="#"></a>
</li>
<li>
<h3>巅峰榜</h3>
<h2>新歌</h2>
<div class="line"></div>
<ul>
<li class="clearfix"><i>1</i><span>如愿<br>
王菲</span></li>
<li class="clearfix"><i>2</i><span>风吹过八百里<br>
苏星婕</span></li>
<li class="clearfix"><i>3</i><span>画离弦<br>
柯柯柯啊</span></li>
</ul>
<a href="#"></a>
</li>
<li>
<h3>巅峰榜</h3>
<h2>流行指数</h2>
<div class="line"></div>
<ul>
<li class="clearfix"><i>1</i><span>Easy On Me<br>
Adele</span></li>
<li class="clearfix"><i>2</i><span>原来我从未忘记你<br>
杜宣达</span></li>
<li class="clearfix"><i>3</i><span>须尽欢<br>
渡</span></li>
</ul>
<a href="#"></a>
</li>
<li>
<h3>巅峰榜</h3>
<h2>欧美</h2>
<div class="line"></div>
<ul>
<li class="clearfix"><i>1</i><span>不可阻挡 (Burn It All Down)<br>
英雄联盟</span></li>
<li class="clearfix"><i>2</i><span>BACK ON TOP(feat,...<br>
HONNE/Griff</span></li>
<li class="clearfix"><i>3</i><span>Hailey<br>
Justin Bieber</span></li>
</ul>
<a href="#"></a>
</li>
<li>
<h3>巅峰榜</h3>
<h2>韩国</h2>
<div class="line"></div>
<ul>
<li class="clearfix"><i>1</i><span>Savage<br>
aespa</span></li>
<li class="clearfix"><i>2</i><span>清醒梦境<br>
aespa</span></li>
<li class="clearfix"><i>3</i><span>aenergy<br>
aespa</span></li>
</ul>
<a href="#"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="first bg title mv">
<div class="w">
<h1>MV</h1>
<ul>
<li><a href="#">精选</a></li>
<li><a href="#">内地</a></li>
<li><a href="#">港台</a></li>
<li><a href="#">欧美</a></li>
<li><a href="#">韩国</a></li>
<li><a href="#">日本</a></li>
<a href="#">更多</a>
</ul>
<div class="fr_content cover">
<ul class="Song">
<li><a href="#"><img src="wd/img/" alt=""></a><a href="#" class="play"></a>
<p>奇侠</p>
<i>邵琳娜/腾格尔/天涯明月刀<br><em></em>11.6万</i>
</li>
<li><a href="#"><img src="wd/img/200(1).png" alt=""></a><a href="#" class="play"></a>
<p> 莫离</p>
<i>鞠婧祎<br><em></em>18.1万</i>
</li>
<li><a href="#"><img src="wd/img/200(2).png" alt=""></a><a href="#" class="play"></a>
<p>Easy On Me</p>
<i>Adele<br><em></em>7849</i>
</li>
<li><a href="#"><img src="wd/img/200(3).png" alt=""></a><a href="#" class="play"></a>
<p>国王密室 </p>
<i>吴克群/KC<br><em></em>2.5万 </i>
</li>
<li><a href="#"><img src="wd/img/200(4).png" alt=""></a><a href="#" class="play"></a>
<p> 侦探</p>
<i>说以诚/张钰琪 <br><em></em>10.7万</i>
</li>
<li><a href="#"><img src="wd/img/200(5).png" alt=""></a><a href="#" class="play"></a>
<p>断桥数归期</p>
<i>叶知秋 <br><em></em>9835</i>
</li>
<li><a href="#"><img src="wd/img/200(6).png" alt=""></a><a href="#" class="play"></a>
<p> 变废为宝</p>
<i>薛之谦<br><em></em>39.8万</i>
</li>
<li><a href="#"><img src="wd/img/200(7).png" alt=""></a><a href="#" class="play"></a>
<p>彼得潘</p>
<i>萧敬腾<br><em></em>22.4万</i>
</li>
<li><a href="#"><img src="wd/img/200(8).png" alt=""></a><a href="#" class="play"></a>
<p> 最悲伤的事</p>
<i> A-Lin <br><em></em>2.8万</i>
</li>
<li><a href="#"><img src="wd/img/200(9).png" alt=""></a><a href="#" class="play"></a>
<p>我在</p>
<i>李代沫 <br><em></em>3.2万</i>
</li>
</ul>
</div>
</div>
<div class="left"><a href="#"></a></div>
<div class="right"><a href="#"></a></div>
<div class="circle">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<footer>
<div class="w">
<ul class="clearfix">
<li>
<dl>
<dt>下载QQ音乐客户端</dt>
<dd >
<p><img src="images/images/周洁QQ音乐1(1)_03.jpg" alt=""></p>
PC版
</dd>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_05.jpg" alt=""></p>
Mac版
</dd>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_07.jpg" alt=""></p>
Android版
</dd>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_09.jpg" alt=""></p>
iPhone版
</dd>
</dl>
</li>
<li>
<dl>
<dt>特色产品</dt>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_11.jpg" alt=""></p>
全民K歌
</dd>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_13.jpg" alt=""></p>
Super Sound
</dd>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_15.jpg" alt=""></p>
QPlay
</dd>
<dd>
<p><img src="images/images/周洁QQ音乐1(1)_17.jpg" alt=""></p>
Fan直播伴侣
</dd>
<dd>车载互联</dd>
<dd>QQ演出</dd>
</dl>
</li>
<li>
<dl>
<dt>合作链接</dt>
<dd>CJ ENM</dd>
<dd>腾讯视频</dd>
<dd>手机QQ空间</dd>
<dd>最新版QQ</dd>
<dd>腾讯社交广告</dd>
<dd>电脑管家</dd>
<dd>QQ浏览器</dd>
<dd>腾讯微云</dd>
<dd>腾讯云</dd>
<dd>企鹅FM</dd>
<dd>智能电视网</dd>
<dd>当贝市场</dd>
<dd>酷我音乐</dd>
<dd>酷狗听书</dd>
</dl>
</li>
<li>
<dl>
<dt>开放平台</dt>
<dd>QQ音乐开放平台</dd>
<dd>腾讯音乐人</dd>
<dd>音乐推</dd>
</dl>
</li>
<li>
<dl>
<dt>TME集团官网</dt>
<dd>腾讯音乐</dd>
</dl>
</li>
</ul>
<p>关于腾讯 |About Tencent |服务条款 |用户服务协议 |隐私政策 |权利声明 |广告服务 |腾讯招聘 |客服中心 |网站导航</p>
<p>Copyright © 1998 - 2021 Tencent. All Rights Reserved.</p>
<p>腾讯公司 版权所有｜营业执照｜网络文化经营许可证：粤网文[2020]3396-195号</p>
</div>
</footer>
</body>
</html>