web前端仿网易云官网

网站主要运用了 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');    //前两个是获取所有的livar sub = document.querySelectorAll('sub');   //获取所有的subvar 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">请使用&nbsp;<a href="javascript:;">网易云音乐App</a>&nbsp;登录</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 = '';};};});// 隔行变色结束

自己写的，肯定有很多不足，代码或许比较繁琐，但时间会让我的代码更加简洁，更优化

一起弄啊！！！

web前端仿网易云官网相关推荐

快来领猪肉啊，网易云官网建设意见征集计划获奖名单公布
自发布"网易云官网"意见征集江湖令后,众多侠客踊跃报名参加,并发来了很多十分走心的建议,让本宝宝备受感动. 最终通过层层筛选和评审,以下六位侠客获得了互联网大佬才能享用到的网易味央 ...
快为网易云官网出谋划策，5步轻松获得网易味央猪肉！
自2015年10月,网易发布网易云信(即时通讯云)之后,今年起又陆续推出了网易七鱼(全智能云客服).网易视频云.网易蜂巢(容器云).网易易盾(反垃圾云服务).网易云捕(质量跟踪平台)五款产品.此外,移 ...
仿网易云官网轮播图 html+css+js
效果: 可自动轮播,左右箭头按钮和下方小圆点可切图,鼠标移入时停止自动轮播. 视频演示: [html+css+js]仿网易云轮播图实现(后面有完整源码): 1. 定义标签,看注释: <!-- ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
Web项目实战分享——小米官网
Web项目实战分享--小米官网大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端一直想做一个vue项目然后呢我就做了http://www.tuicool.com/articles/eymeiiN 效果预览部分地方不全部根据原版,也有自由发挥 ...
企业网站+Axure企业官网通用模板+公司官网通用模板+web端高保真原型+门户官网+物流企业+门户网站+服务中心+产品中心+新闻中心+帮助中心+企业官网+公司官网+公司网站+登录注册+高保真交互
企业网站+Axure企业官网通用模板+公司官网通用模板+web端高保真原型+门户官网+物流企业+门户网站+服务中心+产品中心+新闻中心+帮助中心+企业官网+公司官网+公司网站+Axure原型+rp原型 ...

web前端仿网易云官网

web前端仿网易云官网相关推荐

最新文章

热门文章