HTML制作开心网游戏静态页面「终于解决」-开心游戏网页面代码

HTML制作开心网游戏静态页面「终于解决」利用css样式，设置游戏网站的静态页面，先说明思路：1.先设置最上方为一个p，并且添加背景颜色（建议用取色器，这里比较草率）2.将第二个板块划分为一个p，左侧为ul，注意宽度的合理分配，并且在右边插入一个p用于存放提交表格3.下方的两块以及右侧划分两个p，注意上方文字的对齐和背景。

css代码：

<style>   *{    margin: 0px; padding: 0px;   }   #top1{    position: relative;    width: 1000px;    height: 45px;    border: 1px solid red;    background-color: #f3515c;      }   #top1 p{    float: right;    line-height: 45px;   padding-right: 20px;   color: white;   font-size: small;   }#top1 a{ text-decoration: none; color: white; display: inline-block; line-height: 40px; padding-right:10px ;}#top1 h5{  background: url(QQ/gameLogo.jpg) 0px 0px no-repeat;  height: 45px;  float: left;}#top1 h5 span{ display: inline-block; color: #f3515c; background-color: white; margin-left: 250px; margin-top: 5px; text-align: center; font-size: 15px; line-height: 40px; border-radius: 5px 5px 0px 0px; width: 70px; height: 40px;}#top2{ width: 1000px; height: 230px; border: 1px solid red;}#top2 ul{ width: 190px; height: 230px; float: left;}#top2 ul li{ display: block; padding-top: 1px; background: url(QQ/gameBg1.jpg);}#top2 ul li a{ text-decoration: none; color: black; line-height: 27px; padding-left: 30px;}#topimg { width: 520px; height: 230px; float: left; padding-top: 2px;}.right{ background-color: gainsboro; height: 230px; padding-left: 10px;}.right form h1{ color: dimgray; font-size: 18px; display: block; margin-left: 2em; line-height: 70px; height: 50px; padding-left: 10px;}.a{float: left; padding-left: 20px; padding-top: 20px;}.right form p{ height: 20px;}.right form p:nth-of-type(3){ padding-left: 80px; padding-top: 20px; float: left;}.right form p:nth-of-type(3) input{ background-color: red; color: white; display: inline-block; float: left ; width: 70px; height: 30px; letter-spacing: 5px; }.right form p:nth-of-type(4) a{ display: block; text-decoration: none ; float: left ; margin-left: 20px; padding-top: 20px; font-size: small;}.right form p:nth-of-type(5) a{ display: block; text-decoration: none ; float: left ; margin-left: 20px; padding-top: 0px; font-size: small;}.top3{ width: 1000px; height: 660px;}.topheight{ width: 710px; height: 660px; float: left; padding-left: 0px; display: inline-block;}.aaa{ border: 1px solid darkgray; width: 710px; height: 230px;}.bbb{ width: 190px; height: 190px; margin: 15px; float: left; display: inline-block; background:url(QQ/img-4.jpg)0px 25px no-repeat; text-align: center;}.ccc{ width: 130px; height: 190px; float: left; font-size: 15px;margin-top: 30px;}.aa{ border: 1px solid darkgray; width: 350px; height: 200px; margin-top: 20px ; display: inline-block;}.ddd{ width: 190px; height: 190px; margin: 15px; float: left; display: inline-block; background:url(QQ/img-5.jpg)0px 25px no-repeat;}.eee{ width: 130px; height: 190px; float: left; font-size: 15px; margin-top: 30px;}.topheight h3{ background-color: #DCDCDC; text-align: left; height: 30px; padding-top: 20px; font-size: 15px;}.topheight h3 span{ color: red;}.topheight a{ text-decoration: none; color: #000000;}.table tr td{ margin-top: 30px; padding-left: 30px;}.fff h1{ font-size: 20px;}.fff tr:nth-of-type(2){ text-align: center; color: red;}.fff tr:nth-of-type(3){ font-size: 12px;}.fff tr:nth-of-type(4){ font-size: 12px;}.fff tr:nth-of-type(7){ text-align: center; color: red;}.fff tr:nth-of-type(8){ font-size: 12px;}.fff tr:nth-of-type(9){ font-size: 12px;}.top4{ border: 1px solid darkgray; }.top5{ border: 1px solid darkgray;}.bottom{ border: 1px solid darkgray; padding-top: 3px;}.rrr{ width: 290px; height: 660px; float: left; display: inline-block;}.rrr h1{ border: 1px solid #DCDCDC; color: #B22222; font-size: 17px; height: 23px; line-height: 23px; padding-left: 8px; background-color: gainsboro;}li{ list-style: none;}.rrr li{ height: 30px; line-height: 30px; background:url(QQ/btn-04.gif)5px 8px no-repeat; padding-left: 45px; border-bottom: 1px dashed; font-size: 15px;}.rrr h2{ border: 1px solid darkgray; color: #B22222; font-size: 17px; height: 23px; line-height: 23px; padding-left: 8px; background-color: gainsboro;}.yyy{ height: 234px;}.cc{ margin: 15px; float: left; }.dd{ padding-top: 20px; font-size: 0.8em; color: darkblue; padding-bottom: 40px; border-bottom: 1px dashed;}.ee{ padding-top: 30px; font-size: 0.8em; color: darkblue;}.footer{ float: left; font-size: 14px;}.footer a{ text-decoration: none; color: darkblue;}.footer span{ color: darkgray; padding-left: 18px;}  </style>

是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活CLion DataGrip DataSpell dotCover dotMemory dotTrace GoLand PhpStorm PyCharm ReSharper ReShaC++ Rider RubyMine WebStorm 全家桶 解锁下载刷新

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】：官方授权 正版激活 自己使用，支持Jetbrains家族下所有IDE…

body部分代码：

<p ><h5><span>首页</span></h5><p><a href="#">注册</a>|<a href="#">登录</a>|<a href="#">帮助</a>|<a href="#">更多</a></p></p><p ><ul><li><img src="QQ/sub-1.gif"><a href="#">侠客世界</a></li><li><img src="QQ/sub-2.gif"><a href="#">征战四方</a></li><li><img src="QQ/sub-3.gif"><a href="#">龙将</a></li><li><img src="QQ/sub-4.gif"><a href="#">弹弹堂</a></li><li><img src="QQ/sub-5.gif"><a href="#">凡人修仙2</a></li><li><img src="QQ/sub-6.gif"><a href="#">一骑当先</a></li><li><img src="QQ/sub-7.gif"><a href="#">宫廷计</a></li><li><img src="QQ/sub-8.gif"><a href="#">神仙道</a></li></ul><p ><img src="QQ/img-3.jpg"/></p><p ><form action="#" method="post"><h1>用户登录界面</h1><p >账号:<input type="text" name="zhanghao"></p><p >密码:<input type="password" name="mima"></p><p><input type="submit"></p><p><a href="#">立即注册</a></p><p ><a href="#">忘记密码</a></p></form></p></p><p ><p ><h3 style="background-color: #DCDCDC;"><p><span>全部游戏</span>&nbsp;&nbsp;&nbsp;<a href="#">战争策略</a> | <a href="#">体育经验</a> | <a href="#">社交游戏</a>  </p></h3><p ><dl ><dr ><p ><dd ></dd><dd > <h2>龙将</h2>三国题材横版RPG网游，丰富的武将系统<p>类型：角色扮演 </p><p>游戏人气：470921</p><p><img src="./QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></p></dd></p><p ><dd > </dd><dd ><h2>征战四方</h2>一款不建主城不等CD，不占资源，全程战斗<p>类型：战征策略</p><p>游戏人气：87451</p><p><img src="./QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></p></dd></p></dr></dl></p><p ><p ><h1 style="color: brown;background-color: aliceblue;">角色扮演</h1><table ><tr><td><img src="QQ/img-6.jpg"></td><td><img src="QQ/img-7.jpg"></td><td><img src="QQ/img-8.jpg"></td><td><img src="QQ/img-9.jpg"></td></tr><tr><td> 神仙道</td><td>征战四方</td><td>一骑当先</td><td>洪荒神话</td></tr><tr><td>游戏人气：117614</td><td>游戏人气：1245814</td><td>游戏人气：1232158</td><td>游戏人气：123745</td></tr><tr><td>游戏状态：22区开启</td><td>游戏状态：23区开启</td><td>游戏状态：25区开启</td><td>游戏状态：18区开启</td></tr><tr><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td></tr><tr><td><img src="QQ/img-10.jpg"></td><td><img src="QQ/img-11.jpg"></td><td><img src="QQ/img-12.jpg"></td><td><img src="QQ/img-13.jpg"></td></tr><tr><td>龙将</td><td>一球成名</td><td>凡人修真2</td><td>傲视开地</td></tr><tr><td>游戏人气：178501</td><td>游戏人气：983014</td><td>游戏人气：745214</td><td> 游戏人气：654814</td></tr><tr><td> 游戏状态：火爆开启</td><td>游戏状态：2服开启</td><td>游戏状态：4服开启</td><td>游戏状态：火爆开启</td></tr><tr><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td><td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td></tr></table></p></p></p><p ><p ><h1>新闻公告</h1><ul ><li>[征战四方] 开心首服·黄巾之乱</li><li>[龙将] 火爆8服·八门金</li><li>[弹弹堂] 41服开启·万人竞技</li><li>[凡人修真2] 03月08日·四海帝王</li><li>[一骑当先] 开心2服上线送黄金</li><li>[宫廷计] 03月06日·西施秘史</li><li>[神仙道] 03月05日·玄净魔影</li><li>[千军破] 48服·登录送史实名将</li><li>[大唐行镖] 全球唯一走镖页游</li><li>[范特西篮球] 疯狂纽约来啦！</li><li>[一球成名] 27服开服·王者之战</li><li>[凡人修真2] 03月08日·四海帝王</li></ul></p><p ><h2>游戏视频</h2><ul ><dl><dr><dd ><img src="QQ/img-1.jpg"></dd><dd ><a>《航海之王》麻辣炫酷反穿越，英雄时尚大变身！</a></dd></dr><dr><dd ><img src="QQ/img-2.jpg"></dd><dd ><a>《弹弹堂》吴克群同名激情主题MV，体验修真乐趣 </a></dd></dr></dl></ul></p></p><p ><a href="#">关于我们</a>&nbsp;&nbsp;<a href="#">手机版</a>&nbsp;&nbsp;<a href="#">开放平台</a>&nbsp;&nbsp;<a href="#">自助广告</a>&nbsp;&nbsp;<a href="#">招聘</a>&nbsp;&nbsp;<a href="#">客服</a>&nbsp;&nbsp;<a href="#">帮助</a> <span> @2013开心网   文网文[2009]157号   京ICP证080482号   京公网安备110000000003号 未成年人家长监护</span></p></p>

图片素材：