当前位置：首页 → 问答吧 → 《魔力2》最新官网代码讨论

《魔力2》最新官网代码讨论

时间：2010-09-01

来源：互联网

最近做了个魔力2官网超首，严格遵照W3C标准化的代码并考虑SEO优化，只当是练练手。请大家帮我看看代码上还有什么问题没？谢谢了。

http://cg2.9you.com/web_v2/

[ 本帖最后由 yoom 于 2010-9-1 19:18 编辑 ]

作者: aioros2009 发布时间: 2010-09-01

哎，MS贴链接没人看呢，我还是贴代码吧。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>欢迎访问魔力宝贝II官方网站</title> <meta content="魔力宝贝2，魔力宝贝2注册，魔力宝贝2解答，魔力宝贝2充值，魔力宝贝2资料，魔力宝贝2论坛" name="keywords" /> <meta content="魔力宝贝2官方网站为您提供最专业的游戏导航服务，魔力宝贝2官方网站为您解答所有游戏中的疑难问题，魔力宝贝2官方网站可以让您足不出户实现网上充值，现在您可以通过百度，google，yahoo等搜索引擎找到我们" name="description" /> <meta content="[email protected]" name="author" /> <meta content="Copyrights by SQUARE ENIX" name="Copyright" /> <link href="css/index_top.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="header"> <div class="headerTop"> <div class="logoArea"> <h1><span>魔力宝贝2官方网站</span></h1> </div> </div> <div class="navi"> <ul> <li><a href="http://registcg2.9you.com/" title="魔力宝贝2注册" target="_blank" class="navi1">魔力宝贝2注册</a></li> <li><a class="navi2" href="http://cg2.9you.com/web_v2/faq.html" title="魔力宝贝2解答">魔力宝贝2解答</a></li> <li><a class="navi3" href="http://pay.9you.com/funpay/" target="_blank" title="魔力宝贝2充值">魔力宝贝2充值</a></li> <li><a class="navi4" href="http://cg2.9you.com/web_v2/index.html" title="魔力宝贝2时间版首页">魔力宝贝2时间版首页</a></li> <li><a class="navi5" href="http://cg2.9you.com/zhinan.html" target="_blank" title="魔力宝贝2新手导航">魔力宝贝2新手导航</a></li> <li><a class="navi6" href="http://cg2.9you.com/web_v2/doc.html" target="_blank" title="魔力宝贝2资料">魔力宝贝2资料</a></li> <li><a class="navi7" href="http://bbs.9you.com/index.jsp?bbs=3&type=Forum&id=8705" target="_blank" title="魔力宝贝2论坛">魔力宝贝2论坛</a></li> </ul> <div class="clear"></div> </div> </div> <div class="mainContent"> <div class="sidebar"> <div> <a class="feature" href="#" title="开启新的旅程，魔力宝贝2时间版新特色">开启新的旅程，魔力宝贝2时间版新特色 </a> </div> <div class="newEvent"> <h2><span>魔力宝贝2最新活动</span></h2> <div class="newEventContent"> <p>都不会要求玩家汇款，所有官方活动公告都在官方网站（9you.com域名下）公布 </p> </div> </div> <div class="driver"> <h2><span>魔力宝贝2显卡驱动下载</span></h2> <ul> <li><a class="nvidia" href="#" title="nvidia显卡全系列驱动">nvidia显卡全系列驱动</a></li> <li><a class="ati" href="#" title="ati显卡全系列驱动">ati显卡全系列驱动</a></li> <li><a class="intel" href="#" title="intel显卡全系列驱动">intel显卡全系列驱动</a></li> <li><a class="directx" href="#" title="directx显卡全系列驱动">directx显卡全系列驱动</a></li> <li class="prompt"><span>此款游戏使用了最新的显示优化技术，为了更好的体验游戏，请确认自己的电脑上已经正确安装了显卡驱动程序，不确定是否已安装的玩家，可通过链接下载</span></li> </ul> </div> </div> <div class="content"> <div class="contentLeft"> <div class="newSpecial"> <img src="images/index_top/ad.jpg" width="440" height="190" alt="魔力宝贝2最新版本专题" title="魔力宝贝2最新版本专题" /> </div> <div class="client"> <h2><span>魔力宝贝2客户端下载</span></h2> <span class="version">版本号：1.XXXXXXXXXX</span> <div class="clientContent"> “魔力宝贝II 时间版”完整客户端下载<br /> 版本号：1.XXXXXXXXXX<br /> 容量：581MB<br /> MD5：64c44d0b6d9182XXXXXXX<br /> 更新日期：10年X月X日<br /> <div class="download"> <a class="http" href="#" title="http下载">魔力宝贝2客户端http下载</a> <a class="bt" href="#" title="bt下载">魔力宝贝2客户端bt下载</a> </div> </div> <div class="media"> <h2><span>魔力宝贝2媒体分流下载</span></h2> <div class="mediaContent"> <ul> <li><a href="#" target="_blank" title="766">766</a></li> <li><a href="#" target="_blank" title="多玩游戏网">多玩游戏网</a></li> <li><a href="#" target="_blank" title="电玩巴士">电玩巴士</a></li> <li><a href="#" target="_blank" title="万宇">万宇</a></li> <li><a href="#" target="_blank" title="多来米">多来米</a></li> <li><a href="#" target="_blank" title="游戏999">游戏999</a></li> <li><a href="#" target="_blank" title="17173">17173</a></li> <li><a href="#" target="_blank" title="5617">5617</a></li> <li><a href="#" target="_blank" title="新浪">新浪</a></li> <li><a href="#" target="_blank" title="1T1T">1T1T</a></li> </ul> <div class="clear"></div> </div> <div class="ad"> <a class="adLink" href="http://cg2.9you.com/" target="_blank" title="点击进入魔力宝贝2道具版官方网站">点击进入“魔力宝贝2”道具版官方网站 </a> </div> </div> </div> </div> <div class="contentRight"> <div class="news"> <h2><span>魔力宝贝2游戏公告</span></h2> <div class="newsContent2"> <p>全区全服现已更新至1.302.10062817最新版本"。本次更新为客户端自动更新。祝您游戏愉快！ </p> </div> </div> <div class="config"> <h2><span>魔力宝贝2游戏配置</span></h2> <dl> <dt>CPU</dt> <dd>赛扬IV 1.7GHz</dd> <dt>RAM</dt> <dd>256M</dd> <dt>系统</dt> <dd>Windows 2000/XP</dd> <dt>显卡</dt> <dd>Geforce4 MX440以上显卡</dd> <dt>DirectX</dt> <dd>DirectX 9.0c</dd> <dt style="border:none;">硬盘剩余</dt> <dd style="border:none;">2G</dd> </dl> </div> <div class="otherService"> <div class="serviceHeader"> <ul> <li><a class="change" href="http://idea.9you.com/bug_inner.php?g=cg2" target="_blank" title="魔力宝贝2你提我改">魔力宝贝2你提我改</a></li> <li><a class="cs" href="http://kefu.9you.com/game_main.php?gameid=66" target="_blank" title="魔力宝贝2客服中心">魔力宝贝2客服中心</a></li> <li><a class="parents" href="http://www.9you.com/jiazhang/" target="_blank" title="魔力宝贝2久游家长监控">魔力宝贝2久游家长监控</a></li> </ul> </div> <div class="clear"></div> <div class="otherContent"> <p>客服电话：021 - 61361878<br /> 客服邮箱：<a href="mailto:[email protected]">[email protected]</a><br /> </p> <div class="tips"> <h2><span>魔力宝贝2友情提示</span></h2> 1.官方举行任何活动都不会要求玩家汇款，所有官方活动公告都在官方网站（9you.com域名下）公布，请不要相信其他任何网站的所谓活动公告。如果您不幸登陆了欺骗类的网站，请立即登陆regist.9you.com修改您的个人信息，以保护自己的利益。<br />2.官方人员是不会通过任何途径向您索取密码的，请您警惕骗子；<br /> 3.为了保障玩家利益，我们建议玩家之间不要进行现金交易，由此产生的一切后果，由玩家自行承担； 4.若您要举报玩家，请别忘记提供相应截图； </div> </div> <div class="otherFotter"></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer"> <img src="images/index_top/waring_02.jpg" width="1003" height="156" alt="魔力宝贝2健康提醒" title="魔力宝贝2健康提醒" /> </div> <div class="copyRight"> <div class="copyRightLogo"><span>久游网 and square enix</span></div> <div class="copyRightContent"> 久游网版权所有，侵权必究 ©2008-2010 Copyrights by SQUARE ENIX. Licensed by SQUARE ENIX.<br /> Chinese Language Version Rights Licensed by Nineyou International Limited ＆ its subsidiaries.<br /> 中华人民共和国软件产品登记号：国DJY-2009-0002<br /> 中华人民共和国著作权合同登记号：电出字02-2008-014号<br /> 中华人民共和国出版许可号：新出音管[2007]1135号 </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: aioros2009 发布时间: 2010-09-01

怎么都没人回复呢？时好时坏也吱一声呗................

作者: aioros2009 发布时间: 2010-09-01

.navi li {height:157px; float:left; _font-size:0;}
.navi1 {width:214px; height:157px; float:left; background:url(../images/index_top/navi_01.jpg) no-repeat; display:block; text-indent:-10000px;}
.navi2 {width:108px; height:157px; float:left; background:url(../images/index_top/navi_02.jpg) no-repeat; display:block; text-indent:-10000px;}
.navi3 {width:108px; height:157px; float:left; background:url(../images/index_top/navi_03.jpg) no-repeat; display:block; text-indent:-10000px;}
.navi4 {width:143px; height:157px; float:left; background:url(../images/index_top/navi_04.jpg) no-repeat; display:block; text-indent:-10000px;}
.navi5 {width:101px; height:157px; float:left; background:url(../images/index_top/navi_05.jpg) no-repeat; display:block; text-indent:-10000px;}
.navi6 {width:107px; height:157px; float:left; background:url(../images/index_top/navi_06.jpg) no-repeat; display:block; text-indent:-10000px;}
.navi7 {width:222px; height:157px; float:left; background:url(../images/index_top/navi_07.jpg) no-repeat; display:block; text-indent:-10000px;}

类似这些共通的属性可以再提炼精简下

作者: zhutianyi 发布时间: 2010-09-01

请问LS类似于以上的代码应该如何精炼才比较合理？往指教。

作者: aioros2009 发布时间: 2010-09-01

强烈关注

作者: furuier 发布时间: 2010-09-01

非常好看，提出几个问题希望楼主解答下哈：
1：PNG透明用的哪个？我找到的全部都要加载完了能看到灰色背景才会被透明，不像我看到腾讯的就是直接加载出来就是透明的了，例如腾讯微博的首页。；
2：首页的那个幻灯片是自己写的JS吗？还是在国外找的一些好看的特效呢？

想要那个下载客户端的大按钮和导航的PSD源文件，呵呵。

做的非常不错，加油。

作者: fim8 发布时间: 2010-09-01

只动css的话，可以类似这样改
.navi li {height:157px; float:left; _font-size:0;}

.navi1,.navi2 {float:left; display:block; text-indent:-10000px; background-repeat: no-repeat;}

.navi1 {width:214px; background-image:url(../images/index_top/navi_01.jpg); }
.navi2 {width:108px; background-image:url(../images/index_top/navi_02.jpg); }

作者: zhutianyi 发布时间: 2010-09-02

footer都能用class，楼主有想法。

作者: xmlovedoudou 发布时间: 2010-09-02

非常非常的好看。。
通行证注册疑难解答我要充值。。。。。玩家论坛
这些块的链接范围是不是有点大呢？

作者: benzhuqq 发布时间: 2010-09-02

7楼的朋友所说的PNG是指点进去的首页顶端的导航背景透明吗？首页的那个JS是自己弄的。
9楼朋友的意思好像是页脚的话最好不要用class吗？如果有更合理的做法望指教。
10楼的朋友这个是我当时切图的问题，的确切大了。

作者: aioros2009 发布时间: 2010-09-02

另外谢谢8楼的兄弟，的确这样的写法更精练。

作者: aioros2009 发布时间: 2010-09-02