网易云网页版(未完成6.6 ）
2024-07-01 07:35:40
文章目录
- 准备
- 技术选型
- 搭建相关文件夹结构
- 想要做成的样子
- Part 1
- 注意点
- html代码
- CSS代码
- 现在完成图
- Part 2
- 注意点
- html代码
- CSS代码
- 现在完成图
- Part 3
- 注意点
- html代码
- CSS代码
- 现在完成图
准备
技术选型
传统布局 使用html + css + js + bootstrap
搭建相关文件夹结构
引入 CSS初始化文件
选字体图标
想要做成的样子
Part 1
这三个部分是固定定位，header头部，dropdown导航左侧，footer页面底部
注意点
！！input 标签不支持伪元素
发现了字节的字体图标库
https://iconpark.oceanengine.com/official
html代码
<!-- 头部固定栏 --><header><a href="javascript:;"><div class="logo">网易云音乐</div></a><div class="search"><button class="left"><</button><button class="right">></button><div class="search-logo"></div><input type="text" placeholder="沙一汀EL"><div class="sing"></div></div><div class="module"><ul><li><a href="javascript:;"><img src="fonts/圆领衫_clothes-crew-neck.svg" alt=""></a></li><li><a href="javascript:;"><img src="fonts/配置_config.svg" alt=""></a></li><li><a href="javascript:;"><img src="fonts/邮件_mail.svg" alt=""></a></li><li>|</li><li><a href="javascript:;">—</a></li><li><a href="javascript:;"><img src="fonts/全局放大_full-screen.svg" alt=""></a></li><li><a href="javascript:;"><img src="fonts/关闭_close.svg" alt=""></a></li></ul></div><div class="user"><a href="#" class="headshot"><img src="data:images/user.jpg" alt=""></a><a href="#" class="uname">银河_漂流记</a></div></header>CSS代码
/* 头部 */
header {position: fixed;top: 0;left: 0;width: 1533px;height: 90px;background-color: #3e6550;
}header .logo::before {font-family: 'icomoon';content: '\e910';display: inline-block;margin: 0 15px 0 24px;color: #f3faf6;line-height: 90px;
}header .logo {float: left;width: 240px;height: 90px;color: #ffffff;font-size: 27px;text-align: center;line-height: 90px;font-family: Arial, Helvetica, sans-serif;
}header .search {position: relative;float: left;width: 420px;height: 90px;margin-left: 90px;
}header .search button {width: 37px;height: 37px;line-height: 37px;text-align: center;margin-top: 28px;background-color: #385c49;border-radius: 50%;color: #d7dedabb;font-size: 25px;
}header .search .search-logo {font-family: 'icomoon';position: absolute;top: 33px;left: 108px;width: 20px;height: 20px;color: #adbcb3;z-index: 2;font-size: 18px;
}header .search input {position: relative;width: 243px;height: 40px;background-color: #3b604c;margin-left: 20px;border-radius: 20px;padding-left: 34px;font-size: 16px;color: #adbcb3;vertical-align: super;
}
header .search .sing {font-family: 'icomoon';display: inline-block;width: 40px;height: 40px;color: #c9d1cc;font-size: 26px;background-color: #3b604c;text-align: center;border-radius: 50%;margin-left: 10px;cursor: pointer;
}header .user {float: right;width: 188px;height: 90px;margin-left: 80px;
}header .user .headshot {display: inline-block;width: 42px;height: 42px;border-radius: 50%;margin-top: 23px;
}header .user .headshot img {width: 40px;height: 40px;border-radius: 50%;
}
header .user .uname {position: relative;color: rgba(255, 255, 255, 0.849);font-size: 18px;vertical-align:sub;
}header .user .uname::after{position: absolute;top: -2px;left: 103px;font-family: 'icomoon';content: '';font-size: 20px;
}
header .module {float: right;margin-right: 20px;
}header .module ul li {float: left;height: 24px;padding: 0 15px;margin-top: 24px;line-height: 28px;color: rgba(255, 255, 255, 0.722);
}
header .module ul li a {font-family: 'icomoon';color: rgba(255, 255, 255, 0.686);font-size: 20px;
}header .module ul li a:hover{color: #fff;
}header .module ul li a img {width: 24px;height: 24px;opacity: 0.6;
}header .module ul li a img:hover {opacity: 1;
}现在完成图
Part 2
注意点
超出的部分有滚动条：overflow:auto;
滚动条的样式！
一个元素最多只能有一个伪元素！
溢出的元素省略号显示
html代码
<!-- 侧边导航栏dropdown --><div class="dropdown"><!-- 滚动条 --><div class="scrollbar"></div><ul><li class="liactive"><a href="javascript:;">发现音乐</a></li><li><a href="javascript:;">播客</a></li><li><a href="javascript:;">视频</a></li><li><a href="javascript:;">关注</a></li><li><a href="javascript:;">直播</a></li><li><a href="javascript:;">私人FM</a></li></ul><dl class="mySong"><dt>我的音乐</dt><dd><a href="javascript:;"><img src="./fonts/下载_download.svg">本地与下载</a></dd><dd><a href="javascript:;"><img src="./fonts/时间_time.svg">最近播放</a></dd><dd><a href="javascript:;"><img src="./fonts/云存储_cloud-storage.svg">我的音乐云盘</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐文件夹_folder-music.svg">我的播客</a></dd><dd><a href="javascript:;"><img src="./fonts/收藏好友_personal-collection.svg">我的收藏</a></dd></dl><dl class="createSong"><dt>创建的歌单<img src="./fonts/下_down.svg" alt=""></dt><dd><a href="javascript:;"><img src="./fonts/喜欢_like.svg">我喜欢的音乐</a><a href="javascript:;" class="likeSong"><img src="./fonts/心电_cardioelectric.svg" alt=""></a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">你喜欢Round_2吗</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">沙一汀EL</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">Free-Out</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">歌单：R&B享受独处</a></dd></dl><dl class="createSong"><dt>收藏的歌单<img src="./fonts/下_down.svg" alt=""></dt><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">【剪辑向】欲/燃/踩点/se气/病娇暗黑</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">今天从《red lips（被我蒙对）》听起|私人雷达</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">华语R&B ：慵懒独处花园</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">温馨提示：你已经很久没有可爱过啦</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">本人写作业学习歌单</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">聆听优质的中文说唱Flow Vol.1</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">rapper 说情话</a></dd><dd><a href="javascript:;"><img src="./fonts/音乐菜单_music-menu.svg">"好听到爆炸的说唱"</a></dd></dl></div>CSS代码
.dropdown {position: relative;top: 0;left: 0;width: 292px;height: 100%;z-index: -1;padding-top: 90px;border-right: 1px solid #e1e1e1;overflow: auto;
}.dropdown ul {padding-top: 20px;overflow: hidden;padding-right: 30px;
}.dropdown::-webkit-scrollbar {/*滚动条整体样式*/width: 7px;/*高宽分别对应横竖滚动条的尺寸*/height: 1px;
}.dropdown::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;box-shadow: inset 0 0 5px rgba(253, 253, 253, 0.2);background: #e0e0e0;
}.dropdown::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.898);border-radius: 10px;background: #fff;
}.dropdown ul li {width: 100%;height: 57px;padding: 8px;margin-left: 20px;
}.dropdown ul .liactive {background-color: #f6f6f7;border-radius: 5px;
}.dropdown ul .liactive a {font-size: 26px;font-weight: 700;
}.dropdown ul li:hover {background-color: #f6f6f7;border-radius: 5px;
}.dropdown ul li a {display: block;width: 100%;height: 100%;font-size: 23px;color: #4c4c4c;
}.dropdown ul li a:hover {color: #000000;
}.dropdown dl {padding-right: 30px;padding-top: 10px;
}.dropdown dt {font-size: 20px;color: #acaaaa;margin-left: 20px;padding: 8px;
}.dropdown dd {width: 100%;padding: 12px 8px;margin-left: 20px;
}.dropdown dd:hover {background-color: #f6f6f7;border-radius: 5px;
}.dropdown dd a {display: block;width: 200px;height: 100%;font-size: 22px;color: #676767;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.dropdown dd a:hover {color: #000000;
}.dropdown dd img {width: 40px;padding-right: 15px;
}.dropdown .createSong dt {position: relative;
}.dropdown .createSong dt img {cursor: pointer;width: 18px;
}.dropdown .createSong dt::after {content: '';position: absolute;top: 12px;left: 230px;width: 40px;height: 25px;background: url(../fonts/加_plus.svg) no-repeat;background-size: 22px;
}.dropdown .createSong {position: relative;
}.dropdown dd a.likeSong {position: absolute;top: 69px;right: 25px;width: 52px;height: 30px;border: 1px solid #efefef;border-radius: 12px;text-align: center;
}.dropdown dd a.likeSong img {width: 20px;padding: 0;padding-bottom: 8px;
}
现在完成图
Part 3
注意点
- 这里明显看到后面溢出的文字不是用省略号，而是直接隐藏，所以这里的为 text-overflow:clip;
- 为了让这个动起来，使用了css动画效果
html代码
<!-- 底部播放器footer --><footer><div class="left"><!-- 专辑封面 --><div class="albumart"><img src="./images/在你身边就失去超能力.png" alt=""></div><!-- 歌曲信息 --><div class="sing-info"><!-- 歌曲名字 --><p class="songName">在你身边就失去超能力(Live)</p><img src="./fonts/喜欢_like.svg" alt=""><!-- 歌手 --><p class="singer">刘思鉴</p></div></div><div class="center"><!-- 播放按钮 --><div class="playback"><!-- 列表循环 --><button class="listloops"><img src="./fonts/循环一次_loop-once.svg" alt=""></button><!-- 上一首歌曲 --><button class="previousSong"><img src="./fonts/上一曲_go-start.svg" alt=""></button><!-- 暂停 --><button class="pauseSong"><img src="./fonts/暂停_pause.svg" alt=""></button><!-- 下一首歌曲 --><button class="nextSong"><img src="./fonts/下一曲_go-end.svg" alt=""></button><button class="lyrics">词</button></div><!-- 歌曲时长 --><div class="songlength">00:00<div class="lengthbottom"></div>03:32</div></div><div class="right"><button class="quality">标准</button><!-- 音效 --><button class="acoustics"><img src="./fonts/演出_performance.svg" alt=""></button><!-- 音量 --><button class="loudness"><img src="./fonts/声音-大_volume-notice.svg" alt=""></button><button class="friends"><img src="./fonts/人群_peoples.svg" alt=""></button><button class="menu"><img src="./fonts/音乐菜单_music-list.svg" alt=""></button></div></footer>CSS代码
footer {position: fixed;bottom: 0;left: 0;width: 1533px;height: 110px;background-color: #ffffff;border-top: 1px solid #e1e1e1;
}footer .left {float: left;width: 440px;padding: 18px;
}footer .left .albumart {float: left;width: 73px;height: 73px;border-radius: 2px;margin-right: 18px;
}footer .left .albumart img {width: 73px;height: 73px;
}footer .left .sing-info {float: left;height: 73px;padding-top: 10px;
}footer .left .sing-info .songName {display: inline-block;width: 214px;font-size: 22px;color: #333333;white-space: nowrap;overflow: hidden;text-overflow: clip;
}footer .left .sing-info .sing-infoLike {display: inline;width: 31px;height: 31px;
}footer .left .sing-info img {vertical-align: inherit;margin-left: 5px;
}footer .left .sing-info .singer {font-size: 16px;color: #333333;
}footer .center {float: left;width: 634px;padding: 18px;text-align: center;
}footer .center .playback img {width: 30px;height: 30px;
}footer .center .playback button {background-color: #fff;
}footer .center .playback .listloops {margin-right: 55px;
}footer .center .playback .listloops img {width: 25px;height: 25px;
}footer .center .playback .pauseSong {margin: 0 50px;background-color: #ececec;width: 45px;height: 45px;border-radius: 50%;
}footer .center .playback .pauseSong img {width: 35px;height: 35px;
}footer .center .playback .lyrics {margin-left: 55px;font-size: 18px;
}footer .center .songlength {width: 630px;
}footer .center .songlength .lengthbottom {display: inline-block;position: relative;width: 540px;height: 5px;margin: 1px 4px;border-radius: 2px;background-color: #cdcdcd;
}footer .center .songlength .lengthbottom::after {position: absolute;top: 0;left: 0;content: '';display: inline-block;width: 0;height: 5px;margin: 0;border-radius: 2px;background-color: #60725d;/* 2.调用动画 */animation-name: longer;/* 持续时间 */animation-duration: 192s;
}@keyframes longer {/* 开始状态 */0% {width: 0;}/* 结束状态 */100% {width: 540px;}
}footer .right {float: right;height: 110px;line-height: 110px;
}
footer .right button {margin-right: 32px;
}
footer .right img{padding-bottom: 5px;
}
footer .right .quality {width: 50px;height: 30px;border-radius: 2px;border: 1px solid #000000;font-size: 20px;line-height: 30px;margin: 0 32px 0;
}现在完成图
网易云网页版(未完成6.6 ）相关推荐
- 仿网易云网页版音乐播放器，实现歌词随歌曲进行滚动高亮
引言 前几天在使用网易云网页版听歌时,看着那个页面的歌词随歌曲进行高亮,突然也想自己手动地去实现一下,于是呢,就仿照了网易云音乐的网页自己也写了个页面.效果图如下: 当然了,此处不做css的样式介绍, ...
- 2021 百度网盘网页版 倍速播放技巧(亲测有效)
2021 百度网盘网页版 倍速播放技巧(亲测有效) 安装谷歌浏览器(chrome浏览器) 打开谷歌浏览器,地址栏输入:chrome://extensions/ 或者 直接点这里 在打开的扩展程序 页面 ...
- 添加js代码：百度网盘网页版开倍速
好久没写博客了,上半年都在准备比赛,计算机设计大赛.物联网设计大赛都拿了省一,西门子拿了省特(好像还是总分第一),还有一些其他稀稀散散的比赛也终于都结束了,但是保研这件事估计还是凉凉了,呜呜呜,今年没 ...
- 网易云网页端歌单只显示前20首解决方法
网易云网页端歌单只显示前20首解决方法 现象说明 网易云网页端不给听完整的歌单了,只能听前20首,想听到歌单列表中的所有歌曲,怎么解决. 处理办法 用开发者工具将cookie的os改为pc即可解决. ...
- selenum模块抓取网易云网页搜索结果，并拿到MP3地址
网易云网页搜索结果的爬取 因为接口被加密过,不想费时间破解加密的参数 所以使用selenum,速度上还算不错,最后可以爬到MP3的地址,和歌曲详细信息. selenum使用时需要注意,网易云的音乐信息 ...
- electron-vu打造低配版网易云(Mv版)
前言 仓库地址 想体验一下写桌面程序,所以使用electron,然后为了快速开发 选择了electron-vue. 找了一些Api 最后发现还是网易云的Api比较好使,然后很多大佬写了网易云音乐了,所 ...
- 百度网盘网页版——文件排序
各位小伙伴都知道百度网盘的客户端可以直观的实现对文件按照文件名进行排序,而网页版的文件名排序却隐藏的很好,接下来让我们一起来看一看网页版的百度网盘如何对文件按照文件名排序吧! 这是一张我的百度网盘文件 ...
- Vue高仿网易云网页端源码
源码介绍: 音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾,而且偶然间发现 pc 端 web 版的网易云音乐做的实在是太简陋了,社区仿 pc 客户端的网易云也不多见,为了弥补这个遗憾,就 ...
- 基于Vue的网易云移动版搭建(我称之为以假乱真)
做这个是为了加深我对路由和一些vue2技术点的加深,其中采用的vant2的一些组件,非常好用, 先把准备好要用的,主要是axios来获取数据,babel...vant 来引用vant插件,moment ...
最新文章
- 暴君第一季/全集Tyrant迅雷下载
- Xftp5解决“要继续使用此程序,您必须应用最新的更新或使用新版本”
- android button自定义样式详解,Android自定义格式显示Button的布局思路
- 阿里巴巴Java开发手册终极版
- Uva12325 Zombie's Treasure Chest [二分区间+模拟退火]
- 在 Windows 命令提示符下启动 MySQL：net start mysql 发生系统错误 5。 拒绝访问。解决方式小结
- 小程序中view的自定义属性获取
- android 输入法sd卡,如何android扫描SD卡列出大文件
- jQuery修改margin
- 在Vue文件中引用模块的相对路径“@“符号表示什么意思？
- html行为样式动作是啥,什么是结构、样式、行为分离？
- 使用 Java 编写 Apache APISIX 插件
- Spss 的基本方法使用步骤
- 卸载IE8 恢复IE6 的两种方法
- 服务器的ras性能指标,Memory RAS Configuration
- openwrt系统理解
- 考研路茫茫——早起看书
- 前端与美工职能上的区别
- 墨者Bash漏洞分析溯源题解
- ORACLE安装方法