制作游戏网页
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border: 1px white dashed;
}
#Day01{
width: 1400px;
height: 100px;
border: 1px red solid;
background-color:rosybrown;
border-radius: 8px 8px 0px 0px ;
position: relative;
top: 0px;
left: 20px;
}
#Day01_1{
width: 150px;
height: 50px;
position: relative;
top: 48px;
left: 20px;
}
#Day01_2{
width: 150px;
height: 50px;
position: relative;
top: 0px;
left: 300px;
border: 1px white solid;
background-color: white;
border-radius: 8px 8px 0px 0px;
text-align: center;
line-height: 50px;
}
#Day01_3{
position: relative;
top: -50px;
left: 1200px;
color: white;
display: inline-block;
}
#Day02{
position: relative;
top: 20px;
left: 20px;
width: 250px;
height: 300px;
display: inline-block;
border-radius: 8px 8px 8px 8px;
border: 1px black solid;
text-align: center;
line-height: 40px;
}
#Day02 a{
text-decoration: none;
border: 1px saddlebrown solid;
width: 150px;
}
#Day02_1{
position: relative;
top: -270px;
left: 300px;
}
#Day02_1 img {
border-radius: 20px;
}
#Day02_3 a {
border: 1px black solid;
border-radius: 50%;
position: relative;
top: -350px;
left: 900px;
color: white;
}
#Day02_3{
}
a:hover{
background-color: aquamarine;
}
.gameBorder{
width:1000px;
height: 210px;
border: 1px solid #CCCCCC;
position: relative;
top: 250px;
left: -140px;
border-radius: 20px;
}
.gameTitle{
background: #F6F6F5;
width: 1000px;
height: 31px;
border: 0 hidden #CCCCCC;
border-radius: 20px;
position: absolute;
top: -40px;
left: -40px;
margin: 40px;
position: relative;
}
.gameTitle dl{
position: absolute;
top: -10px;
}
dl dt{
color: #7D0808;
font-weight: bold;
}
dl dd{
position: relative;
top: -20px;
left: 70px;
display: inline-block;
margin-left: 10px;
}
dl a{
color: #666666;
font-size: 15px;
text-decoration: none;
}
.clea{
width: 321px;
height: 154px;
border: 1px solid #CCCCCC;
border-radius: 10px;
position: absolute;
top: 20px;
left: 70px;
}
.i{
position: relative;
top: 20px;
left: -25px;
}
.i img{
width: 160px;
height: 120px;
}
li{
list-style: none;
}
.l{
position: relative;
top: -125px;
left: 150px;
font-size: 12px;
font-weight: bold;
}
.l span{
font-weight: bold;
color: #A70A0A;
}
.play{
background: #FFFFFF;
width: 50px;
height: 30px;
border: 1px solid #CCCCCC;
border-radius: 5px;
position: relative;
}
.play a{
position: absolute;
top: 5px;
left: 10px;
text-decoration: none;
font-size: 15px;
color: #333333;
}
.gameBorder{
position: relative;
top: -200px;
left: 300px;
}
.e{
width: 50px;
height: 25px;
border: 1px rosybrown solid;
position: relative;
top: -38px;
left: 60px;
background-color: #68B0C7;
color: white;
}
.e a{
color: white;
text-decoration: none;
text-align: center;
line-height: 20px;
}
.gameBorder02{
position: relative;
top: -111px;
left: 380px;
}
.a{
border: 1px red solid;
position: relative;
top: 120px;
}
.cl{
width: 330px;
height: 154px;
border: 1px solid #CCCCCC;
border-radius: 10px;
position: absolute;
top: 20px;
left: 400px;
}
.im{
position: relative;
top: 10px;
left: -25px;
}
.lm{
position: relative;
top: -130px;
left: 150px;
font-size: 12px;
font-weight: bold;
}
.im img{
width: 160px;
height: 120px;
}
.gameRight{
position: relative;
top: -185px;
left: 940px;
width: 264px;
height: 780px;
}
.gameLogin{
position: relative;
border: 1px solid #CCCCCC;
width: 251px;
height: 207px;
border-radius: 10px;
}
.gameLogin h1{
font-size: 16px;
color: #8A7373;
position: relative;
left: 10px;
top: 5px;
}
.gameLogin .login{
position: relative;
left: 40px;
top: 5px;
}
.gameLogin a{
text-decoration: none;
}
.rder{
position: relative;
top: 20px;
border: 1px solid #CCCCCC;
width: 280px;
height: 220px;
border-radius: 10px;
}
.itle{
width: 280px;
height: 30px;
border: 1px solid #CCCCCC;
border-radius: 8px;
background: #F1F2F1;
}
.itle dt{
font-size: 14px;
position: relative;
top: -10px;
left: 10px;
}
.news li{
width: 270px;
position: relative;
top: -15px;
left: -35px;
background: url(../images/rightTwo.png) no-repeat 0 8px;
border-top:1px dashed #CCCCCC;
}
.news a{
position: relative;
top: 0;
left: 40px;
font-size: 14px;
text-decoration: none;
line-height: 25px;
}
.ad{
position: relative;
top: 40px;
}
.ad img{
width: 280px;
height: 70px;
}
.der{
position: relative;
top: 40px;
border: 1px solid #CCCCCC;
width: 280px;
height: 280px;
border-radius: 10px;
}
.gameVideo dt a{
color: blue;
font-weight: lighter;
position: absolute;
top: 45px;
left: 140px;
}
.gameVideo dd img{
position: absolute;
top: 40px;
left: -80px;
}
.gameVideo dd a{
color: blue;
font-weight: lighter;
position: relative;
top: 45px;
left: 60px;
}
.adRight img{
width: 210px;
height: 200px;
position: relative;
top: -700px;
left: 1100px;
animation:spread 5s linear infinite;
}
@keyframes spread{
0%{
transform: rotate(0deg);
right:0;
}
25%{
position: relative;
transform: rotate(20deg);
right:0;
top: -1000px;
left: 700px;
}
50%{
transform: rotate(0deg);
left:600px;
position: relative;
top: -1000px;
left: 1000px;
}
55%{
transform: rotate(-360deg) ;
right:600px;
position: relative;
top: -1500px;
left: 500px;
}
70%{
transform: rotate(0deg);
transform: scale(2);
right:600px;
position: relative;
left: 900px;
top: -1000px;
}
80%{
transform: rotate(0deg);
right:0;
}
100%{
transform: rotate(0deg);
right:900px;
}
}
#footer{
width: 1140px;
margin: 0 auto;
}
#footer a{
text-decoration: none;
}
.role li{
width: 130px;
height: 165px;
display: inline-block;
position: relative;
top: -80px;
margin: 20px;
}
.role p{
font-size: 12px;
font-weight: bold;
}
.role span{
font-weight: bold;
color: #A70A0A;
}
.gameRight{
position: relative;
top: -800px;
left: 1100px;
}
#zjn{
width: 1400px;
position: relative;
top: -50px;
left: -280px;
}
#footer{
position: relative;
top: -350px;
}
</style>
</head>
<body>
<div>
<div id="Day01">
<nav id="Day01_1"><img src="../images/gameLogo.png"/></nav>
<nav id="Day01_2">首页</nav>
<nav id="Day01_3">注册 | 登录 | 帮助 | 更多</nav><p/>
</div>
<div id="Day02">
<a href="#"><img src="../images/sub-2.gif"/>征战四方<br/></a>
<a href="#"><img src="../images/sub-3.gif"/>龙将<br/></a>
<a href="#"><img src="../images/sub-4.gif"/>弹弹堂<br/></a>
<a href="#"><img src="../images/sub-5.gif"/>凡人修真2<br/></a>
<a href="#"><img src="../images/sub-6.gif"/>一骑当先<br/></a>
<a href="#"><img src="../images/sub-7.gif"/>宫廷计<br/></a>
<a href="#"><img src="../images/sub-8.gif"/>神仙道<br/></a>
</div>
<nav id="Day02_1">
<img src="../images/xdtgg_frxz2_44.jpg"/>
</nav>
<nav id="Day02_3">
<a id="e">1 </a>
<a id="b">2 </a>
<a id="c">3 </a>
<a id="d">4 </a>
</nav>
<div id="zjn">
<div class="gameBorder">
<div class="gameTitle">
<dl>
<dt>全部游戏</dt>
<dd><a href="#">战争策略</a></dd>
<dd>|</dd>
<dd><a href="#">体育经营</a></dd>
<dd>|</dd>
<dd><a href="#">社交游戏</a></dd>
</dl>
</div>
<ul class="clea">
<li>
<div class="i">
<img src="../images/img-4.jpg"/>
</div>
<div class="l">
<p>三国题材横版RPG网游，丰富的<br/>武将系统</p>
<p>类型：角色扮演</p>
<p>游戏人气：<span>470921</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</div>
</li>
</ul>
<div class="gameBorder02">
<ul class="clea">
<li>
<div class="i">
<img src="../images/img-5.jpg"/>
</div>
<div class="l">
<p>一款不建主城不等CD，不占资<br/>源，全程战斗</p>
<p>类型：战征策略</p>
<p>游戏人气：<span>8745221</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</div>
</li>
</ul>
</div>
<div class="a">
<div class="gameTitle03">
<dl>
<dt>角色扮演</dt>
</dl>
</div>
<div class="role">
<ul>
<li><a href="#"><img src="../images/img-6.jpg"/></a>
<p>游戏人气：1765314<br/>
游戏状态：<span>22区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-7.jpg"/></a>
<p>游戏人气：1245814<br/>
游戏状态：<span>23区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-8.jpg"/></a>
<p>游戏人气：1232158<br/>
游戏状态：<span>25区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-9.jpg"/></a>
<p>游戏人气：123745<br/>
游戏状态：<span>18区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-10.jpg"/></a>
<p>游戏人气：178501<br/>
游戏状态：<span>火爆开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-11.jpg"/></a>
<p>游戏人气：983014<br/>
游戏状态：<span>2服开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-12.jpg"/></a>
<p>游戏人气：745214<br/>
游戏状态：<span>4服开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-13.jpg"/></a>
<p>游戏人气：654814<br/>
游戏状态：<span>火爆开启</span>
</p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<aside class="gameRight">
<div class="gameLogin">
<h1>开心网用户登录</h1>
<form action="#">
<ul>
<li>
账号：<input name="username" type="text" placeholder="字母、数字的六位字符" required/>
</li>
<li>密码：
<input name="pwd" type="password" placeholder="四位数字" required/>
</li>
<li>
<input class="login" name="login" type="image" src="../images/btnLogin.jpg"/>
</li>
<li>
<a href="#">立即注册</a>
<a href="#">忘记密码</a>
</li>
</ul>
</form>
</div>
<div class="rder">
<div class="itle">
<dl>
<dt>新闻公告</dt>
</dl>
</div>
<ul class="news">
<li><a href="#" class="u">[征战四方] 开心首服·黄巾之乱</a></li>
<li><a href="#">[龙将] 火爆8服·八门金</a></li>
<li><a href="#">[弹弹堂] 41服开启·万人竞技</a></li>
<li><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
<li><a href="#">[一骑当先] 开心2服上线送黄金</a></li>
<li><a href="#">[宫廷计] 03月06日·西施秘史</a></li>
<li class="noBorder"><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
</ul>
</div>
<div class="ad">
<a href="#"><img src="../images/ad1.jpg" alt=""/></a>
<a href="#"><img src="../images/ad2.jpg" alt=""/></a>
</div>
<div class="der">
<div class="itle">
<dl>
<dt>游戏视频</dt>
</dl>
</div>
<div class="clear"></div>
<dl class="gameVideo">
<dt><img src="../images/img-1.jpg"/><a href="#">《航海之王》麻辣<br/>炫酷反穿越，英雄<br/>时尚大变身！</a></dt>
<dd><img src="../images/img-2.jpg"/><a href="#">《弹弹堂》吴克群<br/>同名激情主题MV<br/>体验修真乐趣</a></dd>
</dl>
<div class="clear"></div>
</div>
</aside>
</article>
<footer id="footer">
<a href="#">关于我们</a>
<a href="#">手机版</a>
<a href="#">开放平台</a>
<a href="#"> 自助广告</a>
<a href="#"> 招聘</a>
<a href="#">客服</a>
<a href="#">帮助</a>
@2017开心网
文网文[2009]157号
京ICP证080482号 京公网安备110000000003号 未成年人家长监护
</footer>
<div class="adRight">
<a class="icon" href="#">X</a>
<a href="#"><img src="../images/ad3.jpg" alt=""/></a>
</div>
</div>
</body>
</html>
总结：
刚开始接触XHTML的时候，感觉很难，不知该怎么学习，后来经过认真学习这门选修课，让我渐渐找到了学习的方向，每天都能进步一点点，下面让我来谈一谈我学习这门课的心得体会。
通过学习，我知道了XHTML是可扩展超文本标记语言（Extensible Hyper Text Markup Language），是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
一个HTML文件大体分为以下几部分： <HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
网页的内容
</BODY>
</HTML>
接下来学习了排列清单控制标记，排列清单控制标记可以创建一般的列表、编号列表或加着重号列表，以及定义列
表，还可以在一种列表中嵌套另一种列表。在网页中表格是一种经常使用到的设计结构，表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在 HTML 中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多，也是学习的难点。接下来还学习了图像、超链接、表单和框架等知识。在学习了这些知识以后，我对网页制作的基本结构和方法都有了一定的了解，自己开始制作一些简单的网页了。
再后来学习了XML与XHTML的区别，还有CSS的入门基础，学习了CSS文字与文本，再进一步学习了网页的布局，通过学习了这些知识以后，我对网页制作有了更深入的了解，能做一些比较复杂一点的网页了。
通过这门选修课的学习，让我进一步提高了计算机的应用能力。让我了解计算机网络知识和网上丰富多彩的信息是怎样制作和发布的。在学了本课程后，我掌握了应用网络语言HTML、CSS和网页设计软件来制作网页，并为今后的网络开发技术的学习打下了坚实的基础。所以我爱它@！！！
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border: 1px white dashed;
}
#Day01{
width: 1400px;
height: 100px;
border: 1px red solid;
background-color:rosybrown;
border-radius: 8px 8px 0px 0px ;
position: relative;
top: 0px;
left: 20px;
}
#Day01_1{
width: 150px;
height: 50px;
position: relative;
top: 48px;
left: 20px;
}
#Day01_2{
width: 150px;
height: 50px;
position: relative;
top: 0px;
left: 300px;
border: 1px white solid;
background-color: white;
border-radius: 8px 8px 0px 0px;
text-align: center;
line-height: 50px;
}
#Day01_3{
position: relative;
top: -50px;
left: 1200px;
color: white;
display: inline-block;
}
#Day02{
position: relative;
top: 20px;
left: 20px;
width: 250px;
height: 300px;
display: inline-block;
border-radius: 8px 8px 8px 8px;
border: 1px black solid;
text-align: center;
line-height: 40px;
}
#Day02 a{
text-decoration: none;
border: 1px saddlebrown solid;
width: 150px;
}
#Day02_1{
position: relative;
top: -270px;
left: 300px;
}
#Day02_1 img {
border-radius: 20px;
}
#Day02_3 a {
border: 1px black solid;
border-radius: 50%;
position: relative;
top: -350px;
left: 900px;
color: white;
}
#Day02_3{
}
a:hover{
background-color: aquamarine;
}
.gameBorder{
width:1000px;
height: 210px;
border: 1px solid #CCCCCC;
position: relative;
top: 250px;
left: -140px;
border-radius: 20px;
}
.gameTitle{
background: #F6F6F5;
width: 1000px;
height: 31px;
border: 0 hidden #CCCCCC;
border-radius: 20px;
position: absolute;
top: -40px;
left: -40px;
margin: 40px;
position: relative;
}
.gameTitle dl{
position: absolute;
top: -10px;
}
dl dt{
color: #7D0808;
font-weight: bold;
}
dl dd{
position: relative;
top: -20px;
left: 70px;
display: inline-block;
margin-left: 10px;
}
dl a{
color: #666666;
font-size: 15px;
text-decoration: none;
}
.clea{
width: 321px;
height: 154px;
border: 1px solid #CCCCCC;
border-radius: 10px;
position: absolute;
top: 20px;
left: 70px;
}
.i{
position: relative;
top: 20px;
left: -25px;
}
.i img{
width: 160px;
height: 120px;
}
li{
list-style: none;
}
.l{
position: relative;
top: -125px;
left: 150px;
font-size: 12px;
font-weight: bold;
}
.l span{
font-weight: bold;
color: #A70A0A;
}
.play{
background: #FFFFFF;
width: 50px;
height: 30px;
border: 1px solid #CCCCCC;
border-radius: 5px;
position: relative;
}
.play a{
position: absolute;
top: 5px;
left: 10px;
text-decoration: none;
font-size: 15px;
color: #333333;
}
.gameBorder{
position: relative;
top: -200px;
left: 300px;
}
.e{
width: 50px;
height: 25px;
border: 1px rosybrown solid;
position: relative;
top: -38px;
left: 60px;
background-color: #68B0C7;
color: white;
}
.e a{
color: white;
text-decoration: none;
text-align: center;
line-height: 20px;
}
.gameBorder02{
position: relative;
top: -111px;
left: 380px;
}
.a{
border: 1px red solid;
position: relative;
top: 120px;
}
.cl{
width: 330px;
height: 154px;
border: 1px solid #CCCCCC;
border-radius: 10px;
position: absolute;
top: 20px;
left: 400px;
}
.im{
position: relative;
top: 10px;
left: -25px;
}
.lm{
position: relative;
top: -130px;
left: 150px;
font-size: 12px;
font-weight: bold;
}
.im img{
width: 160px;
height: 120px;
}
.gameRight{
position: relative;
top: -185px;
left: 940px;
width: 264px;
height: 780px;
}
.gameLogin{
position: relative;
border: 1px solid #CCCCCC;
width: 251px;
height: 207px;
border-radius: 10px;
}
.gameLogin h1{
font-size: 16px;
color: #8A7373;
position: relative;
left: 10px;
top: 5px;
}
.gameLogin .login{
position: relative;
left: 40px;
top: 5px;
}
.gameLogin a{
text-decoration: none;
}
.rder{
position: relative;
top: 20px;
border: 1px solid #CCCCCC;
width: 280px;
height: 220px;
border-radius: 10px;
}
.itle{
width: 280px;
height: 30px;
border: 1px solid #CCCCCC;
border-radius: 8px;
background: #F1F2F1;
}
.itle dt{
font-size: 14px;
position: relative;
top: -10px;
left: 10px;
}
.news li{
width: 270px;
position: relative;
top: -15px;
left: -35px;
background: url(../images/rightTwo.png) no-repeat 0 8px;
border-top:1px dashed #CCCCCC;
}
.news a{
position: relative;
top: 0;
left: 40px;
font-size: 14px;
text-decoration: none;
line-height: 25px;
}
.ad{
position: relative;
top: 40px;
}
.ad img{
width: 280px;
height: 70px;
}
.der{
position: relative;
top: 40px;
border: 1px solid #CCCCCC;
width: 280px;
height: 280px;
border-radius: 10px;
}
.gameVideo dt a{
color: blue;
font-weight: lighter;
position: absolute;
top: 45px;
left: 140px;
}
.gameVideo dd img{
position: absolute;
top: 40px;
left: -80px;
}
.gameVideo dd a{
color: blue;
font-weight: lighter;
position: relative;
top: 45px;
left: 60px;
}
.adRight img{
width: 210px;
height: 200px;
position: relative;
top: -700px;
left: 1100px;
animation:spread 5s linear infinite;
}
@keyframes spread{
0%{
transform: rotate(0deg);
right:0;
}
25%{
position: relative;
transform: rotate(20deg);
right:0;
top: -1000px;
left: 700px;
}
50%{
transform: rotate(0deg);
left:600px;
position: relative;
top: -1000px;
left: 1000px;
}
55%{
transform: rotate(-360deg) ;
right:600px;
position: relative;
top: -1500px;
left: 500px;
}
70%{
transform: rotate(0deg);
transform: scale(2);
right:600px;
position: relative;
left: 900px;
top: -1000px;
}
80%{
transform: rotate(0deg);
right:0;
}
100%{
transform: rotate(0deg);
right:900px;
}
}
#footer{
width: 1140px;
margin: 0 auto;
}
#footer a{
text-decoration: none;
}
.role li{
width: 130px;
height: 165px;
display: inline-block;
position: relative;
top: -80px;
margin: 20px;
}
.role p{
font-size: 12px;
font-weight: bold;
}
.role span{
font-weight: bold;
color: #A70A0A;
}
.gameRight{
position: relative;
top: -800px;
left: 1100px;
}
#zjn{
width: 1400px;
position: relative;
top: -50px;
left: -280px;
}
#footer{
position: relative;
top: -350px;
}
</style>
</head>
<body>
<div>
<div id="Day01">
<nav id="Day01_1"><img src="../images/gameLogo.png"/></nav>
<nav id="Day01_2">首页</nav>
<nav id="Day01_3">注册 | 登录 | 帮助 | 更多</nav><p/>
</div>
<div id="Day02">
<a href="#"><img src="../images/sub-2.gif"/>征战四方<br/></a>
<a href="#"><img src="../images/sub-3.gif"/>龙将<br/></a>
<a href="#"><img src="../images/sub-4.gif"/>弹弹堂<br/></a>
<a href="#"><img src="../images/sub-5.gif"/>凡人修真2<br/></a>
<a href="#"><img src="../images/sub-6.gif"/>一骑当先<br/></a>
<a href="#"><img src="../images/sub-7.gif"/>宫廷计<br/></a>
<a href="#"><img src="../images/sub-8.gif"/>神仙道<br/></a>
</div>
<nav id="Day02_1">
<img src="../images/xdtgg_frxz2_44.jpg"/>
</nav>
<nav id="Day02_3">
<a id="e">1 </a>
<a id="b">2 </a>
<a id="c">3 </a>
<a id="d">4 </a>
</nav>
<div id="zjn">
<div class="gameBorder">
<div class="gameTitle">
<dl>
<dt>全部游戏</dt>
<dd><a href="#">战争策略</a></dd>
<dd>|</dd>
<dd><a href="#">体育经营</a></dd>
<dd>|</dd>
<dd><a href="#">社交游戏</a></dd>
</dl>
</div>
<ul class="clea">
<li>
<div class="i">
<img src="../images/img-4.jpg"/>
</div>
<div class="l">
<p>三国题材横版RPG网游，丰富的<br/>武将系统</p>
<p>类型：角色扮演</p>
<p>游戏人气：<span>470921</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</div>
</li>
</ul>
<div class="gameBorder02">
<ul class="clea">
<li>
<div class="i">
<img src="../images/img-5.jpg"/>
</div>
<div class="l">
<p>一款不建主城不等CD，不占资<br/>源，全程战斗</p>
<p>类型：战征策略</p>
<p>游戏人气：<span>8745221</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</div>
</li>
</ul>
</div>
<div class="a">
<div class="gameTitle03">
<dl>
<dt>角色扮演</dt>
</dl>
</div>
<div class="role">
<ul>
<li><a href="#"><img src="../images/img-6.jpg"/></a>
<p>游戏人气：1765314<br/>
游戏状态：<span>22区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-7.jpg"/></a>
<p>游戏人气：1245814<br/>
游戏状态：<span>23区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-8.jpg"/></a>
<p>游戏人气：1232158<br/>
游戏状态：<span>25区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-9.jpg"/></a>
<p>游戏人气：123745<br/>
游戏状态：<span>18区开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-10.jpg"/></a>
<p>游戏人气：178501<br/>
游戏状态：<span>火爆开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-11.jpg"/></a>
<p>游戏人气：983014<br/>
游戏状态：<span>2服开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-12.jpg"/></a>
<p>游戏人气：745214<br/>
游戏状态：<span>4服开启</span></p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
<li><a href="#"><img src="../images/img-13.jpg"/></a>
<p>游戏人气：654814<br/>
游戏状态：<span>火爆开启</span>
</p>
<p class="play">
<a href="#">选服</a>
</p>
<p class="e">
<a href="#">进入游戏</a>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<aside class="gameRight">
<div class="gameLogin">
<h1>开心网用户登录</h1>
<form action="#">
<ul>
<li>
账号：<input name="username" type="text" placeholder="字母、数字的六位字符" required/>
</li>
<li>密码：
<input name="pwd" type="password" placeholder="四位数字" required/>
</li>
<li>
<input class="login" name="login" type="image" src="../images/btnLogin.jpg"/>
</li>
<li>
<a href="#">立即注册</a>
<a href="#">忘记密码</a>
</li>
</ul>
</form>
</div>
<div class="rder">
<div class="itle">
<dl>
<dt>新闻公告</dt>
</dl>
</div>
<ul class="news">
<li><a href="#" class="u">[征战四方] 开心首服·黄巾之乱</a></li>
<li><a href="#">[龙将] 火爆8服·八门金</a></li>
<li><a href="#">[弹弹堂] 41服开启·万人竞技</a></li>
<li><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
<li><a href="#">[一骑当先] 开心2服上线送黄金</a></li>
<li><a href="#">[宫廷计] 03月06日·西施秘史</a></li>
<li class="noBorder"><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
</ul>
</div>
<div class="ad">
<a href="#"><img src="../images/ad1.jpg" alt=""/></a>
<a href="#"><img src="../images/ad2.jpg" alt=""/></a>
</div>
<div class="der">
<div class="itle">
<dl>
<dt>游戏视频</dt>
</dl>
</div>
<div class="clear"></div>
<dl class="gameVideo">
<dt><img src="../images/img-1.jpg"/><a href="#">《航海之王》麻辣<br/>炫酷反穿越，英雄<br/>时尚大变身！</a></dt>
<dd><img src="../images/img-2.jpg"/><a href="#">《弹弹堂》吴克群<br/>同名激情主题MV<br/>体验修真乐趣</a></dd>
</dl>
<div class="clear"></div>
</div>
</aside>
</article>
<footer id="footer">
<a href="#">关于我们</a>
<a href="#">手机版</a>
<a href="#">开放平台</a>
<a href="#"> 自助广告</a>
<a href="#"> 招聘</a>
<a href="#">客服</a>
<a href="#">帮助</a>
@2017开心网
文网文[2009]157号
京ICP证080482号 京公网安备110000000003号 未成年人家长监护
</footer>
<div class="adRight">
<a class="icon" href="#">X</a>
<a href="#"><img src="../images/ad3.jpg" alt=""/></a>
</div>
</div>
</body>
</html>