HTML 第九章部分代码
2016-10-23 17:12
246 查看
<!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=utf-8" /> <title>开心网游戏页面</title> <style type="text/css"> .a { width:800px; height:45px; background:url(menuBg.jpg) repeat-x; } .ulli li { background:url(gameBg1.jpg); list-style-type:none; position:relative; height:28px; } .w{float:left;} .b {padding:2px; float:left; width:140px; height:200px; } .c { width:100px; height:30px; float:left; background:url(btn-01.gif) no-repeat; position:relative; top:14px; text-align:center; } a { color:#FFF; text-decoration:none; } a:hover { color:#F93; text-decoration:underline; } .pp { color:#000; text-decoration:none; } .pp:hover { color:#FFF; } .ee:hover { background:url(gameBg2.jpg) no-repeat; } .leftd { width:200px; float:left; height:224px; border:#000 solid thin; margin-right:10px; } .d { margin-top:10px; } .rightd { float:left; width:px; border:#000 solid thin; height:100px; } ul { list-style:none; margin:0px; padding:0px; } .sll,.zzz,.susu,.ppp{ clear:both; } .sll { border:#999 thin dashed; color: #000; text-decoration: underline; background-color:#CCC; width:600px; height:24px; float:left; text-decoration:none; margin-top:6px; margin-bottom:8px; } .woaini { margin-top:6px; border:#000 solid thin; margin-left:2px; float:left; width:300px; margin-right:2px; padding:2px; } .eee { margin-top:6px; border:#000 solid thin; margin-left:2px; float:left; width:300px; } .aa { border:#999 thin dashed; color: #000; text-decoration: underline; background-color:#CCC; width:600px; height:24px; text-decoration:none; margin-top:6px; margin-bottom:6px; margin-right:6px; } .ppp { width:600px; height:400px; border:#999 thin dashed; padding:2px; } </style> </head> <body> <div class="zong"> <div class="a"> <img class="w" src="gameLogo.jpg"/> <div class="c"> 首页</div > <div style="float:right;"><a href="#">注册|</a> <a href="#">登录|</a> <a href="#">帮助|</a> <a href="#">更多</a> </div> </div> <div class="d"> <div class="leftd"> <ul class="ulli"> <a class="pp" href="#"> <li class="ee"><img src="sub-1.gif"/>侠客世界</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-2.gif"/>征战四方</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-3.gif"/>龙将</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-4.gif"/>弹弹堂</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-5.gif"/>凡人修真2</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-6.gif"/>一骑当先</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-7.gif"/>宫廷计</li> </a> <a class="pp" href="#"> <li class="ee"><img src="sub-8.gif"/>神仙道</li> </a> </ul> </div> <div class="rightd"> <img src="img-3.jpg" width="400px" height="226"/> </div> </div> <div class="sll"> <span>全部游戏</span> <a href="#">战争策略|</a> <a href="#">体育经营|</a> <a href="#">社会游戏</a> </div> <div class="zzz"> <div class="woaini"> <ul> <li class="b"><img src="img-4.jpg"/></li> <li>龙将</li> <li>三国题材横版RPG网游,丰富的武将系统</li> <li>类型:角色扮演</li> <li>游戏人气:470921</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="eee"> <ul> <li class="b"><img src="img-5.jpg"/></li> <li>征战四方</li> <li>一款不建主城不等CD,不占资源,全程战斗</li> <li>类型:战征策略</li> <li>游戏人气:845221</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> </div> <div class="sll"> 角色扮演</div> <div class="ppp"> <div class="b"> <ul> <li><img src="img-6.jpg"/></li> <li>神仙道</li> <li>游戏人气:1765314</li> <li>游戏状态:22区开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-7.jpg"/></li> <li>征战四方</li> <li>游戏人气:1245814</li> <li>游戏状态:23区开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-8.jpg"/></li> <li>一骑当先</li> <li>游戏人气:1232158</li> <li> 游戏状态:25区开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-9.jpg"/></li> <li>洪荒神话</li> <li> 游戏人气:123745</li> <li>游戏状态:18区开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-10.jpg"/></li> <li>龙将</li> <li>游戏人气:178501</li> <li>游戏状态:火爆开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-11.jpg"/></li> <li>一球成名</li> <li>游戏人气:983014</li> <li>游戏状态:2服开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-12.jpg"/></li> <li>凡人修真2</li> <li>游戏人气:745214</li> <li>游戏状态:4服开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> <div class="b"> <ul> <li><img src="img-13.jpg"/></li> <li>傲视开地</li> <li>游戏人气:654814</li> <li> 游戏状态:火爆开启</li> <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li> </ul> </div> </div> </div> <div class="you"> <div class="deng"> 开心用户登录 </div> </div> </body> </html>
相关文章推荐
- JS间隔性滚动代码[修正增加了部分功能] 【转:http://www.cnblogs.com/robot/archive/2008/04/09/1144568.html】
- html中省略部分代码
- c#通过后台给前台编写html部分代码,并赋值给其他input标签
- 把html页面的部分内容保存成新的html文件的jquery代码
- 在vs2005里把html里面的部分英文代码改为中文后再运行出现乱码的解决方法
- 获取html代码中的正文部分
- 【旧代码整理】controller继承Action渲染输出html部分
- javascript 文章截取部分无损html显示实现代码
- 编写高质量代码--第三部分高质量的html 总结
- 网页布局代码html部分
- HTML和JavaScript(部分)知识点(微博博客有毒,发的都不显示代码,转战CSDN)
- 部分经典的常用html代码
- 把html页面的部分内容保存成新的html文件的jquery代码
- 把html页面的部分内容保存成新的html文件的jquery代码
- jquery验证表单的js代码(HTML+CSS+PHP代码部分省略)
- tp5中分页部分显示HTML代码
- 【坑】在HTML页面中缺少<!doctype html>造成部分js代码失效问题
- 不同html页面 相同部分代码的提取
- [32期] html中部分代码与英语单词关系