<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link
rel="stylesheet"
href="//at.alicdn.com/t/c/font_4116445_i3uyumtl6.css"
/>
<link rel="stylesheet" href="./css/charts.css" />
<link rel="stylesheet" href="./css/footer.css" />
<link rel="stylesheet" href="./css/header.css" />
</head>
<body>
<div class="header">
<div class="section_inner">
<h1 class="qqmusic_title">
<a href="#">
<img
src="//y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000"
alt="QQ音乐"
class="qqmusic_logo"
/>
</a>
</h1>
<ul class="header_nav">
<li class="top_nav_item">
<a href="#">音乐馆</a>
</li>
<li class="top_nav_item">
<a href="#">我的音乐</a>
</li>
<li class="top_nav_item">
<a href="#">客户端</a>
</li>
<li class="top_nav_item">
<a href="#">开放平台</a>
</li>
<li class="top_nav_item">
<a href="#">VIP</a>
</li>
</ul>
<ul class="header_subnav">
<li class="header_subnav_item">
<a href="#">首页</a>
</li>
<li class="header_subnav_item">
<a href="#">歌手</a>
</li>
<li class="header_subnav_item">
<a href="#">新碟</a>
</li>
<li class="header_subnav_item">
<a href="#" class="num">排行榜</a>
</li>
<li class="header_subnav_item">
<a href="#">分类歌单</a>
</li>
<li class="header_subnav_item">
<a href="#">电台</a>
</li>
<li class="header_subnav_item">
<a href="#">MV</a>
</li>
<li class="header_subnav_item">
<a href="#">数字专辑</a>
</li>
</ul>
<div class="header_search">
<div class="header_search_input">
<input
type="text"
class="search_input_input"
placeholder="搜索音乐、MV、歌单、用户"
/>
</div>
</div>
<div class="header_opt">
<span class="login">
<a href="#" class="login-link">登录</a>
<div class="login-select">
<a class="select-choose">开通VIP</a>
<ul class="select-box">
<li class="select-item">开通超级会员</li>
<li class="select-item">开通绿钻豪华版</li>
</ul>
</div>
<div class="select-pay">
<a class="select-choose"> 充值 </a>
<ul class="select-box">
<li class="select-item">购买乐币</li>
<li class="select-item">充值饭票</li>
</ul>
</div>
</span>
</div>
</div>
</div>
<div class="content">
<div class="left">
<dl>
<dt>巅峰榜</dt>
<dd class="active">飙升榜</dd>
<dd>热歌榜</dd>
<dd>新歌榜</dd>
<dd>流行指数榜</dd>
<dd>腾讯音乐人原创榜</dd>
<dd>听歌识曲榜</dd>
<dd>MV榜</dd>
</dl>
<dl>
<dt>地区榜</dt>
<dd>内地榜</dd>
<dd>香港地区榜</dd>
<dd>台湾地区榜</dd>
<dd>欧美榜单</dd>
<dd>韩国榜单</dd>
<dd>日本榜单</dd>
</dl>
<dl>
<dt>特色榜</dt>
<dd>网络歌曲榜</dd>
<dd>DJ舞曲榜</dd>
<dd>抖快榜</dd>
<dd>综艺新歌榜</dd>
<dd>影视金曲榜</dd>
<dd>电音榜</dd>
<dd>国风热歌榜</dd>
<dd>说唱榜</dd>
<dd>动漫音乐榜</dd>
<dd>游戏音乐榜</dd>
<dd>K歌金曲榜</dd>
</dl>
<dl>
<dt>全球榜</dt>
<dd>美国公告牌榜</dd>
<dd>韩国Melon榜</dd>
<dd>英国UK榜</dd>
<dd>日本公信榜</dd>
<dd>JOOX本地热播榜</dd>
<dd>香港TVB劲歌金榜</dd>
<dd>台湾KKBOX榜</dd>
<dd>YouTube音乐排行榜</dd>
</dl>
</div>
<div class="right">
<div class="toplist">
<h1></h1>
<span>2023-6-11</span>
<span>榜单规则</span>
</div>
<div class="btnlist">
<a href="#" class="active"
><i class="iconfont icon-bofang"></i>播放全部</a
>
<a href="#"><i class="iconfont icon-tianjia">添加歌曲</i></a>
<a href="#"><i class="iconfont icon-xiazai">下载</i></a>
<a href="#"
><i class="iconfont icon-ic_batch_default24px">批量操作</i></a
>
<a href="#"><i class="iconfont icon-pinglun">评论(789189)</i></a>
</div>
<div class="singlist">
<ul class="top">
<li class="name">歌曲</li>
<li class="author">歌手</li>
<li class="time">时长</li>
</ul>
<ul class="foot"></ul>
</div>
<div class="part">
<div class="parttop">
<p>查看更多内容,请下载客户端</p>
<p class="green">立即下载</p>
</div>
<div class="parthd">
<h2>评论</h2>
<span>共999条评论</span>
</div>
<div class="parttext">
<input type="text" value="说说你的看法吧" />
<div>还剩<i>300</i>字</div>
</div>
<div class="btn">
<i class="iconfont icon-xiaolian"></i>
<div class="input">发表看法</div>
</div>
<div class="text">
<div class="good">精彩评论</div>
<ul></ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="foothead">
<div class="download">
<h3>下载qq音乐客户端</h3>
<ul>
<li>
<a href=""><i class="pc"></i>pc版</a>
</li>
<li>
<a href=""><i class="mac"></i>mac版</a>
</li>
<li>
<a href=""><i class="ad"></i>Android版</a>
</li>
<li>
<a href=""><i class="ip"></i>iPhone版</a>
</li>
</ul>
</div>
<div class="product">
<h3>特色产品</h3>
<ul>
<li>
<a href=""><i class="kg"></i>全民K歌</a>
</li>
<li>
<a href=""><i class="ss"></i>银河音效</a>
</li>
<li>
<a href=""><i class="qp"></i>Qplay</a>
</li>
<li>
<a href=""><i class="fan"></i>Fan直播伴侣</a>
</li>
<li><a href="">车载互联</a></li>
<li><a href="">QQ演出</a></li>
</ul>
</div>
<div class="link">
<h3>合作链接</h3>
<ul>
<li><a href="">CJ ENM</a></li>
<li><a href="">腾讯视频</a></li>
<li><a href="">手机QQ空间</a></li>
<li><a href="">最新版QQ</a></li>
<li><a href="">腾讯社交广告</a></li>
<li><a href="">电脑管家</a></li>
<li><a href="">QQ浏览器</a></li>
<li><a href="">腾讯微云</a></li>
<li><a href="">
使用html+css+javascript实现qq音乐主页面，十分的炫酷
版权申诉
88 浏览量
2023-10-08
18:25:29
上传
评论 1
收藏 358KB ZIP 举报
qq.zip （28个子文件） 
js 
charts.js 21KB footer.js 412B css footer.css 3KB charts.css 6KB header.css 3KB images 
bgc.png 17KB charts 10.webp 24KB 5.webp 34KB 13.webp 20KB 14.webp 11KB 11.webp 8KB 3.webp 15KB 12.webp 12KB 4.webp 5KB 6.webp 16KB 2.webp 17KB 16.webp 27KB 8.webp 12KB 9.webp 25KB
user.jpg 6KB 20.webp 21KB 18.webp 16KB 7.webp 8KB 1.webp 10KB 15.webp 20KB 17.webp 23KB 19.webp 4KB
charts.html 10KB资源评论
孙叫兽
- 粉丝: 3w+
- 资源: 353
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
