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.com/" 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.com/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音乐官网首页制作相关推荐

仿qq音乐官网部分静态页面
简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:
HTML/CSS——PC端QQ飞车官网首页
原作品效果: 仿制品效果: 代码: HTML <!DOCTYPE html> <html lang="en"> <head><meta c ...
用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端一直想做一个vue项目然后呢我就做了http://www.tuicool.com/articles/eymeiiN 效果预览部分地方不全部根据原版,也有自由发挥 ...
仿做QQ音乐官网——问题与解决办法
问题与解决办法一.图片的路径 1.绝对路径:从根目录为起点到某一个目录的路径直接指明文件在硬盘上真正存在具体位置或者是以Web站点根目录为参考的完整路径. (绝对路径是规定死的目录,直观清晰,但被 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
【兴趣】QQ音乐VS网易云音乐竞品分析
手机音乐已经成为人们生活中不可或缺的一部分,成为人民大众喜闻乐见的娱乐方式,本文针对移动音乐APP做一个竞品分析,主要分析小编经常用的两款产品:QQ音乐.网易云音乐. 分析框架如下: 分析目的:从用户 ...
QQ音乐 vs 网易云音乐，用户体验哪家强？
作为一个音乐爱好者,QQ音乐和网易云音乐是小摹的手机必备APP.QQ音乐诞生于2005年,拥有非常丰富的音乐版权,在音乐类APP下载排行榜上始终立于不败之地.网易云音乐则发布于2013年,凭借着优质的 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
网页学习，尝试编写大鹏教育官网首页
最近在学习HTML和CSS,听的是pink老师的课,今天便尝试自己写出大鹏教育官网的首页. 如图是大鹏教育官网首页: 网址:https://www.dapengjiaoyu.cn/ 先说一下写的过程遇 ...

html实训QQ音乐官网首页制作

QQ音乐官网首页

html

css

图片

html实训QQ音乐官网首页制作相关推荐

最新文章

热门文章