私活案例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設計和全部源碼：
源碼下載