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

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

---

完成品欣赏：

                                                              

---

代码：

              

	

		

			

				
				中国移动
				4G
			
			

					下午11:58
			
			

				
				
				85%
				
				
				
			
			
			

				
个性推荐
				
主播电台
			
			
			
			
		
		
	
	


	
	

	

		

			推荐歌单
			
		
		


		
		
	
			


	


	

.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;
}