<!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">
.tou {
height:50px;
background-image: url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/menuBg.jpg);
}
.g {
float:left;
padding-top:2px;
}
.bei {
width:100px;
height:40px;
padding-top:15px;
text-align:center;
float:left;
position:relative;
top:15px;
background: url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/btn-01.gif) 0px 0px no-repeat;
}
.a {
text-decoration:none;
color:#F00;
}
.gameleft .bor .al dl dt .ti {
}
.cai {
float:right;
color:#dbb9b9;
padding:15px 30px 10px 10px;
}
.cai a, cai a:hover {
color:#ffffff;
position:relative;
}
a:hover {
text-decoration:underline;
}
.zong {float:left;
width:1000px;
margin:0px;
}
.gamenav li {
float:left padding:0px 10px 0px 8px;
background: url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/gameBg1.jpg) 0px 0px no-repeat;
width:200px;
height:29px;
line-height:30px;
}
.gamenav li a {
color: #000000;
display:block;
}
.gamenav li a:hover {
color:#fff;
text-decoration:none;
padding:0px 10px 0px 8px;
background:url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/gameBg2.jpg)no-repeat;
}
.gameleft {
float:left;
width:724px;
}
.ad {
float:left;
border:1px #cccccc solid;
height:230px;
width:800px;
position:relative;
left:250px;
top:-250px;
}
.clear {
height:10px;
clear:both;
overflow:hidden;
}
.bor {
border:1px #cccccc solid;
}
.t {
background:url(03%20%E6%8F%90%E4%BE%9B%E7%BB%99%E5%AD%A6%E5%91%98%E7%9A%84%E4%B8%8A%E6%9C%BA%E7%BB%83%E4%B9%A0%E7%B4%A0%E6%9D%90/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/titleBg.jpg) 0px 0px repeat-x;
height:28px;
clear:both;
position:relative;
top:-250px;
}
.t dt {
font-size:14px;
font-weight:bold;
color:#7d0808;
padding-left:10px;
padding-right:30px;
line-height:28px;
float:left;
}
.t dd {
float:left;
color:#cccccc;
padding:0px 5px;
line-height:28px;
}
.t dd a {
text-decoration:underline;
color:#666666;
font-size:14px;
}
.al {
padding:30px;
border-bottom:1px #cccccc solid;
clear:both;
width:680px;
position:relative;
top:-290px;
}al img{float:left;
}
.al dt {
float:left;
}
.al dd {
float:right;
}
.al h1 a {
font-size:14px;
color:#a70a0a;
line-height:30px;
}
.al .ti {
float:left;
padding:5px;
}
.al span {
color:#a70a0a;
}
.jue {float:left;
width:900px;
clear:both;
margin:15px;
position:relative;
top:-300px;
}
.jue li {
float:left;
width:185px;
text-align:center;
height:200px;
}
.jue h1 {
font-size:14px;
line-height:30px;
text-align:center;
}
.jue h1 a, .jue h1 a:hover {
color:#a70a0a;
}
.jue p span {
color:#a70a0a;
}
</style>
</head>
<body>
<div class="tou">
<div class="g"><img src="03 提供给学员的上机练习素材/图片素材/gameLogo.jpg"/></div>
<div class="bei"><a href="#">首页</a></div>
<div class="cai"><a href="#">注册</a> | <a href="#">登录</a> | <a href="#">帮助</a> | <a href="#">更多</a></div>
</div>
<div class="zong">
<div class="gameleft">
<div class="gamenav">
<ul>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-1.gif"/>侠客世界</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-2.gif" />征战四方</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-3.gif" />龙将</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-4.gif" />弹弹堂</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-5.gif" />凡人修真2</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-6.gif" />一骑当先</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-7.gif" />宫廷计</a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/sub-8.gif" />神仙道</a></li>
</ul>
</div>
<div class="ad"><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-3.jpg" /></a></div>
<div class="bor">
<div class="t">
<dl>
<dt>全部游戏</dt>
<dd><a href="#">战争策略</a></dd>
<dd>|</dd>
<dd><a href="#">体育经营</a></dd>
<dd>|</dd>
<dd><a href="#">社交游戏</a></dd>
</dl>
</div>
<div class="al">
<dl>
<dt><a href="#" class="ti"><img src="03 提供给学员的上机练习素材/图片素材/img-4.jpg"/></a>
<h1><a href="#">龙将</a></h1>
三国题材横版RPG网游,丰富的武将系统<br/>
类型:角色扮演<br/>
游戏人气:<span>470921</span><br/>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a> </dt>
<dd><a href="#" class="ti"><img src="03 提供给学员的上机练习素材/图片素材/img-5.jpg"/></a>
<h1><a href="#">征战四方</a></h1>
一款不建主城不等CD,不占资源,全程战斗<br/>
类型:战征策略<br/>
游戏人气:8745221<br/>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a> </dd>
</dl>
</div>
<div class="t">
<dl>
<dt>角色扮演</dt>
</dl>
</div>
<div class="jue">
<ul>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-6.jpg" /></a>
<h1><a href="#">神仙道</a></h1>
<p>游戏人气:1765314<br/>
游戏状态:<span>22区开启</span></p><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-7.jpg" /></a>
<h1><a href="#">征战四方</a></h1>
<p>游戏人气:1245814<br/>
游戏状态:<span>23区开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-8.jpg" /></a>
<h1><a href="#">一骑当先</a></h1>
<p>游戏人气:1232158<br/>
游戏状态:<span>25区开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-9.jpg" /></a>
<h1><a href="#">洪荒神话</a></h1>
<p>游戏人气:123745<br/>
游戏状态:<span>18区开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-10.jpg" /></a>
<h1><a href="#">龙将</a></h1>
<p>游戏人气:178501<br/>
游戏状态:<span>火爆开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-11.jpg" /></a>
<h1><a href="#">一球成名</a></h1>
<p>游戏人气:983014<br/>
游戏状态:<span>2服开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-12.jpg" /></a>
<h1><a href="#">凡人修真2</a></h1>
<p>游戏人气:745214<br/>
游戏状态:<span>4服开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
<li><a href="#"><img src="03 提供给学员的上机练习素材/图片素材/img-13.jpg" /></a>
<h1><a href="#">傲视开地</a></h1>
<p>游戏人气:654814<br/>
游戏状态:<span>火爆开启</span></p>
<a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-02.jpg"/></a> <a href="#"><img src="03 提供给学员的上机练习素材/图片素材/btn-03.jpg"/></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
HTML -----------------制作开心网游戏页面!!!!
最新推荐文章于 2024-06-02 20:58:14 发布