前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）
本文共 3361 字，大约阅读时间需要 11 分钟。
做效果图之前，博主只说一句话，精益求精，能花费时间更多的时间去做到90%相似就不要60%相似。一定要认真去做~~~~~
完成品欣赏：
代码：
网易云音乐
.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;}
转载地址：http://hjtrn.baihongyu.com/
你可能感兴趣的文章
Java如何实现哈夫曼编码
查看>>
从源代码的角度理解Java设计模式的装饰模式
查看>>
系统架构中为什么要引入消息中间件？
查看>>
Java内存模型详解
查看>>
Java NIO之Selector
查看>>
SLF4J源码解析（一）
查看>>
Spring AOP用法详解
查看>>
记一位朋友斩获BAT技术专家Offer的面试经历
查看>>
Java并发编程之阻塞队列与Fork/Join框架
查看>>
并发、并行傻傻分不清楚？
查看>>
一个Java程序员该有的良好品质
查看>>
程序员创业之如何获取第一笔风险投资
查看>>
听说小米进入世界500强啦？解读历年500强数据了解国情
查看>>
Maven中央仓库发布历程
查看>>
springBoot的过滤器，监听器，拦截器
查看>>
树状数组入门(简单的原理讲解)
查看>>
程序员的迷茫，迷茫的程序员
查看>>
datawhale课程[动手学数据分析]——Task01：数据加载及探索性数据分析
查看>>
datawhale课程[动手学数据分析]——Task02：数据清洗简述
查看>>
《统计学习方法第二版》学习笔记2——感知机
查看>>