时光博客 - WEB开发中的可用性和用户体验

扒饭网软件下载中心设计

在为m8疯狂的期间,也接到扒饭网管理员小R的邀请,希望能为扒饭网软件中心做形象设计,当时正是在JSP课程设计,因为项目催得急,软件中心也要上线,于是就快速的完成了一个简单的demo,这次还是跟老伙伴龙神在天同学一起完成的。由于和死龙不是在一起工作,所以这次是真正意义上的代码与页面分离。做设计的时候,由于自己有些程序基础,所以写注释的时候,都写得很到位,以致完成html和CSS后,传给龙神同学,得到他大力的赞许。看来,我们2个已经很有默契了。

设计图:

扒饭网 - 软件中心.jpg

大小: 296.14 K
尺寸: 500 x 470
浏览: 300 次
点击打开新窗口浏览全图

看看首页头部的注释代码:

  1. <!--Header Start--> 
  2. <div id="header"> 
  3.     <div class="clear"></div> 
  4.     <div id="webtitle">m8fans.com 软件下载频道</div><div id="header-ads">Your ADS place, R</div> 
  5.     <div class="clear"></div> 
  6.     <div id="nav"> 
  7.         <ul class="navul"> 
  8.             <!--Nav Loop Start--> 
  9.             <li><a accesskey="a" href="index.html" target="_self">下载首页</a></li> 
  10.             <li><a accesskey="c" href="cate.html">测试栏目</a></li> 
  11.             <li><a accesskey="d" href="#">测试栏目</a></li> 
  12.             <li><a accesskey="e" href="#">测试栏目</a></li> 
  13.             <li><a accesskey="f" href="#">测试栏目</a></li> 
  14.             <li><a accesskey="g" href="#">测试栏目</a></li> 
  15.             <li><a accesskey="h" href="#">测试栏目</a></li> 
  16.             <!--Nav Loop End--> 
  17.         </ul> 
  18.      
  19.     </div> 
  20. </div> 
  21. <!--Header End--> 

软件分类代码

  1. <div id="secate-right-out" class="dashbox"> 
  2.         <div id="secate-right" class="dashBorder"> 
  3.             <table  id="DataRepeater" width="641" border="0" cellspacing="1" cellpadding="1"> 
  4.   <tr> 
  5.     <th width="362" scope="col">软件名</th> 
  6.     <th width="131" scope="col">更新时间</th> 
  7.     <th width="138" scope="col">软件大小</th> 
  8.   </tr> 
  9.   <!--Soft Loop start--> 
  10.   <tr class="drc"> 
  11.     <td class="drl"><a href="soft.html" target="_self" >M8 蓝牙,RMVB的破解补丁</a></td> 
  12.     <td>2008-12-29</td> 
  13.     <td>12.8M</td> 
  14.   </tr> 
  15. <tr class="drc-intro"> 
  16.     <td colspan="3" ><p>专门用于破解M8的手机上RMVB,和蓝牙的补丁!专门用于破解M8的手机上RMVB,和蓝牙的补丁!专门用于破解M8的手机上RMVB,和蓝牙的补丁!专门用于破解M8的手机上RMVB,和蓝牙的补丁!专门用于破解M8的手机上RMVB,和蓝牙的补丁!</p></td> 
  17.     </tr> 
  18. <!--Soft Loop End--> 

目前还很粗糙,等有空会设计出第二版的下载中心!

扒饭网软件下载中心:http://down.m8fans.com

«  上一篇 |  下一篇  »

赞助商广告

1 Responses

  1. jeccy Says:
    2009-03-04, 5:41 PM

    设计走大气,不错~

Leave a Reply





验证码(*):