前端作品之静态页面设计（一）：支付宝财富页面的静态效果设计（iphonex兼容）

本文链接：https://blog.csdn.net/qq_41903105/article/details/87869840

本人在从事程序员之前是一个画家，对待美观上的当然相当严格，但是好多logo很难找到一致的。但是从现在开始，我做的一些好的完善的作品也放在这里，供自身参考的同时大家可以适当的改变和升级。

作品：

ps：我要发财啦！！！

原理：

口号：放图片，放图片，放图片！！append，append，append！！

第一步：布好局

我用的是div，将iphonex的屏幕分成四个部分，top，center，bottom，last。

第二步：形象设计

拿捏好iPhoneX的屏幕尺寸，不断对照iphoneX的支付宝财富页面，进行校对式设计，对色彩有一定的把握

第三步：程序化理想设计

这个是最难的部分，需要对前端属性，js等有一定的了解，我做的不是最简单的，只是我自己的一个方法。

第四步：整体化设计

这个是最后一步，也可以是第一步，其实也应该和布局一起进行，在拿捏尺寸的同时，要进行大局观的设计，最后修修改改，最后做出一副完美的静态页面。

附上代码：

HTML：


<head>
<title>支付宝</title>
<meta charset="utf-8">
<script src="../js/jquery.js"></script>
<link href="zfb.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:75px;height:50px;">
				<a class="word">中国移动   4G</a>
			</div>
			<div class="phone_center">
					<a class="word1">上午11:35</a>
			</div>
			<div class="phone_right">
				<img src="定位.png" alt="定位.png" style="position:absolute;margin-left:729px;margin-top:-53px;width:51px;height:51px;">
				<a class="word2">85%</a>
				<img src="电池.png" alt="电池.png" style="margin-left:874px;margin-top:-46px;width:74px;height:35px;">
			</div>
		</div>
		<div class="div_top">
			<a class="label">财富</a>
			<img src="搜索.png" alt="搜索" style="position:absolute;margin-left:849px;margin-top:115px;width:69px;height:69px;">
			<a class="label1">总资产(元)</a>
			<img src="安全.png" alt="安全" style="position:absolute;margin-left:300px;margin-top:216px;width:49px;height:48px;">
			<a class="label3">开启保障</a>
			<a class="label2">昨日收益</a>
			<img src="眼睛.png" alt="眼睛" style="position:absolute;margin-left:718px;margin-top:217px;width:50px;height:48px;">
			<a class="datasize">636,534,234.12</a>
			<a class="datasize1">+1,884,234.53</a>
				<img src="右箭头.png" alt="右箭头" style="position:absolute;margin-left:903px;margin-top:318px;width:54px;height:54px;">
		</div>
	</div>
	<div class="center">
		
	</div>
	<div class="bottom">
		<hr>
		<img src="锦鲤.png" style="width:1000px;height:262px;" alt="654">
		<a style="font-size:60px;margin-left:50px;">财富直通车</a>
		<a style="font-size:44px;position:absolute;margin-left:412px;margin-top:14px;color:#bfbfbf;">最近使用</a>
		<img src="投资.png" style="margin-top:50px;width:1000px;height:451px;" alt="658">
	</div>

	<div class="finally">
	</div>
</body>

<script>
	a = '';
	var b = ['定期.png','基金.png','余额宝.png','黄金.png','股票.png','养老.png'
	];
	var alt=['定期','黄金','余额宝','黄金','股票','养老'
	];
	var word = ['定期','黄金','余额宝','黄金','股票','养老'];
	d = '';
	var l=['首页.png','财富.png','口碑.png','朋友.png','我.png'
	];
	var word2=['首页','财富','口碑','朋友','我的'
	];
	for(var i=0;i<6;i++){
			if(i == 2){
			a ='	<div class="center_img a">'
			a +='<div style="margin-left:14px;margin-top:40px;height:150px;width:150px;border-radius:75px ;background-color:#1a82d2;"> '
			a +='<img src="'+b[i]+'" alt="'+alt[i]+'" style="position:absolute;margin-left:-4px;margin-top:-25px;width:169px;height:169px;"></img>'
			a +='<div class="word8"><a >'+word[i]+'</a></div>'
			a +='</div>'
			$('.center').append(a);
		
		}
		else{
		a ='	<div class="center_img a">'
		a +='<img src="'+b[i]+'" alt="'+alt[i]+'" style="position:absolute;margin-left:45px;margin-top:70px;width:90px;height:90px;">'
		a +='<div class="word9"><a >'+word[i]+'</a></div>'
		a +='</div>'
		$('.center').append(a);
			}	

	}
		d +='<img src="上箭头.png" alt="123" style="position:absolute;margin-top:576px;margin-left:-520px;width:74px;height:54px;">'
		$('.center').append(d);
		
	for(var i = 0;i<5;i++){
			if(i == 0){
					a ='<div class="center_img a">'
		a +='<img src="'+l[i]+'" alt="'+'" style="position:absolute;margin-left:26px;margin-top:7px;width:135px;height:135px;">'
		a +='<div class="word10"><a >'+word2[i]+'</a></div>'
		a +='</div>'
		$('.finally').append(a);
		}
		else if(i == 4){
		a ='<div class="center_img a">'
		a +='<img src="'+l[i]+'" alt="'+'" style="position:absolute;margin-left:53px;margin-top:37px;width:80px;height:80px;">'
		a +='<div class="word10"><a >'+word2[i]+'</a></div>'
		a +='</div>'
		$('.finally').append(a);
	}
		else{
		a ='<div class="center_img a">'
		a +='<img src="'+l[i]+'" alt="'+'" style="position:absolute;margin-left:45px;margin-top:30px;width:90px;height:90px;">'
		a +='<div class="word10"><a >'+word2[i]+'</a></div>'
		a +='</div>'
		$('.finally').append(a);
		}
	}
</script>

css

.main{
width:100%;
height:1760px;

}
.top{
width:100%;
height:450px;
background-color:#1a82d2;

}
.phone{
width:100%;
height:120px;
position:absolute;
margin-left:20px;
margin-top:20px;
}
.word{
	position:absolute;
	margin-left:12px;
	margin-top:0px;
	font-size:40px;
	color:white;

}
.word1{
	position:absolute;
	margin-left:408px;
	margin-top:-53px;
	font-size:41px;
	color:white;
}
.word2{
	position:absolute;
	margin-left:781px;
	margin-top:-53px;
	font-size:41px;
	color:white;
}
.label{
	position:absolute;
	margin-left:441px;
	margin-top:112px;
	font-size:50px;
	color:white;


}
.label1{
	position:absolute;
	margin-left:73px;
	margin-top:211px;
	font-size:40px;
	color:white;
	opacity:0.8;

}
.label2{
	position:absolute;
	margin-left:547px;
	margin-top:211px;
	font-size:40px;
	color:white;
	opacity:0.8;

}
.label3{
	position:absolute;
	margin-left:358px;
	margin-top:218px;
	font-size:35px;
	color:white;
	opacity:0.8;

}

.datasize{
	position:absolute;
	margin-left:60px;
	margin-top:307px;
	font-size:55px;
	color:white;


}
.datasize1{
	position:absolute;
	margin-left:543px;
	margin-top:307px;
	font-size:55px;
	color:white;


}
.center{
	width:100%;
	height:660px;


}
.bottom{

	width:100%;
	height:820px;


}


.center_img{
	width:183px;
	height:270px;
	margin-left:10px;


}
.a{
float:left;
}
.word8{
font-size:42px;
position:absolute;
margin-left:12px;
margin-top:151px;

}
.word9{

font-size:42px;
position:absolute;
margin-left:48px;
margin-top:189px;

}
.word10{

font-size:42px;
position:absolute;
margin-left:48px;
margin-top:130px;
color:#bfbfbf;
}
.bottom_dowm{
	width:1000px;
	height:270px;
	background-color:red;

}
.finally{
	margin-top:30px;
	width:100%;
	height:190px;

}
.last_first{
	height:190px;
	width:20%;
}

这里图片路径就不附加了，大家可以根据自己的喜好修改自己的图片路径。