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

最新推荐文章于 2023-03-20 23:27:39 发布

吴生4396

最新推荐文章于 2023-03-20 23:27:39 发布

阅读量6.2k

点赞数 8

本文链接：https://blog.youkuaiyun.com/qq_41903105/article/details/87998194

版权

做效果图之前，博主只说一句话，精益求精，能花费时间更多的时间去做到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;
}