网站主要运用了 html，css，JS。
只展示了部分重要的几部分
页面效果展示
头部切换运用了for循环
头部css
.box-first {
width: 1100px;
height: 100%;
margin: 0 auto;
}
.logo {
float: left;
width: 176px;
height: 69px;
background: url(imgs/logo.png) no-repeat;
background-position-y: 12px;
background-size: 45px;
}
.logo a {
font-size: 24px;
font-weight: 400;
padding-left: 47px;
text-align: center;
line-height: 69px;
}
.header-list {
float: left;
width: 510px;
height: 100%;
/* background-color: greenyellow; */
}
.header-list li {
position: relative;
float: left;
height: 69px;
width: 85px;
text-align: center;
line-height: 70px;
/* background-color: grey; */
}
.header-list li:hover {
background-color: #000;
transition: all .5s;
}
.jiao {
display: none;
position: absolute;
top: 56px;
left: 42%;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 7px solid transparent;
border-bottom-color: red;
}
.bj {
background-color: #000;
z-index: 22;
}
.hot {
position: absolute;
top: 17px;
right: -41px;
width: 34px;
height: 14px;
font-size: 1px;
border-radius: 50px;
text-align: center;
line-height: 16px;
color: #fff;
background-color: red;
}
.denglu {
position: relative;
float: right;
width: 50px;
height: 45px;
margin-top: 13px;
text-align: center;
line-height: 45px;
/* background-color: blue; */
cursor: pointer;
}
.denglu a {
font-size: 13px;
color: #787878;
}
.denglu a:hover {
color: #ccc;
transition: all .3s
}
/* .jiao2 {
display: none;
position: absolute;
top: 31px;
left: 19px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 7px solid transparent;
border-bottom-color: #333;
}
.xiahua {
position: absolute;
top: 45px;
left: -24px;
display: inline-block;
width: 100px;
height: 1px;
border-bottom: 1px solid #333;
} */
.creat {
float: right;
width: 90px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 11px;
margin-top: 19px;
border-radius: 50px;
transition: all .4s;
border: 1px solid #999;
}
.creat a {
color: #999;
transition: all .4s;
}
.creat:hover {
border: 1px solid #fff;
color: #fff;
}
.creat:hover a {
color: #fff;
}
.search {
position: relative;
float: right;
width: 178px;
height: 32px;
margin-top: 19px;
margin-right: 15px;
border-radius: 50px;
border: 0;
overflow: hidden;
background-color: #fff;
}
.search .ipt {
width: 148px;
height: 100%;
margin-left: 28px;
outline: none;
border: none;
color: #999;
font-size: 12px;
}
.search span {
display: inline-block;
position: absolute;
top: 5px;
left: 2px;
width: 40px;
height: 100%;
line-height: 32px;
cursor: pointer;
}
.search span img {
width: 19px;
height: 19px;
margin-left: 5px;
}头部html
<div class="header">
<div class="box1">
<div class="box-first">
<h1 class="logo">
<a href="javascript:;">网易云音乐</a>
</h1>
<ul class="header-list">
<li class="bj">
<a href="javascript:;">发现音乐</a>
<sub class="jiao"></sub>
</li>
<li>
<a href="javascript:;">我的音乐</a>
<sub class="jiao"></sub>
</li>
<li>
<a href="javascript:;">朋友</a>
<sub class="jiao"></sub>
</li>
<li>
<a href="javascript:;">商城</a>
<sub class="jiao"></sub>
</li>
<li>
<a href="javascript:;">音乐人</a>
<sub class="jiao"></sub>
</li>
<li>
<a href="javascript:;">下载客户端</a>
<sub class="jiao"></sub>
<div class="hot">HOT</div>
</li>
</ul>
<div class="denglu">
<a href="javascript:;">登录</a>
</div>
<div class="creat">
<a href="javascript:;">创作者中心</a>
</div>
<div class="search">
<span for=""><img src="imgs/search.png" alt=""></span>
<input type="text" class="ipt" value="音乐/视频/电台/用户">
</div>
</div>头部js
// 头部切换
var ul = document.querySelector('.header-list');
var lis = ul.querySelectorAll('li'); //前两个是获取所有的li
var sub = document.querySelectorAll('sub'); //获取所有的sub
var jiao = document.querySelectorAll('.jiao'); //获取所有的sub
// 绑定事件
for (var i = 0; i < lis.length; i++) { //利用循环给所有的li添加事件
lis[i].setAttribute('index', i); //设置自定义的索引号
lis[i].addEventListener('click', function () {
// console.log(this.children[1]);
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
};
this.className = 'bj'; //排他思想添加背景图
var index = this.getAttribute('index'); //上面设置setAttribute的自定义索引号 在这里利用getAttribute拿到
for (var i = 0; i < jiao.length; i++) {
jiao[i].style.display = 'none';
};
jiao[index].style.display = 'block'; //利用排他思想给小li的点击事件添加小三角
});
jiao[0].style.display = 'block'; //设置第一个元素一打开就有
};
// 头部切换结束头部效果展示
登录页面运用了模态框拖拽
废话少说，上代码
html部分
<!-- 登录模态框 -->
<div class="focus">
<div class="focus-top">
<div class="focus-top1">登录</div>
</div>
<div class="focus-bottom">
<div class="focus-bottom1">
<div class="focus-bottom-left">
<img src="imgs/phone.png" alt="">
</div>
<div class="focus-bottom-right">
<p>扫码登录</p>
<div class="saoma">
<img src="imgs/erweima.png" alt="">
</div>
<p class="use">
请使用 <a href="javascript:;">网易云音乐App</a> 登录
</p>
</div>
<div class="choose">
<a href="javascript:;">
选择其他登陆模式
</a>
</div>
</div>
</div>
<span class="close">
<a href="javascript:;">x</a>
</span>
</div>
<!-- 登录模态框结束 -->css部分
/* 模态框 */
.focus {
/* display: none; */
position: relative;
position: absolute;
top: 176px;
left: 410px;
width: 530px;
height: 0px;
overflow: hidden;
z-index: 999 !important;
transition: all .4s;
}
.tianjia {
height: 530px;
}
.focus-top {
position: absolute;
top: 0;
left: 0;
width: 530px;
height: 38px;
border-radius: 4px 4px 0 0;
background-color: #000;
z-index: 99999;
cursor: move;
}
.focus-top1 {
width: 530px;
height: 38px;
padding-left: 45px;
line-height: 38px;
color: #fff;
font-weight: bold;
}
.focus-bottom {
position: relative;
width: 100%;
height: 379px;
background-color: #fff;
}
.focus-bottom1 {
position: absolute;
top: 78px;
width: 100%;
height: 228px;
}
.focus-bottom-left {
float: left;
width: 125px;
height: 228px;
margin-left: 101px;
}
.focus-bottom-left img {
width: 125px;
height: 228px;
}
.focus-bottom-right {
float: left;
width: 200px;
height: 228px;
margin-left: 60px;
}
.focus-bottom-right p {
font-size: 18px;
text-align: center;
}
.focus-bottom-right .saoma {
width: 138px;
height: 138px;
}
.focus-bottom-right .saoma img {
width: 138px;
height: 138px;
margin-left: 34px;
margin-top: 20px;
}
.focus-bottom-right .use {
width: 206px;
height: 20px;
margin-top: 29px;
font-size: 13px;
color: #aaaaaa;
}
.focus-bottom-right .use a {
color: rgb(67, 169, 252);
}
.focus-bottom-right .use a:hover {
text-decoration: underline;
}
.focus-bottom1 .choose {
width: 528px;
height: 30px;
}JS部分
// 模态框拖拽
// 获取元素
var focus = document.querySelector('.focus');
var close = document.querySelector('.close');
var denglu = document.querySelector('.denglu');
var focusTop = document.querySelector('.focus-top');
// 绑定事件 内部处理程序
// 点击显示和关闭开始
denglu.addEventListener('click', function () {
// focus.style.display = 'block';
focus.className = 'tianjia focus';
});
close.addEventListener('click', function () {
// focus.style.display = 'none';
focus.className = 'focus';
});
// 点击显示和关闭开始
// 模态框拖拽开始
focus.addEventListener('mousedown', function (e) {
var left = e.pageX - focus.offsetLeft;
var top = e.pageY - focus.offsetTop;
// 上面的显示和关闭点击事件过渡用完之后，在下面盒子拖动之前清掉过度，如果不拖拽，就返回去继续执行点击显示过渡，如果拖拽就继续向下执行
focus.style.transition = 'none';
document.addEventListener('mousemove', move);
function move(e) {
focus.style.left = e.pageX - left + 'px';
focus.style.top = e.pageY - top + 'px';
};
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move) // 鼠标弹起移除拖拽
});
// 模态框拖拽鼠标弹起之后，重新调用点击事件
denglu.addEventListener('click', function () {
// focus.style.display = 'block';
focus.className = 'tianjia focus';
});
close.addEventListener('click', function () {
// focus.style.display = 'none';
focus.className = 'focus';
focus.style.transition = '.4s';
});
});
// 模态框拖拽结束效果展示
最后面的歌曲列表运用了js的隔行变色，当然也有其他的办法，我认为使用js比较简单的
上代码
HTML部分代码
<div class="dl-right">
<a href="javascript:;">飙 升 榜</a>
<img src="imgs/play.png" alt="">
<img src="imgs/doc.png" alt="" class="inline">
</div>
</dt>
<dd class="content3-dd">
<ol class="content3-dd-ol">
<li class="yong">
<span class="qiansan">1</span>
<a href="javascript:;" class="ni">苦茶 (心动版)</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span class="qiansan">2</span>
<a href="javascript:;" class="ni">致你</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span class="qiansan">3</span>
<a href="javascript:;" class="ni">人间</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span>4</span>
<a href="javascript:;" class="ni">Fair Trade</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span>5</span>
<a href="javascript:;" class="ni">Self-Made</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span>6</span>
<a href="javascript:;" class="ni">Girls Want Girls</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span>7</span>
<a href="javascript:;" class="ni">My Life</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span>8</span>
<a href="javascript:;" class="ni">Good Ones</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span>9</span>
<a href="javascript:;" class="ni">Papi’s Home</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
<li class="yong">
<span class="last-span">10 </span>
<a href="javascript:;" class="ni">心跳的证明</a>
<div class="wenjian">
<a href="javascript:;">
<img src="imgs/bofang.png" alt="" title="播放">
</a>
<a href="javascript:;">
<img src="imgs/add.png" alt="" title="添加到播放列表">
</a>
<a href="javascript:;">
<img src="imgs/doc.png" alt="" title="收藏">
</a>
</div>
</li>
</ol>
<div class="dl-bottom">
<a href="javascript:;">查看全部></a>
</div>
</dd>
</dl>
</div>
css部分
.dl-right {
position: relative;
float: left;
left: -10px;
}
.dl-right a {
font-size: 18px;
color: #333;
}
.dl-right a:hover {
text-decoration: underline;
}
.dl-right img {
position: absolute;
top: 46px;
display: block;
width: 30px;
height: 30px;
}
.inline {
position: absolute;
top: 45px;
right: -3px;
}
.content3-dd {
position: relative;
height: 352px;
}
.content3-dd .content3-dd-ol {
width: 100%;
height: 310px;
}
.content3-dd .content3-dd-ol li {
position: relative;
width: 100%;
height: 32px;
}
.content3-dd .content3-dd-ol li:hover .wenjian {
display: block;
}
.content3-dd .content3-dd-ol li:hover .ni {
text-decoration: underline;
}
.content3-dd .content3-dd-ol li span {
padding-left: 33px;
font-size: 17px;
line-height: 32px;
}
.content3-dd .content3-dd-ol li>a {
display: block;
width: 89px;
padding-left: 6px;
font-size: 14px;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 300;
}
.content3-dd .content3-dd-ol li .ni {
position: absolute;
top: 0;
left: 52px;
font-size: 13px;
color: #000;
}
.content3-dd .content3-dd-ol li .wenjian {
display: none;
position: absolute;
right: 11px;
top: -12px;
}
.content3-dd .content3-dd-ol li .wenjian img {
width: 18px;
height: 18px;
}
.last-span {
padding-left: 27px !important;
}
.dl-bottom {
width: 100%;
height: 32px;
margin-top: 10px;
border-bottom: 1px solid #999;
background-color: #e9e9e9;
}
.dl-bottom a {
float: right;
line-height: 0px;
margin-right: 35px;
color: #000;
font-size: 13px;
font-weight: 400;
}
.qiansan {
color: #c10d0c !important;
}js部分
// 隔行变色
window.addEventListener('load', function () {
var ol = document.querySelectorAll('.content3-dd-ol');
var wenjian = document.querySelectorAll('.wenjian');
var lis = document.querySelectorAll('.yong');
for (var i = 0; i < lis.length; i++) {
if (i % 2 == 0) {
lis[i].style.backgroundColor = '#e6e6e6'
} else {
lis[i].style.backgroundColor = '';
};
};
});
// 隔行变色结束自己写的，肯定有很多不足，代码或许比较繁琐，但时间会让我的代码更加简洁，更优化
一起弄啊！！！
1885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
