计算机毕业设计-仿QQ音乐--HTML+CSS

作品展示

html部分代码

CSS部分代码

轮播部分

作品展示

html部分代码

<body><!--头部--><header><div class="nav"><div class="first"><div class="logo"><a href="#"><img src="./img/logo.png" alt="" /></a></div></div><div class="two"><ul><li><a class="current" 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></div></header><!-- 歌单推荐 --><div class="content"><div class="inner"><div class="songSheet"><div class="songSheet_head"><span class="subtitle">歌 单 推 荐</span></div><div class="songSheet_table"><ul><li><a href="#" class="current">为你推荐</a></li><li><a href="#">欧美榜单</a></li><li><a href="#">国语</a></li><li><a href="#">粤语精选</a></li><li><a href="#">00年代</a></li><li><a href="#">纯音乐</a></li></ul></div><div class="songSheet_names"><ul><li><a href="">Live：林俊杰的那些神级现场</a><span>播放量：2533万</span></li><li><a href="">Ed sheeran | 冬日旋律</a><span>播放量：541万</span></li><li><a href="">2021年1月华语新歌推荐</a><span>播放量：125.1万</span></li></ul></div><div class="songSheet_circles"><ol><li class="current"></li><li></li></ol></div></div></div></div><!-- 新歌首发 --><div class="content"><div class="inner"><div class="songSheet"><div class="songSheet_h new"><span class="subtitle">新 歌 首 发</span></div></div></div><!--新碟首发--><div class="content"><div class="inner"><div class="songSheet"><div class="songSheet_head"><span class="subtitle">新 碟 首 发</span></div><div class="songSheet_table"><ul><li><a href="#" class="current">内地</a></li><li><a href="#">港台</a></li><li><a href="#">欧美</a></li></ul></div><div class="songSheet_pics"><ul><li><img src="./img/one1.jpg" alt="" class="songSheet_pic" /><i class="mask"></i><i class="cover_icon_play"></i></li><li><img src="./img/one2.jpg" alt="" class="songSheet_pic" /><i class="mask"></i><i class="cover_icon_play"></i></li><li><img src="./img/one5.jpg" alt="" class="songSheet_pic" /><i class="mask"></i><i class="cover_icon_play"></i></li></ul></div><div class="songSheet_names"><div class="songSheet_circles"><ol><li class="current"></li><li></li></ol></div></div></div></div>
<!-- 轮播图开始 --><div id="lunbo-box"><div id="lunbo-con"><div id="lunbo-1"></div><div id="lunbo" class="d-flex justify-content-between"><img src="./img/bo1.webp" class="lunbo-img" /><img src="./img/bo5.webp" class="lunbo-img" /></div></div></div><!--尾部--><footer><div class="shang"><div class="right"><h3>下载QQ音乐客户端</h3><ul><li><a href="#" class="pc current"> <span>PC版</span></a></li><li><a href="#" class="mac"><span>Mac版</span></a></li><li><a href="#" class="android"><span>Android版</span></a></li><li><a href="#" class="iphone"><span>iPhone版</span></a></li></ul></div>

CSS部分代码

* {margin: 0;padding: 0;
}header {width: 1200px;height: 142px;margin: 0 auto;
}.first .logo {float: left;
}.first .logo a img {display: block;width: 170px;height: 46px;padding-top: 22px;
}.first .navtop {float: left;overflow: hidden;
}.first .navtop ul {list-style: none;margin-left: 30px;height: 90px;
}.first .navtop ul li .current:hover {color: white;
}.first .search {float: left;overflow: hidden;margin: 26px 0 0 10px;border: 1px solid #f2f2f2;border-radius: 5px;position: relative;
}.songSheet_pics ul li:hover .cover_icon_play {opacity: 0.9;transform: scale(1) translateZ(0);transition-property: opacity, transform;transition-duration: 0.5s;cursor: pointer;
}.songSheet_pics ul li:hover .cover_icon_play,
.cover_icon_play {background-image: url(../pics/video.png);background-repeat: no-repeat;
}.
}.content .songSheet .carrousel a {display: block;width: 20px;height: 38px;position: absolute;top: 250px;background-image: url(./img/t.png);background-repeat: no-repeat;
}.content .songSheet .carrousel .leftBtn {left: -80px;background-position: -20px -120px;
}.content .songSheet .carrousel .rightBtn {right: -80px;background-position: 0 -120px;
}.content .songSheet .area ul {text-align: center;width: 390px;margin-top: 30px;
}.content .songSheet .playall {position: absolute;left: 0;top: initial;border: 1px solid #c9c9c9;color: #000;margin-left: 10%;margin-top: 20px;border-radius: 2px;font-size: 14px;margi
}.content .songSheet .newsongs ul li span {display: block;position: absolute;right: 35px;top: 45px;color: #999;font-family: "poppin";
}footer .shang {text-align: center;margin: 0 auto;width: 100%;height: 250px;
}footer .shang .right,
.center,
.left {float: left;margin-left: 290px;
}footer .shang .right ul li {footer .shang .center ul li a {text-decoration: none;color: #999;
}footer .shang .center ul li a :hover {color: #31c27c;
}footer .shang .left ul li {list-style: none;margin: 5px 0;
}footer .shang .left ul li a {text-decoration: none;

轮播部分

  <style>#lunbo-box {width: 100%;overflow: hidden;height: 232px}#lunbo-con {width: 500%;float: left;}#lunbo,#lunbo-1 {float: left;}.lunbo-img {float: left;height: 232px;width: 186px;margin-left: 16px}header ul li .t {left: 500px;}</style><script type="text/javascript">window.onload = function() {var marqueeBox = document.getElementById("lunbo-box");var marquee = document.getElementById("lunbo");var marqueeCopy = document.getElementById("lunbo-1");marqueeCopy.innerHTML = marquee.innerHTML;function fun() {//从右向左if (marqueeBox.scrollLeft >= 800) {marqueeBox.scrollLeft = 0;} else {marqueeBox.scrollLeft++;}//从左向右// if (marqueeBox.scrollLeft >= 0) {//   marqueeBox.scrollLeft = 800;// } else {//   marqueeBox.scrollLeft -- ;// }}var fun1 = setInterval(fun, 25);marqueeBox.onmouseover = function() {// 鼠标经过时  清除定时器  停止图片的滚动clearInterval(fun1);};marqueeBox.onmouseout = function() {//鼠标离开后  继续滚动图片fun1 = setInterval(fun, 25);};};</script>

源码下载地址：仿QQ音乐网页版首页（静态）-Javascript文档类资源-CSDN下载

计算机毕业设计-仿QQ音乐--HTML+CSS相关推荐

计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计在线云音乐系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计在线云音乐系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计在线云音乐系统源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目架构:B/S架构 ...
java计算机毕业设计花田音乐网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计花田音乐网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计花田音乐网站源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目架构:B/S架构开 ...
计算机毕业设计Java“原创音乐爱好者”交流网站(源码+系统+mysql数据库+lw文档)
计算机毕业设计Java"原创音乐爱好者"交流网站(源码+系统+mysql数据库+lw文档) 计算机毕业设计Java"原创音乐爱好者"交流网站(源码+系统+mys ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
day-096-ninety-six-20230621-仿QQ音乐播放器-静态页面的免费部署-vue2 仿QQ音乐播放器 audio音频标签 audio标签 <audio src="i ...
android+仿ios+音乐播放器,iOS简单的音乐播放器(仿QQ音乐)
AVPlayer实现基本的播放,暂停,上一首,下一首,调节音量,调节进度等,正在学习的新人可以看下,有什么不足可以互相学习,谢谢支持 qq音乐.gif 这个是我写的一个简单的低仿QQ音乐, 如果你也喜 ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...

计算机毕业设计-仿QQ音乐--HTML+CSS

html部分代码

CSS部分代码

轮播部分

计算机毕业设计-仿QQ音乐--HTML+CSS相关推荐

最新文章

热门文章