本文共 2450 字，大约阅读时间需要 8 分钟。

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

作品：

ps：我要发财啦！！！

原理：

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

第一步：布好局

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

第二步：形象设计

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

第三步：程序化理想设计

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

第四步：整体化设计

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

附上代码：

HTML：

   
   	
   
		
    
			
     
				
      				
      中国移动   4G			
     
			
     
					
      上午11:35			
     
			
     
				
      				
      85%				
      			
     
		
    
		
    
			
     财富			
     			
     总资产(元)			
     			
     开启保障			
     昨日收益			
     			
     636,534,234.12			
     +1,884,234.53				
     		
    
	
   
	
   
			
   
	
   
		
    
		
    		
    财富直通车		
    最近使用		
    	
   
	
   
	
   

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

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

转载地址：http://mjtrn.baihongyu.com/