【<私活案例1>】 某游戏网首页PS设计和Html静态效果源码
私活案例1：某游戏网首页PS设计和Html静态效果源码
0 前言
年龄越来越大，记性越来越差，只想把自己一些零零散散的私活经历记录下来，日后回头看，还能想起这些小项目、小技术点，还能想起那些和客户、朋友打交道的各种过往。
个人喜欢实用，不喜欢做研究，此私活案例系列，都是小工具、小应用，无高深技术和复杂流程。一直相信，能适用到实际项目中的技术就是好技术。
不谈赚钱，技术却是可以学到多而杂，但不精通。
不谈社会，现实却是可以看到真而实，但不学坏。
1 案例
1）某游戏网首页效果图：
2）Html静态页面源码：
View Code
View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>***棋牌网-首页</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="Style/Base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box"> <div id="header"> <div id="right"> <a href="#">免费注册</a> <a href="#">设为主页</a> <a href="#">收藏本站</a> </div> </div> <div id="mid"> <div id="nav"> <ul> <li><a href="#" title="首页" id="home" runat="server"> <img src="Images/nav/nav_01.JPG" border="0" /></a></li> <li> <img src="Images/nav_line.jpg" border="0" /></li> <li><a href="#" title="充值中心"> <img src="Images/nav/nav_022.JPG" border="0" onmouseover="this.src='Images/nav/nav_02.JPG'" onmouseout="this.src='Images/nav/nav_022.JPG'"/></a></li><li> <img src="Images/nav_line.jpg" border="0" /></li> <li><a href="#" title="新闻公告"> <img src="Images/nav/nav_033.JPG" border="0" onmouseover="this.src='Images/nav/nav_03.JPG'" onmouseout="this.src='Images/nav/nav_033.JPG'"/></a></li><li> <img src="Images/nav_line.jpg" border="0" /></li> <li><a href="#" title="游戏下载"> <img src="Images/nav/nav_044.JPG" border="0" onmouseover="this.src='Images/nav/nav_04.JPG'" onmouseout="this.src='Images/nav/nav_044.JPG'"/></a></li><li> <img src="Images/nav_line.jpg" border="0" /></li> <li><a href="#" title="游戏排行"> <img src="Images/nav/nav_055.JPG" border="0" onmouseover="this.src='Images/nav/nav_05.JPG'" onmouseout="this.src='Images/nav/nav_055.JPG'"/></a></li><li> <img src="Images/nav_line.jpg" border="0" /></li> <li><a href="#" title="新手帮助"> <img src="Images/nav/nav_066.JPG" border="0" onmouseover="this.src='Images/nav/nav_06.JPG'" onmouseout="this.src='Images/nav/nav_066.JPG'"/></a></li> </ul> </div> <div id="mid_top"> <div id="mid_top_left"> <div id="mid_top_left_01"> <div class="left"> </div> <div class="mid"> <table cellpadding="0" cellspacing="0" border="0"> <tr style=" padding-bottom:2px;"> <td> 用户名：</td> <td colspan=2> <input id="Text1" type="text" style="width: 100px;" /></td> <td> <img src="Images/btn_entry.jpg" /></td> </tr> <tr style="padding-top:2px; padding-bottom:2px;"> <td> 密 码：</td> <td colspan=2> <input id="Text4" type="text" style="width: 100px;" /></td> <td > <img src="Images/btn_login.jpg" /></td> </tr> <tr style="padding-top:2px; padding-bottom:2px;"> <td> 验证码：</td> <td> <input id="Text5" type="text" style="width: 50px;" /> </td> <td><img src="Images/btn_check.jpg" /></td> <td> <img src="Images/btn_pwd.jpg" /></td> </tr> </table> </div> <div class="right"> </div> </div> <div id="mid_top_left_02"> <div style="width: 200px; height: 95px; padding-top: 5px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td height="5"> </td> </tr> <tr style="padding-top: 1px;"> <td colspan="2" style="height: 50px"> <a href="#" title="大厅下载"> <img src="Images/left_down_btn.jpg" border="0" /></a> </td> </tr> <tr> <td style="width: 110px; height: 26px;"> <a href="#" title="完整版"> <img src="Images/left_down_btn01.jpg" border="0" /></a> </td> <td style="width: 110px; height: 26px;"> <a href="#" title="精编版"> <img src="Images/left_down_btn02.jpg" border="0" /></a> </td> </tr> </table> </div> </div> </div> <div id="mid_top_right"> </div> </div> <div id="mid_top_spacing"> </div> <div id="mid_mid"> <div id="mid_mid_left"> <div id="mid_mid_left_01"> <a href="#"> <img src="Images/left_c_01.jpg" border="0" /></a> </div> <div id="mid_mid_left_02"> <a href="#"> <img src="Images/left_c_02.jpg" border="0" /></a> </div> <div id="mid_mid_left_03"> <a href="#"> <img src="Images/left_c_03.jpg" border="0" /></a> </div> <div id="mid_mid_left_04"> <a href="#"> <img src="Images/left_kf.jpg" border="0" /></a> </div> </div> <div id="mid_mid_mid"> <div id="mid_mid_mid_news"> <table cellpadding="0" cellspacing="0" border="0" style="color: #007EFF;" align="left"> <tr style="padding-top: 4px; padding-bottom: 2px;"> <td style="width: 60px" align="left" valign="top"> [ 公告 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 250px" align="left"> <a href="#">关于杭州开心棋牌个人中心</a> </td> <td align="right"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/news_line.jpg" width="320" height="5" /></td></tr> </table> </td> </tr> <tr style="padding-top: 2px; padding-bottom: 2px;"> <td style="width: 60px" align="left" valign="top"> [ 公告 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 250px" align="left"> <a href="#">关于杭州开心棋牌免费抽奖免费送Q币活动</a> </td> <td align="right"> [2009-01-01]</td> </tr> <tr> <td colspan="2"> <img src="Images/news_line.jpg" width="320" height="5" /></td></tr> </table> </td> </tr> <tr style="padding-top: 2px; padding-bottom: 2px;"> <td style="width: 60px" align="left" valign="top"> [ 公告 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 250px" align="left"> <a href="#">关于杭州开心棋牌实卡冲值</a> </td> <td align="right"> [2009-01-01]</td> </tr> <tr> <td colspan="2"> <img src="Images/news_line.jpg" width="320" height="5" /></td></tr> </table> </td> </tr> <tr style="padding-top: 2px; padding-bottom: 2px;"> <td style="width: 60px" align="left" valign="top"> [ 新闻 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 250px; height: 14px;" align="left"> <a href="#">杭州开心棋牌打BUG有奖活动</a> </td> <td align="right" style="height: 14px"> [2009-01-01]</td> </tr> <tr> <td colspan="2"> <img src="Images/news_line.jpg" width="320" height="5" /></td></tr> </table> </td> </tr> <tr style="padding-top: 2px; padding-bottom: 2px;"> <td style="width: 60px" align="left" valign="top"> [ 公告 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 250px" align="left"> <a href="#">杭州开心棋牌网防骗全攻略</a> </td> <td align="right"> [2009-01-01]</td> </tr> <tr> <td colspan="2"> <img src="Images/news_line.jpg" width="320" height="5" /></td></tr> </table> </td> </tr> </table> </div> <div id="mid_mid_left_question"> <table cellpadding="0" cellspacing="0" border="0" style="color: #007EFF;" align="left"> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 已解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">如何250px手机密保</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 待解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">如何修改资料</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 待解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">密保卡使用</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 已解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">如何250px密保卡</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 已解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">如何防止账号被盗?</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 已解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">双扣贡献没有打出来问题</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 已解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">卡住后无法进入房间怎么办</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> <tr style="padding-top: 0px; padding-bottom: 2px;"> <td style="width: 81px" align="left" valign="top"> [ 已解决 ]</td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 302px; height: 14px;" align="left"> <a href="#">打不到250px的机器怎么办</a> </td> <td align="right" style="width: 74px; height: 14px;"> [2009-01-01]</td> </tr> <tr> <td colspan="2" style="height: 5px"> <img src="Images/question_line.jpg" width="375" height="5" /></td> </tr> </table> </td> </tr> </table> </div> </div> <div id="mid_mid_right"> <div id="mid_mid_right_01"> <table cellpadding="0" cellspacing="0" border="0" align="left"> <tr> <td> <a href="#"><img src="Images/right_01_01.jpg" border="0" /></a> </td> <td> <a href="#"><img src="Images/right_01_03.jpg" border="0" /></a> </td> </tr> <tr> <td colspan="2" align="left"> <a href="#"><img src="Images/right_01_02.jpg" border="0" /></a> </td> </tr> </table> </div> <div id="mid_mid_right_02"> <table cellpadding="0" cellspacing="0" border="0" align="left"> <tr> <td> <a href="#"><img src="Images/right_02_01.jpg" border="0" /></a> </td> <td> <a href="#"><img src="Images/right_02_04.jpg" border="0" /></a> </td> </tr> <tr> <td> <a href="#"><img src="Images/right_02_02.jpg" border="0" /></a> </td> <td> <a href="#"><img src="Images/right_02_05.jpg" border="0" /></a> </td> </tr> <tr> <td colspan="2" align="left"> <a href="#"><img src="Images/right_02_03.jpg" border="0" /></a> </td> </tr> </table> </div> <div id="mid_mid_right_03"> <table cellpadding="0" cellspacing="0" border="0" align="left"> <tr> <td> <a href="#"><img src="Images/right_03_01.jpg" border="0" /></a> </td> <td> <a href="#"><img src="Images/right_03_04.jpg" border="0" /></a> </td> </tr> <tr> <td> <a href="#"><img src="Images/right_03_02.jpg" border="0" /></a> </td> <td> <a href="#"><img src="Images/right_03_05.jpg" border="0" /></a> </td> </tr> <tr> <td colspan="2" align="left"> <a href="#"><img src="Images/right_03_03.jpg" border="0" /></a> </td> </tr> </table> </div> </div> </div> <div id="mid_bottom_spacing"> </div> <div id="mid_bottom_txt"> <div id="ulli"> <ul> <li><a href="#">关于我们</a></li><li><a href="#">版权信息</a></li><li><a href="#">隐私声明</a></li><li> <a href="#">加入我们</a></li><li><a href="#">联系我们</a></li></ul> </div> <div style=" float:left; text-align:center; width:1000px;"> <div class="txt"> Copyright 2009-2010 www.kaixin78.net Corporation. All Rights Reserved. 开心棋牌版权所有 </div> <div class="txt"> ICP证 京B2-10088888 </div> </div> </div> </div> <div id="footer"> </div> </div> </body> </html>
3）首页PS设计和全部源码：
源码下载
版权声明： 本博客地址 http://www.cnblogs.com/joinclear，欢迎转载，转载请标明原文作者和链接。
文章说明： 一家之辞难免有误，欢迎您中肯的指正；如对您有帮助，不胜荣幸，但更希望能够抛砖引玉。
- joinclear
