admin管理员组文章数量:1530234
QQ音乐官网首页
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="Shortcut Icon" href="./images/QQm.jpg">
<meta charset="UTF-8">
<title>qqmusic</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- <img class="khd" src=".images/khd.jpg" alt=""> -->
<div class="khdx">
<img class="khd" src="./images/khd.jpg" alt="">
</div>
<!-- 头部分 -->
<div class="header">
<a href="https://y.qq/" target="_blank">
<img class="logo" src="./images/logo.png" alt="">
</a>
<div class="header_menu">
<ul>
<li>音乐馆</li>
<li>我的音乐</li>
<li>客户端</li>
<li>音乐号</li>
<li>VIP</li>
</ul>
</div>
<div class="search">
<input class="a" type="text" value="蒙面唱将猜猜猜">
<a href="https://y.qq/portal/search.html#page=1&searchid=1&remoteplace=txt.yqq.top&t=song&w=%E8%92%99%E9%9D%A2%E5%94%B1%E5%B0%86%E7%8C%9C%E7%8C%9C%E7%8C%9C"target="_blank"><img class="find" src="./images/search.png" alt="搜索"></a>
<span class="login">登录</span>
</div>
<span class="green">开通绿钻豪华版</span>
<span class="pay">开通付费包</span>
</div>
<!-- banner部分 -->
<div class="banner">
<div class="all">
<div class="title">新歌发布</div>
<div class="title_menu">
<div class="l">
<ul>
<li>内地</li>
<li>港台</li>
<li>欧美</li>
<li>韩国</li>
<li>日本</li>
</ul>
</div>
<div class="r">全部></div>
</div>
<div class="singer">
<div>
<img src="./images/11.jpg" alt="">
<div>
<span class="sing">我们的时光</span>
<br>
<span class="singp">TFBOYS</span>
</div>
</div>
<div>
<img src="./images/12.jpg" alt="">
<div>
<span class="sing">异想</span>
<br>
<span class="singp">陈翔</span>
</div>
</div>
<div>
<img src="./images/13.jpg" alt="">
<div>
<span class="sing">陪你听全世界</span>
<br>
<span class="singp">丢火车乐队</span>
</div>
</div>
<div>
<img src="./images/14.jpg" alt="">
<div>
<span class="sing">中国新歌声第二季 第4期</span>
<br>
<span class="singp">中国新歌声</span>
</div>
</div>
</div>
</div>
</div>
<!-- middle部分 -->
<div class="middle">
<div class="title1">热门歌单</div>
<div class="things">
<div>
<img src="./images/21.jpg" alt="">
<div>
<span class="thing">权威:香港英皇旗下歌手全收...</span>
<br>
<span class="bofang">播放量:42.5万</span>
</div>
</div>
<div>
<img src="./images/22.jpg" alt="">
<div>
<span class="thing">自创语言:历史老师听了也蒙...</span>
<br>
<span class="bofang">播放量:11.0万</span>
</div>
</div>
<div>
<img src="./images/23.jpg" alt="">
<div>
<span class="thing">YouTube点击量TOP100的ED...</span>
<br>
<span class="bofang">播放量:35.4万</span>
</div>
</div>
<div>
<img src="./images/24.jpg" alt="">
<div>
<span class="thing">一个人在家吃泡面绝对会哭...</span>
<br>
<span class="bofang">播放量:172.8万</span>
</div>
</div>
</div>
</div>
<!-- bodyer部分 -->
<div class="bodyer">
<div class="next">
<div class="title2">MV首播</div>
<div class="title_menu1">
<div class="l1">
<ul>
<li>全部</li>
<li>内地</li>
<li>港台</li>
<li>欧美</li>
<li>韩国</li>
<li>日本</li>
</ul>
</div>
<div class="r1">全部></div>
</div>
<div class="singer1">
<div>
<img src="./images/31.jpg" alt="">
<div>
<span class="sing1">Summer Storm</span>
<br>
<span class="singp1">제시카</span>
<br>
<span class="singp2">13.9万
</span>
</div>
</div>
<div>
<img src="./images/32.jpg" alt="">
<div>
<span class="sing1">海胆</span>
<br>
<span class="singp1">陈奕迅</span>
<br>
<span class="singp2">10.3万</span>
</div>
</div>
<div>
<img src="./images/33.jpg" alt="">
<div>
<span class="sing1">我心翱翔</span>
<br>
<span class="singp1">SNH48</span>
<br>
<span class="singp2">1.8万</span>
</div>
</div>
<div>
<img src="./images/34.jpg" alt="">
<div>
<span class="sing1">你点的歌救了我(影视版)(《噗通...)</span>
<br>
<span class="singp1">A-Lin</span>
<br>
<span class="singp2">6272</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer部分 -->
<div class="footer">
<div class="later">
<div class="first">
<div class="load">
<div class="explain">
<span>下载QQ音乐客户端</span>
</div>
<div class="locn1">
<div class="PC">
<img src="./images/01.png" alt="PC版">
<br>
<span>PC版</span>
</div>
<div class="Mac">
<img src="./images/02.png" alt="Mac版">
<br>
<span>Mac版</span>
</div>
<div class="Android">
<img src="./images/03.png" alt="Android版">
<br>
<span>Android版</span>
</div>
<div class="iPhone">
<img src="./images/04.png" alt="iPhone版">
<br>
<span>iPhone版</span>
</div>
</div>
</div>
<div class="product">
<div class="explain">
<span>特色产品</span>
</div>
<div class="locn2">
<div class="Ksong">
<img src="./images/05.png" alt="全民K歌">
<br>
<span>全民K歌</span>
<br>
<span>车载互联</span>
</div>
<div class="Super">
<img src="./images/06.png" alt="Super Sound">
<br>
<span>Super Sound</span>
<br>
<span>QQ演出</span>
</div>
<div class="Qplay">
<img src="./images/07.png" alt="QPlay">
<br>
<span>QPlay</span>
</div>
</div>
</div>
<div class="compete">
<div class="explain">
<span>合作链接</span>
</div>
<div class="locn3">
<div class="left">
<ul>
<li>CJ E&M</li>
<li>最新版QQ</li>
<li>QQ浏览器</li>
<li>星钻</li>
</ul>
</div>
<div class="mid">
<ul>
<li>腾讯视频</li>
<li>腾讯社交广告</li>
<li>画报</li>
<li>腾讯微云</li>
</ul>
</div>
<div class="right">
<ul>
<li>手机QQ空间</li>
<li>电脑管家</li>
<li>黄钻活动</li>
<li>更多</li>
</ul>
</div>
</div>
</div>
</div>
<div class="about">
<span class="last">
关于腾讯 | About Tencent | 服务条款 | 用户服务协议 | 隐私政策 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航
</span>
<br>
<span class="last">
Copyright 1998 - 2017 Tencent. All Rights Reserved.
</span>
<br>
<span class="last">
腾讯公司©版权所有 腾讯网络文化经营许可证
</span>
</div>
</div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
img:hover {
transform: scale(1.1);
}
.khdx {
width: 205px;
height: 162px;
top:100px;
background-color: red;
/*display:block;*/
position:fixed;
right:50px;
}
.khd {
}
.header {
width: 990px;
margin: 0 auto;
}
.header>a {
text-decoration: none;
}
.logo {
width: 150px;
height: 40px;
margin-top: 10px;
float: left;
}
.header_menu {
display: inline-block;
width: 350px;
}
.header ul {
display: flex;
justify-content: space-between;
}
.header_menu ul li {
list-style: none;
width: 80px;
height: 50px;
padding: 3px;
text-align: center;
line-height: 50px;
}
.header_menu ul li:hover {
background-color: #31c27d;
color: #ffffff;
cursor: pointer;
}
.header_menu ul li:active {
opacity: 0.7;
}
.search {
display: inline-block;
}
.search .a {
color:#cccccc;
}
.login {
font-size: 13px;
}
.find {
position: absolute;
margin-top: 4px;
margin-left: -22px;
}
.login {
margin-left: 10px;
}
.green {
display: inline-block;
width: 120px;
height: 23px;
text-align: center;
line-height: 23px;
background-color: #31c37c;
border-radius: 5%;
margin-left: 10px;
font-size: 13px;
}
.pay{
display: inline-block;
width: 100px;
height: 23px;
text-align: center;
line-height: 23px;
border: 1px solid #fafafa;
border-radius: 5%;
margin-left: 10px;
font-size: 13px;
}
.login:hover,.green:hover,.pay:hover {
cursor: pointer;
}
.banner {
width: 100%;
height: 580px;
background-image: url(../images/10.jpg);
}
.all {
width: 990px;
height: 520px;
margin: 0 auto;
}
.title {
width: 200px;
height: 50px;
padding: 45px;
text-align: center;
margin:0 auto;
font-size: 45px;
color: #ffffff;
}
.title_menu {
display: inline-block;
width: 990px;
}
.all .l{
float: left;
margin-left: 280px;
}
.all .r {
float: right;
color:#939393;
font-size: 5px;
}
.all .r:hover {
color: #ffffff;
}
.all ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.title_menu ul li {
list-style: none;
width: 80px;
height: 20px;
padding: 3px;
text-align: center;
line-height: 20px;
color:#939393;
font-size: 5px;
}
.title_menu ul li:hover {
color: #fff;
}
.singer {
display: flex;
width: 990px;
height: 350px;
}
.singer div img {
width: 247px;
height: 247px;
}
.singer>div {
text-align: center;
}
.singer>div>div {
position: absolute;
margin-top: -4px;
width: 247px;
height: 65px;
background-color: #000;
opacity: 0.7;
}
.sing {
color: #ffffff;
font-size: 10px;
}
.singp {
color: #939393;
font-size: 5px;
}
.title:hover,.title_menu>div:hover,.singer>div:hover {
cursor: pointer;
}
.middle {
width: 990px;
height: 520px;
margin: 0 auto;
}
.title1 {
width: 200px;
height: 50px;
padding: 45px;
text-align: center;
margin:0 auto;
font-size: 45px;
color: #000000;
}
.things {
display: flex;
width: 990px;
height: 350px;
}
.things div img {
width: 247px;
height: 247px;
}
.things>div {
text-align: center;
}
.things>div>div {
position: absolute;
margin-top: -4px;
width: 247px;
height: 65px;
background-color: #000;
opacity: 0.7;
}
.thing {
color: #ffffff;
font-size: 10px;
}
.bofang {
color: #939393;
font-size: 5px;
}
.things>div:hover {
cursor: pointer;
}
.bodyer {
width: 100%;
height: 410px;
background-color: #e6e6e6;
}
.next {
width: 990px;
height: 520px;
margin: 0 auto;
}
.title2 {
width: 200px;
height: 50px;
padding: 45px;
text-align: center;
margin:0 auto;
font-size: 45px;
color: #000000;
}
.title_menu1 {
display: inline-block;
width: 990px;
}
.next .l1{
float: left;
margin-left: 292px;
}
.next .r1 {
float: right;
color:#939393;
font-size: 5px;
}
.next ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.title_menu1 ul li {
list-style: none;
width: 65px;
height: 20px;
padding: 3px;
text-align: center;
line-height: 20px;
color:#939393;
font-size: 5px;
}
.title_menu1 ul li:hover {
color:#000000;
}
.next .r1:hover {
color:#000000;
}
.singer1 {
display: flex;
width: 990px;
height: 350px;
}
.singer1 div img {
width: 247px;
height: 150px;
}
.singer1>div {
text-align: center;
}
.singer1>div>div {
width: 247px;
height: 65px;
/*background-color: #000;*/
opacity: 0.7;
}
.sing1 {
color: #5d4e53;
font-size: 10px;
}
.singp1 {
color: #bfbdbe;
font-size: 5px;
}
.singp2 {
color: #bfbdbe;
font-size: 5px;
}
.title_menu1>div:hover,.singer1 img:hover,.singer1 span:hover {
cursor: pointer;
}
.footer {
width: 100%;
height: 350px;
background-color: #333333;
padding-top: 60px;
}
.first {
margin: 0 auto;
width: 990px;
display: flex;
justify-content: space-between;
}
.explain {
color:#7f7f7f;
}
.locn1 {
display: flex;
justify-content: space-between;
margin-top: 50px;
width: 270px;
}
.locn1>div {
width: 60px;
/*text-align: center;*/
font-size: 6px;
color: #7f7f7f;
}
.locn2 {
display: flex;
justify-content: space-between;
margin-top: 50px;
width: 270px;
}
.locn2>div {
width: 88px;
/*text-align: center;*/
font-size: 6px;
color: #7f7f7f;
}
.locn3 {
display: flex;
width: 320px;
justify-content: space-between;
}
.locn3 ul li {
list-style: none;
font-size: 10px;
margin-top: 3px;
color: #7f7f7f;
}
.locn3>div {
margin-top: 50px;
}
.about {
width: 990px;
text-align: center;
margin: 100px auto;
}
.last {
font-size: 7px;
color:#7f7f7f;
}
图片
版权声明:本文标题:html实训QQ音乐官网首页制作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725783495a1042439.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论