css部分：

ul li{
list-style: none;
}
a{
text-decoration: none;
}
.bar-wrapper{
height: 70px;
background: #242424;
border-bottom: 1px solid #000;
}
.bar-wrapper .top-bar{
width: 1100px;
height: 100%;
margin: 0 auto;
/background-color: red;/
}
.bar-wrapper .top-bar .left{
float: left;
}
.bar-wrapper .top-bar .left .logo{
float: left;
width: 176px;
height: 69px;
background: url("…/img/topbar.png");
background-position: 0 0;
}
.bar-wrapper .top-bar .left .logo a{
float: left;
width: 157px;
height: 100%;
padding-right: 20px;
text-indent: -111111px;
}
.bar-wrapper .top-bar .left li{
float: left;
height: 70px;
font-size: 14px;
}
.bar-wrapper .top-bar .left li a{
height: 70px;
font-size: 14px;
/float、padding在a里，点击时为整个大框/
float: left;
padding: 0 19px;
color: #cccccc;
text-align: center;
line-height: 70px;
}
.bar-wrapper .top-bar .left li .a:hover,.left li .a1{
background: #000;
text-decoration: none;
color: #fff;
}

.bar-wrapper .top-bar .right {
float: right;
}
.bar-wrapper .top-bar .right li{
float: left;
}
.bar-wrapper .top-bar .right .author{
float: right;
width: 90px;
height: 32px;
margin: 19px 0 0 12px;
box-sizing: border-box;
padding-left: 16px;
border: 1px solid #4F4F4F;
line-height: 33px;
color: #ccc;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
border-radius: 20px;
}
.bar-wrapper .top-bar .right .author:hover{
border-color: #ffffff;
color: #ffffff;
}
.right li>form{
position: relative;
}
.right li>form>label{
position: absolute;
top: 30px;
left: 30px;
width: 90%;
color: #9b9b9b;
cursor: text;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}
.right li>form>input{
width: 128px;
height: 32px;
margin-top: 19px;
padding-left: 30px;
background-image: url("…/img/topbar.png");
background-position: 0 -99px;
background-color: #fff;
border-radius: 32px;
border: none;
outline: none;
}
.right form input:focus +label {
display: none;
}
.right .sign{
float: right;
height: 45px;
margin: 19px 0 0 20px;
padding: 0 22px 0 0;
background-image: url("…/img/topbar.png");
background-position: right -47px;
/下拉菜单准备/
position: relative;
}
.right .sign >a{
display: block;
width: 28px;
margin-top: 7px;
color: #787878;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}
.right .sign> a:hover{
text-decoration: underline;
}
/--------------------上面导航结束-----------------------------------------------/
.down-wrapper {
height: 35px;
box-sizing: border-box;
background-color: #C20C0C;
border-bottom: 1px solid #a40011;
}
.down-wrapper .down-bar{
/为上面的小红角做准备/
position: relative;
width: 1100px;
height: 34px;
margin: 0 auto;
}
/推荐的小红角/
.down-bar ul .tui-jiao{
position: absolute;
top: -6px;
left: 215px;
width: 15px;
height: 10px;
background-image: url("…/img/topbar.png");
background-position: -225px 0;
}
.down-bar ul{
float: left;
width: 564px;
height: 34px;
padding-left: 180px;
}
.down-bar ul li{
float: left;
height: 34px;
text-align: center;
}
.down-bar ul li a{
display: inline-block;
height: 20px;
padding: 0 13px;
margin: 7px 17px 0;
border-radius: 20px;
line-height: 21px;
/background: #9B0909;/
font-size: 12px;
color: #ffffff;
}
.down-bar ul li .p1,.down-bar ul li .p2:hover{
background: #9B0909;
}
/-------------------------下面菜单结束----------------------/
/“登陆”的下拉菜单/
.sign .sign-down{
position: absolute;
top: 38px;
right: -43px;
width: 158px;
background: #2b2b2b;
border: 1px solid #202020;
box-shadow: 0 8px 24px 0 rgba(0,0,0,0.50);
border-radius: 4px;
display: none;
z-index: 99999;
}
.right .sign:hover .sign-down{
display: block;
}
.sign .sign-down li a{
text-decoration: none;
float: left;
height: 38px;
width: 134px;
line-height: 39px;
padding-left: 24px;
font-size: 12px;
color: #cccccc;
}
.sign .sign-down li .w1{
border-bottom: 1px solid #202020;
}
.sign-down a .iconfont{
float: left;
width: 18px ;
height: 18px;
margin: 10px 10px 0 -7px;
background-image: url("…/img/toplist.png");

}
.sign-down a .q1{
background-position: 0 0;
}
.sign-down a .q2{
background-position: -20px -20px;
}
.sign-down a .q3{
background-position: -20px -40px;
}
.sign-down a .q4{
background-position: 0 -20px;
}
.sign-down a .q5{
background-position: 0 -40px;
}
.sign .sign-down li:hover a{
background: #353535;
text-decoration: none;
color: #fff;
}
/sign-down上的角/
.sign .sign-down .jiao{
position: absolute;
top: -8px;
left: 72px;
width: 15px;
height: 15px;
background-image: url("…/img/toplist.png");
background-position: -20px 0;
}
/------------------登陆的下拉菜单结束---------------------/
.index-banner{
height: 336px;
background-color: #0D1E49;
}
.index-banner .banner{
position: relative;
width: 982px;
height: 336px;
margin: 0 auto;
background-color: yellow;
}
/轮播图/
.index-banner .banner .banner-left{
width: 730px;
height: 336px;
position: relative;
left: 0;
}
.index-banner .banner .banner-left .img-list li{
position: absolute;
}
.index-banner .banner .banner-left img{
width: 100%;
}
/圆点/
.index-banner .banner .banner-left .point{
position: absolute;
top: 310px;
left:0px;
width: 730px;
height: 20px;
text-align: center;
}
.index-banner .banner .banner-left .point a{
/行内块元素，text-align可以使元素居中/
display: inline-block;
width: 20px;
height: 20px;
background: url("…/img/banner.png") 3px -343px;
}
.index-banner .banner .banner-left .point a:hover{
width: 20px;
height: 20px;
background: url("…/img/banner.png") -16px -343px;
}
/左箭头/
.btn-left{
position: absolute;
z-index: 88888;
top: 136px;
left: -68px;
width: 37px;
height: 63px;
background-image: url("…/img/banner.png");
background-position: 0 -360px;
}
.btn-left:hover{
width: 37px;
height: 63px;
background-image: url("…/img/banner.png");
background-position: 0 -430px;
}
/右箭头/
.btn-right{
position: absolute;
z-index: 888;
top: 136px;
right: -68px;
width: 37px;
height: 63px;
background-image: url("…/img/banner.png");
background-position: 0 -508px;
}
.btn-right:hover{
width: 37px;
height: 63px;
background-image: url("…/img/banner.png");
background-position: 0 -578px;
}
/------------------------------左框结束--------------------/
.banner-right{
position: absolute;
top: 0;
right: -1px;
width:254px ;
height: 336px;
background-image: url("…/img/download.png");
background-position: 0 0 ;
}
.banner-right .download{
width: 215px;
height: 56px;
margin: 212px 0 0 19px;
}
.banner-right .download:hover{
width: 215px;
height: 56px;
background-image: url("…/img/download.png");
background-position: 0 -340px;
}
.banner-right a{
display: inline-block;
width: 254px;
height: 17px;
margin: 10px auto;
text-align: center;
color: #8d8d8d;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
/.banner-right .shadowl{/
/* background-image: url("…/img/banner.png");/
/ position: absolute;/
/ z-index: 333;/
/ top: 0;/
/ left: -20px;/
/ width: 20px;/
/ height: 336px;/
/ background-position: -1px 0;/
/}/
/.banner-right .shadowr{/
/ background-image: url("…/img/banner.png");/
/ position: absolute;/
/ z-index: 333;/
/ top: 0;/
/ width: 20px;/
/ height: 336px;/
/}/
/-----------------右框结束----------------------------*/

/-------------------中间的大框结束------------------/
.down-wrapper–down{
width: 980px;
height:700px;
/min-height: 700px;/
border: 1px solid #d3d3d3;
margin: 0 auto;
position: relative;
/float: left;/
}
.down-wrapper–down .down-bian{
width: 689px;
height: 700px;
margin-right: 251px;
padding: 20px 20px 40px;
/background-color: yellow;/
}
.down-bian .bian-top-left{
width: 689px;
height: 523px;
margin: 0 auto;
/background-color: red;/
}
.top-word{
width: 645px;
height: 33px;
padding: 0 10px 0 34px;
/background-image: url("…/img/index.png");/
background-position: -225px -156px;
border-bottom: 2px solid #C10D0C;
}
.top-word >i{
float: left;
width: 20px;
height: 20px;
background: url("…/img/index.png");
background-position: -235px -163px;
margin-left: -20px;
margin-top: 8px;

}
.top-word >a{
float: left;
font-size: 20px;
font-weight: normal;
line-height: 28px;
}
.top-word .tab {
float: left;
height: 17px;
margin: 7px 0 0 20px;
}
.top-word .tab .s-fc3 {
color: #666666;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.top-word .tab .line{
margin: 0 10px;
color: #ccc;
}
.top-word .more {
float: right;
margin-top: 12px;
width: 40px;
height: 17px;
}
.top-word .more .s-fc3{
float: left;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif ;
color :#666666;
}
.top-word .more .cor{
float: left;
width: 12px;
height: 12px;
margin-left: 4px;
background-image: url("…/img/index.png");
background-position: 0 -240px;
}
.top-word .s-fc3:hover{
color: #666666;
text-decoration: underline;
}
/--------------文字结束------------------------/
.down-picture{
width: 731px;
height: 468px;
margin: 20px 0 0 -42px;
}
.down-picture li{
float: left;
width: 140px;
height: 204px;
padding-left: 42px;
}
.u-cover{
width: 140px;
height: 140px;
position: relative;
}
.u-cover img{
display: block;
width: 100%;
height: 100%;
}
.u-cover .msk{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("…/img/coverall.png") 0 0;
}
.u-cover .bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 27px;
background-image: url("…/img/coverall.png");
background-position: 0 -537px;
color: #ccc;
}
.u-cover .bottom .icon-play {
position: absolute;
right: 10px;
bottom: 5px;
width: 16px;
height: 17px;
background-image: url("…/img/iconall.png");
background-position: 0 0;
}
.u-cover .bottom .icon-headset {
float: left;
width: 14px;
height: 11px;
background-image: url("…/img/iconall.png");
background-position: 0 -24px;
margin: 9px 5px 9px 10px;
}
.u-cover .bottom .nb {
font-size: 12px;
width: 53px;
height: 16px;
float: left;
margin: 9px 0 0 0;
font-family: Arial, Helvetica, sans-serif;
}
.down-picture li .dec {
width: 140px;
height: 38px;
margin: 8px 0 3px;
font-size: 14px;
}
.dec a:hover,.s-fc3:hover{
text-decoration: underline;
}
.down-picture li .tit {
display: inline-block;
max-width: 100%;
vertical-align: middle;
font-size: 12px;
color:#000;
font-family: Arial, Helvetica, sans-serif;
}
/------- --------------------左侧结束----------/
.g-sd1 {
width: 250px;
height: 700px;
position: absolute;
top: 0;
right: 0;
}
.n-myinfo-1 {
height: 126px;
width: 250px;
padding-top: 0;
background: url("…/img/index.png");
background-position: 0 0 ;
}
.n-myinfo .note {
width: 205px;
margin: 0 auto;
padding: 16px 0;
line-height: 22px;
font-size: 12px;
color:#666;
}
.n-myinfo .btn {
display: block;
width: 100px;
height: 31px;
line-height: 31px;
text-align: center;
font-size: 12px;
color: #fff;
text-shadow: 0 1px 0 #8a060b;
margin:0 auto;
background: url("…/img/index.png");
background-position: 0 -195px ;
}
.n-singer {
width: 250px;
height: 455px;
margin-top: 15px;
}
.v-hd3 {
position: relative;
height: 23px;
margin: 0 20px;
border-bottom: 1px solid #ccc;
font-size: 12px;
color: #333;
display: block;
}
.f-fl {
float: left;
color:#333;
}
h3{
font-size: 100%;
}
.v-hd3 .more {
float: right;
font-weight: normal;
color:#666666;
}
.n-enter {
width: 280px;
height: 380px;
margin: 6px 0 14px 20px;
}
.n-enter li, .n-enter .itm {
float: left;
width: 210px;
height: 62px;
background: #fafafa;
margin-top: 14px;
}
.n-enter .itm {
float: left;
width: 210px;
height: 62px;
background: #fafafa;
text-decoration: none;
}
.n-enter .head, .n-enter .head img {
float: left;
width: 62px;
height: 62px;
}
.n-enter .ifo {
float: left;
width: 133px;
height: 60px;
padding-left: 14px;
border: 1px solid #e9e9e9;
border-left: none;
}
.n-enter h4 {
width: 133px;
height: 32px;
margin-top: 8px;
}
li .nm {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
width: 90%;
font-size: 14px;
font-family: “黑体”;
font-weight: bold;
display: block;
margin-top: 10px;
}
.f-thide1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
color:#666;
font-size: 12px;
display: block;

}
.n-enter p {
width: 90%;
margin-top: 8px;
}

html部分：

网易云音乐

  • 网易云音乐

  • 发现音乐
  • 我的音乐
  • 朋友
  • 商城
  • 音乐人
  • 下载客户端  
  • 音乐/视频/电台/用户
  • 创作者中心
  • 登陆
    • 手机号登陆
    • 微信登陆
    • QQ登陆
    • 新浪微博登陆
    • 网易邮箱账号登陆
  •     </ul>
</div>
  • 推荐
  • 排行榜

网易云音乐（纯CSS实战）相关推荐

  1. 2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享

    特点 拖拽播放 桌面歌词 mini模式 自定义托盘右键菜单 任务栏缩略图,歌曲操作 音频可视化 自动/手动检查更新 Nedb数据库持久化 自定义安装路径,安装界面美化 浏览器中启动客户端 Travis ...

  2. Python3爬虫抓取网易云音乐热评实战

    前一段时间刚刚入门python爬虫,有大概半个月时间没有写python了,都快遗忘了.于是准备写个简单的爬虫练练手,我觉得网易云音乐最优特色的就是其精准的歌曲推荐和独具特色的用户评论,于是写了这个抓取 ...

  3. 网易云音乐项目搭建实战来了！

  4. 基于React全家桶开发「网易云音乐PC」项目实战(一)

    网易云音乐PC项目实战 项目简介 1.项目介绍 项目使用到的技术栈 CSS使用Flex进行布局 配置路径别名使用: carco 项目路由使用: react-router来管理 使用react-rout ...

  5. 使用HTML5，CSS。制作一个简单有新颖的“网易云音乐排行榜“。

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 网易云音乐基于 Flink + Kafka 的实时数仓建设实践

    简介:本文由网易云音乐实时计算平台研发工程师岳猛分享,主要从以下四个部分将为大家介绍 Flink + Kafka 在网易云音乐的应用实战: 背景.Flink + Kafka 平台化设计.Kafka 在 ...

  7. flink 写kafka_网易云音乐基于 Flink + Kafka 的实时数仓建设实践

    简介:本文由网易云音乐实时计算平台研发工程师岳猛分享,主要从以下四个部分将为大家介绍 Flink + Kafka 在网易云音乐的应用实战: 背景 Flink + Kafka 平台化设计 Kafka 在 ...

  8. 一款仿网易云音乐Java开源系统（附源码）

    嗨喽!Java后端编程的各位小伙伴们,由于公众号做了乱序推送改版,为了保证公众号的推文能够第一时间及时送达到大家手上,大家记得将公众号 加星标置顶 ,公众号每天会送上Java技术干货推文 ! 上篇推文 ...

  9. flink source 同步_网易云音乐基于 Flink + Kafka 的实时数仓建设实践

    简介:本文由网易云音乐实时计算平台研发工程师岳猛分享,主要从以下四个部分将为大家介绍 Flink + Kafka 在网易云音乐的应用实战: 背景.Flink + Kafka 平台化设计.Kafka 在 ...

  10. 微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）

    下面代码的效果是网易云音乐唱针和黑胶唱片的CSS效果实现方式,播放等并没贴出来 实现效果的范围 动态图效果预览: stylusW,panW是获取系统宽度计算后的参数 wxml部分: <!-- 黑 ...

最新文章

  1. 关于write()和fsync()
  2. 嵌入式tomcat例子
  3. python中if __name__ == ‘__main__‘:的简单理解
  4. aop的实现原理_非Spring管理Bean如何添加AOP呢？
  5. linux 80中断,在64位Linux上使用中断0x80
  6. 几个常用的python脚本_几个很实用的python脚本
  7. mysql 强项_mysql数据目录迁移
  8. python 自动执行 apdl_在高效的mann中从Python运行ANSYS Mechanical APDL
  9. arduino外接SSD1306不显示
  10. Android studio引入XUI
  11. NH7020固件网口分析与platoSDR固件对比
  12. python实现英文新闻摘要自动提取_自然语言处理之自动摘要
  13. 20145322何志威《网络对抗技术》Exp6 信息搜集技术
  14. Unity 实时显示FPS——移动端测试神器
  15. 系统安全性之十大措施
  16. CTex+WinEdt下载
  17. PS新手教程！手把手教你临摹一枚经典的SIRI拟物图标
  18. Win10怎么使用Windows Defender扫描文件夹中的恶意软件？
  19. java运算符与数字分解，看完对java更加有信心了（主除以和取余的理解）
  20. [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型

热门文章

  1. 学习html+css+js笔记
  2. android shell强制删除文件夹_Windows 强制删除文件及文件夹命令
  3. SpringBoot上传文件报The field file exceeds its maximum permitted size of 1048576 bytes.
  4. Qnap NAS + Emby Server + Kodi
  5. python微博爬虫实战_爬虫实战2--微博爬取
  6. OpenWrt路由器无线中继、桥接、信号放大、访客网络的实现方案
  7. arcpy投影(一)——prj、gtf文件定义、路径及解析（arcmap,arcpro）
  8. SAS中的删除空格相关函数
  9. java中的match函数_javascript中match函数的用法小结
  10. 宏碁台式计算机u盘启动,宏基台式机U盘重装怎么设置U盘启动项