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>body部分代码：
<div id="top1">
<h5><span>首页</span></h5>
<p>
<a href="#">注册</a>|
<a href="#">登录</a>|
<a href="#">帮助</a>|
<a href="#">更多</a>
</p>
</div>
<div id="top2">
<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>
<div id="topimg">
<img src="QQ/img-3.jpg"/>
</div>
<div class="right">
<form action="#" method="post">
<h1>用户登录界面</h1>
<p class="a">账号:<input type="text" name="zhanghao"></p>
<p class="a">密码:<input type="password" name="mima"></p>
<p><input type="submit"></p>
<p><a href="#">立即注册</a></p>
<p ><a href="#">忘记密码</a></p>
</form>
</div>
</div>
<div class="top3">
<div class="topheight">
<h3 style="background-color: #DCDCDC;"><p><span>全部游戏</span> <a href="#">战争策略</a> |
<a href="#">体育经验</a> | <a href="#">社交游戏</a> </p></h3>
<div class="aaa">
<dl >
<dr >
<div class="aa">
<dd class="bbb"></dd>
<dd class="ccc"> <h2>龙将</h2>
三国题材横版RPG网游，丰富的武将系统
<p>类型：角色扮演 </p>
<p>游戏人气：470921</p>
<p><img src="./QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></p></dd>
</div>
<div class="aa">
<dd class="ddd"> </dd>
<dd class="eee"><h2>征战四方</h2>
一款不建主城不等CD，不占资源，全程战斗
<p>类型：战征策略</p>
<p>游戏人气：87451</p>
<p><img src="./QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></p>
</dd>
</div>
</dr>
</dl>
</div>
<div class="fff">
<div class="top4">
<h1 style="color: brown;background-color: aliceblue;">角色扮演</h1>
<table class="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>
</div>
</div>
</div>
<div class="rrr">
<div class="top5">
<h1>新闻公告</h1>
<ul class="lll">
<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>
</div>
<div class="bottom">
<h2>游戏视频</h2>
<ul class="yyy">
<dl>
<dr>
<dd class="cc"><img src="QQ/img-1.jpg"></dd>
<dd class="dd"><a>《航海之王》麻辣炫酷反穿越，英雄时尚大变身！</a></dd>
</dr>
<dr>
<dd class="cc"><img src="QQ/img-2.jpg"></dd>
<dd class="ee"><a>《弹弹堂》吴克群同名激情主题MV，体验修真乐趣 </a></dd>
</dr>
</dl>
</ul>
</div>
</div>
<div class="footer">
<a href="#">关于我们</a> <a href="#">手机版</a> <a href="#">开放平台</a> <a href="#">自助广告</a>
<a href="#">招聘</a> <a href="#">客服</a> <a href="#">帮助</a> <span> @2013开心网 文网文[2009]157号 京ICP证080482号 京公网安备110000000003号 未成年人家长监护</span>
</div>
</div>
图片素材：
