前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）

做效果图之前，博主只说一句话，精益求精，能花费时间更多的时间去做到90%相似就不要60%相似。一定要认真去做~~~~~

完成品欣赏：

代码：


<head>
<title>网易云音乐</title>
<meta charset="utf-8">
<script src="../js/jquery.js"></script>
<link href="网易云.css" rel="stylesheet" type="text/css">
</head>
<body class="main"><div class="top"><div class="phone"><div class="phone_left"><img src="信号.png" alt="信号.png" style="width:71px;height:50px;margin-top:2px;"><a class="word">中国移动</a><a class="word_4g">4G</a></div><div class="phone_center"><a class="word1">下午11:58</a></div><div class="phone_right"><img src="锁屏.png" alt="锁屏.png" style="position:absolute;margin-left:661px;margin-top:-40px;width:40px;height:40px;"><img src="定位.png" alt="定位.png" style="position:absolute;margin-left:714px;margin-top:-46px;width:46px;height:49px;"><a class="word2">85%</a><img src="电池.png" alt="电池.png" style="margin-left:868px;margin-top:-37px;width:74px;height:35px;"><img src="麦克风.png" alt="1.png" style="margin-left:4px;margin-top:43px;width:90px;height:87px;"><input type="text" class="input_one" value="           搜索音乐、视频、电台"><img src="直方图.png" alt="1.png" style="position:absolute;margin-left:735px;margin-top:49px;width:88px;height:81px;"><img src="搜索.png" alt="1.png" style="position:absolute;margin-left:89px;margin-top:64px;width:52px;height:52px;"><div class="word_center"><div class="word_center1 a"><a class="word3">个性推荐</a></div><div class="word_center2 a"><a class="word4">主播电台</a></div><img src="横线.png" alt="1.png" style="margin-left:240px;margin-top:-94px;width:98px;height:149px;"><img src="3.jpg" alt="2.png" style="position:absolute;margin-left:-315px;margin-top:28px;width:948px;height:363px;border-radius:15px;"></div></div></div></div><div class="center"></div><hr><div class="bottom"><div class="bottom_word"><a >推荐歌单</a><img src="右箭头.png" alt="4.png" style="width:64px;height:60px;position:absolute;margin-top:4px;margin-left:12px;"></div><div class="bottom_down"></div></div><hr><div class="finally"></div>
</body>
<script>a = '';var b = ['私人FM.png','每日推荐.png','歌单.png','排行榜.png'];var g = ['私人FM','每日推荐','歌单','排行榜'];var pc = ['1.jpg','2.jpg','4.jpg'];var word = ['你还年轻，可以成为想成为的人','假期无聊，来场动感的电子爵士.','【欧美】前奏已爱到无法自拔。']var picture = ['1.png','2.png','3.png'];var last =['网易云音乐.png','视频.png','音符.png','朋友.png','账号.png'];var last_word =['发现','视频','我的','朋友','账号'];for(var i = 0;i<4;i++ ){if( i == 1 ){a = '<div class="divide a">'a +='<div class="detial a">'+'<img src="'+b[i]+'" alt="1.png" style="width:80px;height:80px;margin-left:40px;margin-top:37px;">'a +='<a class="detial_word1 a">'+g[i]+'</a>'a +='</div></div>';$('.center').append(a);}else if( i == 2){a = '<div class="divide a">'a +='<div class="detial a">'+'<img src="'+b[i]+'" alt="1.png" style="width:80px;height:80px;margin-left:40px;margin-top:37px;">'a +='<a class="detial_word2 a">'+g[i]+'</a>'a +='</div></div>';$('.center').append(a);}else if( i == 3){a = '<div class="divide a">'a +='<div class="detial a">'+'<img src="'+b[i]+'" alt="1.png" style="width:80px;height:80px;margin-left:40px;margin-top:37px;">'a +='<a class="detial_word3 a">'+g[i]+'</a>'a +='</div></div>';$('.center').append(a);}else{a = '<div class="divide a">'a +='<div class="detial a">'+'<img src="'+b[i]+'" alt="1.png" style="width:80px;height:80px;margin-left:40px;margin-top:37px;">'a +='<a class="detial_word a">'+g[i]+'</a>'a +='</div></div>';$('.center').append(a);}}var dita = Math.random();for(var i = 0;i<3;i++ ){if(i < 2){a = '<div class="picture a"><img src="'+pc[i]+'" alt="'+i+'" style="width:313px;height:313px;position:absolute;margin-left:0px;margin-top:1px;border-radius:20px;">'a +='<div class="conso"><a class="picture_word">'+word[i]+'</a></div>'a +='<img src="耳机.png" alt="'+i+'" style="width:43px;height:43px;position:absolute;margin-left:118px;margin-top:16px;">'+'<a class="dita">'+parseInt(dita*(i+1)*320)+'万</a>'a +='</div>';$('.bottom_down').append(a);}else {a = '<div class="picture a"><img src="'+pc[i]+'" alt="'+i+'" style="width:313px;height:313px;position:absolute;margin-left:0px;margin-top:1px;border-radius:20px;">'a +='<div class="conso"><a class="picture_word">'+word[i]+'</a></div>'a +='<img src="耳机.png" alt="'+i+'" style="width:43px;height:43px;position:absolute;margin-left:118px;margin-top:16px;">'+'<a class="dita">'+parseInt(dita*i*2)+'万</a>'a +='</div>';$('.bottom_down').append(a);}}for(var i = 0;i<3;i++ ){if(i < 2 ){a = '<div class="picture2 a"><img src="'+picture[i]+'" alt="'+i+'" style="width:313px;height:286px;position:absolute;margin-left:0px;margin-top:90px;border-top-left-radius:20px;border-top-right-radius:20px;">'a +='<img src="耳机.png" alt="'+i+'" style="width:43px;height:43px;position:absolute;margin-left:118px;margin-top:106px;">'+'<a class="dita1">'+parseInt(dita*(i+1)*350)+'万</a>'a +='</div>';$('.bottom_down').append(a);}else {a = '<div class="picture2 a"><img src="'+picture[i]+'" alt="'+i+'" style="width:313px;height:286px;position:absolute;margin-left:0px;margin-top:90px;border-top-left-radius:20px;border-top-right-radius:20px;">'a +='<img src="耳机.png" alt="'+i+'" style="width:43px;height:43px;position:absolute;margin-left:118px;margin-top:106px;">'+'<a class="dita1">'+parseInt(dita*i*5)+'万</a>'a +='</div>';$('.bottom_down').append(a);}}for(var i = 0;i<5;i++ ){if(i == 0){a = '<div class="picture3 a"><img src="'+last[i]+'" alt="'+i+'" style="width:86px;height:86px;position:absolute;margin-left:32px;margin-top:99px;">'a +='<div class="conso"><a class="picture_word1">'+last_word[i]+'</a></div>'a +='</div>';$('.finally').append(a);}else if(i == 1){a = '<div class="picture3 a"><img src="'+last[i]+'" alt="'+i+'" style="width:83px;height:75px;position:absolute;margin-left:36px;margin-top:109px;">'a +='<div class="conso"><a class="picture_word2">'+last_word[i]+'</a></div>'a +='</div>';$('.finally').append(a);}else if(i == 2){a = '<div class="picture3 a"><img src="'+last[i]+'" alt="'+i+'" style="width:86px;height:86px;position:absolute;margin-left:32px;margin-top:99px;">'a +='<div class="conso"><a class="picture_word2">'+last_word[i]+'</a></div>'a +='</div>';$('.finally').append(a);}          else if(i == 3){a = '<div class="picture3 a"><img src="'+last[i]+'" alt="'+i+'" style="width:86px;height:86px;position:absolute;margin-left:32px;margin-top:99px;">'a +='<div class="conso"><a class="picture_word2">'+last_word[i]+'</a></div>'a +='</div>';$('.finally').append(a);}else{a = '<div class="picture3 a"><img src="'+last[i]+'" alt="'+i+'" style="width:86px;height:86px;position:absolute;margin-left:32px;margin-top:99px;">'a +='<div class="conso"><a class="picture_word2">'+last_word[i]+'</a></div>'a +='</div>';$('.finally').append(a);}}</script>

.main{
width:100%;
height:1760px;
margin-left:60px;
}
.top{
width:100%;
height:600px;
background-color:#FF3030;}
.phone{
width:100%;
height:120px;
position:absolute;
margin-left:20px;
margin-top:20px;
}
.a{
float:left;
}
.word{position:absolute;margin-left:12px;margin-top:2px;font-size:40px;color:white;}
.word_4g{position:absolute;margin-left:198px;margin-top:2px;font-size:40px;color:white;}
.word1{position:absolute;margin-left:385px;margin-top:-48px;font-size:40px;color:white;
}
.word2{position:absolute;margin-left:772px;margin-top:-47px;font-size:41px;color:white;
}
.div_top{}
.input_one{width:666px;height:105px;background-color:rgba(255,255,254,0.3);position:absolute;margin-left:37px;margin-top:38px;font-size:41px;color:rgba(255,255,255,0.45);border-radius:78px;border:none;
}
.word_center{width:100%;height:152px;position:absolute;margin-top:12px;margin-left:-26px;}
.word_center1{width:49%;height:150px;}
.word_center2{width:50%;height:150px;}
.word3{position:absolute;margin-top:53px;margin-left:205px;font-size:41px;color:white;
}
.word4{position:absolute;margin-top:53px;margin-left:115px;font-size:41px;color:white;
}.center{width:100%;height:509px;}
.divide{width:24%;height:509px;margin-left:2px;
}
.detial{width:159px;height:159px;border:2px solid red;position:absolute;margin-top:245px;margin-left:50px;border-radius:95px;
}
.detial_word{width:159px;height:159px;position:absolute;margin-top:177px;margin-left:-97px;font-size:33px;}
.detial_word1{width:159px;height:159px;position:absolute;margin-top:177px;margin-left:-107px;font-size:33px;}
.detial_word2{width:159px;height:159px;position:absolute;margin-top:177px;margin-left:-79px;font-size:33px;}
.detial_word3{width:159px;height:159px;position:absolute;margin-top:177px;margin-left:-92px;font-size:33px;}
.bottom{width:100%;height:835px;}
.bottom_word{width:100%;height:194px;font-size:49px;font-weight:bold;color:black;margin-left:21px;margin-top:47px;
}
.bottom_down{width:99%;height:600px;}
.picture{width:311px;height:459px;margin-left:10px;margin-top:-93px;
}
.picture_word{font-size:39px;
}
.conso{width:31%;height:126px;position:absolute;margin-top:331px;margin-left:9px;}
.picture2{width:311px;height:459px;margin-left:10px;margin-top:-100px;
}
.picture3{width:186px;height:150px;margin-left:10px;margin-top:-100px;
}
.finally{width:100%;height:157px;position:absolute;margin-top:20px;
}
.picture_word1{position:absolute;margin-top:-138px;margin-left:30px;font-size:36px;color:red;opacity:0.75;}
.picture_word2{position:absolute;margin-top:-138px;margin-left:30px;font-size:36px;color:#CDC9C9;opacity:0.98;}
.dita{position:absolute;color:white;font-size:40px;margin-left:197px;margin-top:13px;
}
.dita1{position:absolute;color:white;font-size:40px;margin-left:197px;margin-top:102px;
}

前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）相关推荐

使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果,最终的效果如下界面布局图片也是实现滚动效果的,使用四个div,来标识每一帧波动的效果. <div class="container- ...
html网易云音乐图片轮播效果,看网易云音乐如何在界面设计中突出特色功能
一般观念中一款产品的功能越具特色就会放在越突出的位置,但是如果一款产品层级较深,底层架构复杂导致若干功能优先级并列,那在UI设计中如何做到强化和弱化呢? 作为网易云音乐陈年老粉,不得不说这款产品做的真 ...
网易商业化项目分享|网易云音乐-评论系统后端架构设计
截止2019年二季度,网易云音乐用户数已经突破8亿,成为最活跃的音乐社区,位居在线音乐行业第一阵营. 相信大家或多或少都使用过网易云音乐,不知道有没有人跟我一样,在云音乐听歌的时候喜欢打开评论看一看 ...
Selenium解决动态渲染页面----爬取网易云音乐全部评论
爬取网易云音乐全部评论,我们先随便找一首歌,这里以毛不易的水乡为例.毛不易–水乡一.常规方法 1. 尝试直接爬取先直接用歌曲链接直接爬取 import requests#URL url = 'ht ...
仿网易云音乐播放界面
前言网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.笔者出于学习与挑战的想法,思考播放界面背后的实现原理,并写了一个小程序. 笔者尽可能地去模仿官方的视觉.交 ...
gulp仿移动端网易云音乐播放界面
网易云音乐,凭借其简洁的播放界面设计.歌曲推荐系统和完善的评论机制在市场上拥有超高人气的一款音乐播放器,深受网友喜爱.所以在这个在这个举国欢庆的假日里,我的魔爪终于伸向了她. 更新: Github传送 ...
安卓实现网易云音乐底部播放栏效果之使用UI绑定到Service上实现
先说原理:音乐播放需要使用到Service,而播放栏也是属于音乐播放的,那么为什么我们不把这两者合在一起呢? 把UI和音乐Service合在一起,用Service来控制UI界面不是更简单.在进入Act ...
java4android网易云,Android仿网易云音乐播放界面
概述网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅. 首先来看一下网易的播放效果. 要实现上面的功能,我们需要对界面进行一个拆分,拆分后大概包含如下结构: 主 ...
Android仿网易云音乐播放界面
概述网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.这里抛砖引玉,原文地址:http://www.jianshu.com/p/cb54990219d9 首先来 ...

前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）

完成品欣赏：

代码：

前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）相关推荐

最新文章

热门文章