QQ音乐页面(纯HTML)
QQ音乐项目
·
<!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">
<title>QQ音乐</title>
<link rel="stylesheet" href="./css/css/QQ.css">
</head>
<body>
<div class="div0">
<div class="div0_1">
<div class="box" id="box">
<div class="nav">
<img src="./img/img/Image 38.png" alt="#" class="imga1">
</div>
<ul class="clearfix">
<li class="main1">音乐馆</li>
<li class="main2">我的音乐</li>
<li class="main3">客户端</li>
<li class="main4">音乐号</li>
<li class="main5">VIP</li>
</ul>
<div class="div1">
<input type="text" class="input1" required lay-verify="required" placeholder=" 搜索音乐、歌单、MV、用户" autocomplete="off">
<div class="div3">登录</div>
<div class="div4">开通绿钻豪华版</div>
<div class="div5">开通付费包</div>
</div>
</div>
<hr>
<div class="div6">
<span>首页</span>
<span>歌手</span>
<span>新碟</span>
<span>排行榜</span>
<span>分类歌单</span>
<span>电台</span>
<span>MV</span>
<span>数字专辑</span>
<span>服务</span>
</div>
</div>
<div class="div8">
<div class="div7">歌单推荐</div>
<div class="div8_1">
<span>为你推荐</span>
<span>小语种</span>
<span>经典英语</span>
<span>网络歌曲</span>
<span>官方歌曲</span>
<span>情歌</span>
</div>
<div class="div8_2">
<span class="span1"><</span>
<span><img src="./img/img/Image 1.png" alt="" class="img1"></span>
<span><img src="./img/img/Image 2.png" alt=""></span>
<span><img src="./img/img/Image 3.png" alt=""></span>
<span><img src="./img/img/Image 5.png" alt=""></span>
<span><img src="./img/img/Image 6.png" alt="" class="img5"></span>
<span class="span2">></span>
</div>
<div class="div8_3">
<span>
<p>《创造营2019》歌曲合集</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p2">看世界万万千，唯有你一人入眼</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p3">元气日音：我愿用脂肪来交换美貌</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
</span>
</div>
<div class="div8_4">
<span class="span1"></span>
<span class="span2"></span>
</div>
</div>
<div class="div9">
<div class="div7">新歌首发</div>
<div class="div9_1">
<span class="span1">▷播放全部</span>
<span class="span2">最新</span>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</div>
<div class="div9_2">
<span><img src="./img/img/Image 7.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
<span class="span1"><img src="./img/img/Image 8.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
<span class="span2"><img src="./img/img/Image 9.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
</div>
<div class="div9_3">
<span><img src="./img/img/Image 10.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
<span class="span1"><img src="./img/img/Image 11.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
<span class="span2"><img src="./img/img/Image 12.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
</div>
<div class="div9_3">
<span><img src="./img/img/Image 13.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
<span class="span1"><img src="./img/img/Image 14.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
<span class="span2"><img src="./img/img/Image 15.png" alt="">
<font class="font1">逗你玩</font>
<font class="font2">李子璇</font>
<font class="font3">03：34</font>
</span>
</div>
<div class="div9_4">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
</div>
</div>
<div class="div10">
<div class="div7">精彩推荐</div>
<div class="div10_1">
<span><img src="./img/img/Image 16.png" alt=""></span>
<span class="span1"><img src="./img/img/Image 17.png" alt=""></span>
</div>
</div>
<div class="div11">
<div class="div7">新碟首发</div>
<div class="div11_1">
<span class="span1">更多></span>
<span class="span2">内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
<span>其他</span>
</div>
<div class="div8_2">
<span class="span1"><</span>
<span><img src="./img/img/Image 1.png" alt="" class="img1"></span>
<span><img src="./img/img/Image 2.png" alt=""></span>
<span><img src="./img/img/Image 3.png" alt=""></span>
<span><img src="./img/img/Image 5.png" alt=""></span>
<span><img src="./img/img/Image 6.png" alt="" class="img5"></span>
<span class="span2">></span>
</div>
<div class="div8_3">
<span>
<p>《创造营2019》歌曲合集</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p2">看世界万万千，唯有你一人入眼</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p3">元气日音：我愿用脂肪来交换美貌</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
</span>
</div>
<div class="div8_2">
<span class="span1"><</span>
<span><img src="./img/img/Image 1.png" alt="" class="img1"></span>
<span><img src="./img/img/Image 2.png" alt=""></span>
<span><img src="./img/img/Image 3.png" alt=""></span>
<span><img src="./img/img/Image 5.png" alt=""></span>
<span><img src="./img/img/Image 6.png" alt="" class="img5"></span>
<span class="span2">></span>
</div>
<div class="div8_3">
<span>
<p>《创造营2019》歌曲合集</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p2">看世界万万千，唯有你一人入眼</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p class="p3">元气日音：我愿用脂肪来交换美貌</p>
<p class="p1">播放量：62.9万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
</span>
</div>
</div>
<div class="div12">
<div class="div7">排行榜</div>
<div class="div11_1">
<span class="span1">更多></span>
</div>
<div class="div12_2">
<span><img src="./img/img/11.png" alt="" class="img1"></span>
<span><img src="./img/img/22.png" alt=""></span>
<span><img src="./img/img/33.png" alt=""></span>
<span><img src="./img/img/44.png" alt=""></span>
<span><img src="./img/img/55.png" alt=""></span>
</div>
</div>
<div class="div13">
<div class="div7">MV</div>
<div class="div11_1">
<span class="span2">精选</span>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</div>
<div class="div13_2">
<span><img src="./img/img/Image 28.png" alt=""></span>
<span><img src="./img/img/Image 29.png" alt="" class="img1"></span>
<span><img src="./img/img/Image 30.png" alt=""></span>
<span><img src="./img/img/Image 31.png" alt=""></span>
<span><img src="./img/img/Image 32.png" alt=""></span>
<span><img src="./img/img/Image 33.png" alt="" class="img5"></span>
</div>
<div class="div13_3">
<span>
<p>《创造营2019》歌曲合集</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p class="p2">看世界万万千，唯有你一人入眼</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p class="p3">元气日音：我愿用脂肪来交换美貌</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
</div>
<div class="div13_2">
<span><img src="./img/img/Image 34.png" alt=""></span>
<span><img src="./img/img/Image 35.png" alt="" class="img1"></span>
<span><img src="./img/img/Image 36.png" alt=""></span>
<span><img src="./img/img/Image 37.png" alt=""></span>
<span><img src="./img/img/Image 33.png" alt=""></span>
<span><img src="./img/img/Image 32.png" alt="" class="img5"></span>
</div>
<div class="div13_3">
<span>
<p>《创造营2019》歌曲合集</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p class="p2">看世界万万千，唯有你一人入眼</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p class="p3">元气日音：我愿用脂肪来交换美貌</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
<span>
<p>夏日除燥首选·Tropical House</p>
<p class="p1">播放量：62.9万</p>
<p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
</span>
</div>
<div class="div8_4">
<span class="span1"></span>
<span class="span2"></span>
<span class="span2"></span>
<span class="span2"></span>
</div>
</div>
<div class="div14"><img src="./img/img/88.png" alt=""></div>
</div>
</body>
</html>(css)
* {
padding: 0;
margin: 0;
}
.div0 {
height: 4380px;
background-color: #F5F5F5;
}
.div0_1 {
width: 1580px;
height: 130px;
background-color: white;
}
.box {
width: 1380px;
height: 80px;
margin: 0 auto;
/* border: 1px solid red; */
}
.wrap {
background-color: black;
}
.nav {
float: left;
}
.nav .imga1 {
width: 200px;
height: 50px;
display: inline-block;
margin-right: 18px;
margin-top: 13px;
}
.box ul {
float: left;
list-style-type: none;
}
.box ul li {
width: 110px;
height: 80px;
text-align: center;
line-height: 80px;
float: left;
font-size: 16px;
font-family: 绮椾綋;
}
.box ul .main1 {
margin-left: 30px;
width: 80px;
height: 80px;
/* border: 1px solid pink; */
}
.box ul .main2 {
width: 80px;
height: 80px;
}
li:hover {
background-color: #31C37C;
color: white;
}
.box ul .main3 {
width: 80px;
height: 80px;
}
/* .main3:hover {
background-color: #31C37C;
color: white;
} */
.box ul .main4 {
width: 80px;
height: 80px;
}
/* .main4:hover {
background-color: #31C37C;
color: white;
} */
.box ul .main5 {
width: 80px;
height: 80px;
}
.input1 {
width: 210px;
height: 35px;
background-image: url(D:\web鍓嶇\绯荤粺鐝璡qq闊充箰.html\img\img\39.png);
background-repeat: no-repeat;
border: 1px solid #E4E4E4;
background-position: right;
border-radius: 4px;
outline-color: hsl(161, 37%, 64%);
}
.div1 {
padding-top: 22px;
width: 730px;
height: 58px;
float: right;
}
.div1 .div3 {
width: 78px;
height: 20px;
font-size: 17px;
font-family: "榛戜綋";
margin-top: 10px;
margin-right: 400px;
float: right;
}
.div1 .div4 {
width: 150px;
height: 35px;
margin-top: -35px;
margin-right: 260px;
float: right;
background: #31C37C;
font-size: 15px;
color: #FFFFFF;
text-align: center;
line-height: 30px;
}
.div1 .div5 {
width: 100px;
height: 35px;
margin-top: -35px;
margin-right: 120px;
float: right;
border: 1px solid #E4E4E4;
font-size: 15px;
text-align: center;
line-height: 30px;
}
.div6 {
width: 900px;
margin: 0 auto;
margin-top: 10px;
}
.div6 :hover {
color: #31C37C;
}
.div6 span {
display: block;
float: left;
margin-left: 35px;
}
.div7 {
width: 1580px;
margin-top: 80px;
text-align: center;
font-size: 30px;
font-family: 榛戜綋;
font-weight: bold;
}
.div8 {
width: 1580px;
height: 450px;
background: white;
}
.div8_1 {
width: 760px;
margin: 0 auto;
margin-top: 10px;
}
.div8_1 :hover {
color: #31C37C;
}
.div8_1 span {
float: left;
margin-left: 55px;
margin-top: 5px;
}
.div8_2 {
width: 1448px;
height: 220px;
margin-top: 20px;
margin-left: 66px;
display: inline-block
}
.div8_2 .img1 {
margin-left: 0px;
}
.div8_2 img {
width: 220px;
height: 220px;
float: left;
margin-left: 57px;
}
.div8_2 .span1 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 2px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
}
.div8_2 .span2 {
width: 58px;
height: 116px;
background: #EAECEA;
margin-left: 0px;
margin-top: 52px;
float: left;
font-size: 50px;
text-align: center;
line-height: 116px;
}
.div8_3 {
width: 1448px;
height: 70px;
margin-left: 66px;
margin-top: 2px;
}
.div8_3 span {
width: 220px;
height: 70px;
display: inline-block;
margin-left: 52px;
}
.div8_3 .p1 {
color: #B3B3B3;
line-height: 40px;
}
.div8_3 .p2 {
font-size: 15px;
}
.div8_3 .p3 {
font-size: 14px;
}
.div8_4 {
width: 1580px;
height: 20px;
margin-top: 30px;
}
.div8_4 span {
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid white;
background: #E8E8E8;
display: inline-block;
}
.div8_4 .span1 {
background: #E8E8E8;
margin-left: 800px;
}
.div8_4 .span1:hover {
background: #AFAFAF;
}
.div8_4 .span2:hover {
background: #AFAFAF;
}
.div8_4 .span2 {
background: #E8E8E8;
}
.div9 {
width: 1580px;
height: 500px;
background: white;
}
.div9_1 {
width: 1448px;
margin: 0 auto;
margin-top: 10px;
}
.div9_1 :hover {
color: #31C37C;
}
.div9_1 span {
float: left;
margin-left: 60px;
margin-top: 5px;
}
.div9_1 .span1 {
width: 100px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
border: 1px solid #808080;
}
.div9_1 .span2 {
float: left;
margin-left: 300px;
margin-top: 5px;
}
.div9_2 {
width: 1448px;
height: 102px;
margin-top: 60px;
margin-left: 66px;
}
.div9_2 img {
width: 100px;
height: 100px;
}
.div9_2 span {
width: 400px;
height: 102px;
background: #F9F9F9;
display: inline-block
}
.div9_2 .span1 {
margin-left: 100px;
}
.div9_2 .span2 {
float: right;
}
.div9 .font1 {
position: relative;
top: -60px;
}
.div9 .font2 {
position: relative;
top: -30px;
left: -53px;
color: #B3B3B3;
}
.div9_2 .font3 {
position: relative;
top: -40px;
left: 80px;
color: #B3B3B3;
}
.div9_3 {
width: 1448px;
height: 102px;
margin-top: 10px;
margin-left: 66px;
}
.div9_3 img {
width: 100px;
height: 100px;
}
.div9_3 span {
width: 400px;
height: 102px;
background: #F9F9F9;
display: inline-block
}
.div9_3 .span1 {
margin-left: 100px;
}
.div9_3 .span2 {
float: right;
}
.div9_3 .font3 {
position: relative;
top: -40px;
left: 80px;
color: #B3B3B3;
}
.div8_4 {
width: 1580px;
height: 20px;
margin-top: 30px;
}
.div9_4 span {
width: 10px;
height: 10px;
margin-top: 40px;
border-radius: 100%;
border: 1px solid white;
display: inline-block;
}
.div9_4 .span1 {
background: #E8E8E8;
margin-left: 800px;
}
.div9_4 .span1:hover {
background: #AFAFAF;
}
.div9_4 .span2 {
background: #E8E8E8;
}
.div9_4 .span2:hover {
background: #AFAFAF;
}
.div9_4 .span3 {
background: #E8E8E8;
}
.div9_4 .span3:hover {
background: #AFAFAF;
}
.div10 {
width: 1580px;
height: 400px;
background: white;
}
.div10_1 {
width: 1448px;
height: 280x;
margin: 0 auto;
margin-top: 20px;
}
.div10_1 .span1 {
float: right;
}
.div11 {
width: 1580px;
height: 750px;
background: white;
}
.div11_1 {
width: 1448px;
margin: 0 auto;
margin-top: 10px;
}
.div11_1 :hover {
color: #31C37C;
}
.div11_1 span {
float: left;
margin-left: 60px;
margin-top: 5px;
}
.div11_1 .span1 {
width: 100px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
float: right;
}
.div11_1 .span2 {
float: left;
margin-left: 500px;
margin-top: 5px;
}
.div12 {
width: 1580px;
height: 530px;
background: white;
}
.div12_2 {
width: 1448px;
height: 420px;
margin-top: 20px;
margin-left: 66px;
display: inline-block
}
.div12_2 img {
margin-left: 59px;
width: 220px;
height: 420px;
}
.div12_2 .img1 {
float: left;
}
.div13 {
width: 1580px;
height: 550px;
background: white;
}
.div13_2 {
width: 1448px;
height: 120px;
margin-top: 20px;
margin-left: 66px;
display: inline-block
}
.div13_2 img {
width: 200px;
margin-left: 30px;
}
.div13_3 {
width: 1448px;
height: 70px;
margin-left: 66px;
margin-top: 2px;
}
.div13_3 span {
width: 220px;
height: 70px;
display: inline-block;
margin-left: 10px;
}
.div13_3 .p1 {
color: #B3B3B3;
line-height: 30px;
}
.div13_3 .p2 {
font-size: 15px;
}
.div13_3 .p3 {
font-size: 14px;
}
.p1 .img {
display: inline-block
}
.div14 img {
width: 1580px;
}(img)
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
22
0- 0
已为社区贡献3条内容
所有评论(0)