目录
作品展示
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>