CSS学习案例（16）：网易云音乐导航栏

网易云音乐官网点这里

原版：

自己做的：

网易云logo图标和搜索放大镜图标在阿里巴巴矢量图标库找

 <div class="container"><div class="top"><div class="content"><div class="logo"><a href=""><svg class="icon wangyiyunlogo" aria-hidden="true"><use xlink:href="#iconwangyiyunyinle"></use></svg></a></div><div class="nav1"><span><a href="">发现音乐</a></span><span><a href="">我的音乐</a></span><span><a href="">朋友</a></span><span><a href="">商城</a></span><span><a href="">音乐人</a></span><span><a href="">下载客户端</a></span></div><div class="search"><input class="search-txt" type="text" name="" placeholder="音乐/视频/电台/用户"><span><svg class="icon searchlogo" aria-hidden="true"><use xlink:href="#iconsearch"></use></svg></span></div><div class="createcenter"><a href="">创作者中心</a></div><div class="login"><a href="">登录</a></div></div></div><div class="nav2"></div></div>

*{margin: 0;padding: 0;}
html{--font_color: #dad3d3;
}
body{height: 100vh;width: 100vw;font-size: 14px;font-family: Arial, Helvetica, sans-serif;
}
a:link,a:visited{text-decoration: none;color: var(--font_color);display: block;
}.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}.container{min-width: 1519px;top: 0px;
}.top{height: 70px;box-sizing: border-box;background: #242424;border-bottom: 1px solid #000;overflow: hidden;
}.container .top .content{width: 1100px;margin: 0 auto;
}.container .top .content .logo{width: 220px;height: 69px;float: left;transform: translateY(-70px);
}
.container .top .content .logo a{width: 220px;height: 69px;
}.container .top .content .logo .icon.wangyiyunlogo{font-size: 220px;
}.container .top .content .nav1{margin: 0 14px;width: 520px;height: 70px;float: left;display: flex;justify-content: center;
}.container .top .content .nav1 span{color: var(--font_color);padding: 0 14px;line-height: 70px;
}.container .top .content .nav1 span:hover{background-color: #000;
}
.container .top .content .nav1 span:hover a{color: #fff;
}.container .top .content .search{float: left;width: 158px;height: 32px;margin: 19px 0;background-color: #fff;border-radius: 32px;position: relative;
}.container .top .content .search .search-txt{line-height: 32px;padding-left: 30px;border: none;background: none;outline: none;font-size: 12px;
}.container .top .content .search span{position: absolute;font-size: 16px;top: 7px;left: 8px;
}.container .top .content .createcenter{float: left;color: var(--font_color);margin: 18px;height: 32px;width: 88px;font-size: 12px;line-height: 32px;text-align: center;text-decoration: none;border-radius: 24px;border: 1px solid #5e5e5b;
}.container .top .content .createcenter:hover a{color: #fff;border-color: #fff;
}.container .top .content .login{float: right;line-height: 69px;color: var(--font_color);font-size: 12px;
}
.container .top .content .login a:hover{color: #fff;text-decoration: underline;
}

CSS学习案例（16）：网易云音乐导航栏相关推荐

项目总结3 类似网易云音乐导航栏指示器(个性推荐、歌单等)的简单实现(一)
我们先来看看网易云音乐导航栏指示器是什么样的. 箭头指向的蓝色框就是导航指示器,点击之后下面的view会跟着移动,每个button下面还有个小红线跟着.这个效果其实不难实现,我们先来分析分析. 在iO ...
微信小程序之网易云音乐导航
微信小程序之网易云音乐导航微信小程序之网易云音乐(一)- uni-app的基本使用微信小程序之网易云音乐(二)- uni-app标签的使用微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
Airtest入门案例-操作网易云音乐
ps: 192.168.2.101:5555是小米6adb链接地址 # -*- encoding=utf8 -*- __author__ = "z" __desc__ = &quo ...
android+仿最新网易云音乐底面栏,安卓仿网易云音乐通知栏控制音乐，默认显示Notification bigView...
最近在做一个音乐播放器的时候遇到了一个关于notification的问题,在网上找了很久都没有头绪.后来找到了解决的办法,特意记录一下. 问题描述首先请看网易云音乐的通知栏普通高度的notific ...
01网易云首页导航栏html制作（李游精品前端课程笔记）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Day08_vant实现_网易云音乐案例
Day08_vant实现_网易云音乐案例文章目录 Day08_vant实现_网易云音乐案例知识点自测铺垫(自学) 本地接口项目部署今日学习目标 1. 案例-网易云音乐 1.0 网易云音乐-本地 ...
vue2中vant实现网易云音乐案例-附带所有源码
vue2中vant实现网易云音乐案例-附带所有源码前言学习笔记以及源码下载gitee: https://gitee.com/xingyueqianduan/vantmsicdemo 下载下来的内容 ...
Vue2使用vant实现_网易云音乐案例(可跟做练手项目)
文章目录知识点自测铺垫(自学) 本地接口项目部署今日学习目标 1. 案例-网易云音乐 1.0 网易云音乐-本地接口 1.1 网易云音乐-本地接口启动 1.2 网易云音乐-前端项目初始化 1.3 ...
微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐(三)- 主页面底部导航.轮播图.歌单及歌曲模块开发前言一. 主页面底部导航二. 轮播图区域三. 歌单区域四. 歌曲区域微信小程序之网易云音乐导航前言创建一个新模 ...

CSS学习案例（16）：网易云音乐导航栏

网易云音乐官网点这里

CSS学习案例（16）：网易云音乐导航栏相关推荐

最新文章

热门文章