2.第九章

<!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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
  <div id="gameLogo"><img src="images/gameLogo.jpg"/></div>
  <div class="gameIndex"><a href="#">首页</a></div>
  <div id="menu"><a href="#">注册</a> | <a href="#">登录</a> | <a href="#">帮助</a> | <a href="#">更多</a></div>
</div>
<div class="clear"></div>
<!--主体内容开始-->
<div id="container">
  <!--左侧内容开始-->
  <div class="gameLeft">
    <div class="gameNav">
      <ul>
        <li><a href="#"><img src="images/sub-1.gif" />侠客世界</a></li>
        <li><a href="#"><img src="images/sub-2.gif" />征战四方</a></li>
        <li><a href="#"><img src="images/sub-3.gif" />龙将</a></li>
        <li><a href="#"><img src="images/sub-4.gif" />弹弹堂</a></li>
        <li><a href="#"><img src="images/sub-5.gif" />凡人修真2</a></li>
        <li><a href="#"><img src="images/sub-6.gif" />一骑当先</a></li>
        <li><a href="#"><img src="images/sub-7.gif" />宫廷计</a></li>
        <li><a href="#"><img src="images/sub-8.gif" />神仙道</a></li>
      </ul>
    </div>
    <div class="gameAdver"><a href="#"><img src="images/img-3.jpg" /></a></div>
    <div class="clear"></div>
    <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>
      <div class="allGame">
        <dl>
          <dt><a href="#" class="titleImg"><img src="images/img-4.jpg"/></a>
            <h1><a href="#">龙将</a></h1>
            三国题材横版RPG网游,丰富的武将系统<br/>
            类型:角色扮演<br/>
            游戏人气:<span>470921</span><br/>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a> </dt>
          <dd><a href="#" class="titleImg"><img src="images/img-5.jpg"/></a>
            <h1><a href="#">征战四方</a></h1>
            一款不建主城不等CD,不占资源,全程战斗<br/>
            类型:战征策略<br/>
            游戏人气:8745221<br/>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a> </dd>
        </dl>
      </div>
      <div class="gameTitle">
        <dl>
          <dt>角色扮演</dt>
        </dl>
      </div>
      <div class="role">
        <ul>
          <li><a href="#"><img src="images/img-6.jpg" /></a>
            <h1><a href="#">神仙道</a></h1>
            <p>游戏人气:1765314<br/>
              游戏状态:<span>22区开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-7.jpg" /></a>
            <h1><a href="#">征战四方</a></h1>
            <p>游戏人气:1245814<br/>
              游戏状态:<span>23区开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-8.jpg" /></a>
            <h1><a href="#">一骑当先</a></h1>
            <p>游戏人气:1232158<br/>
              游戏状态:<span>25区开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-9.jpg" /></a>
            <h1><a href="#">洪荒神话</a></h1>
            <p>游戏人气:123745<br/>
              游戏状态:<span>18区开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-10.jpg" /></a>
            <h1><a href="#">龙将</a></h1>
            <p>游戏人气:178501<br/>
              游戏状态:<span>火爆开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-11.jpg" /></a>
            <h1><a href="#">一球成名</a></h1>
            <p>游戏人气:983014<br/>
              游戏状态:<span>2服开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-12.jpg" /></a>
            <h1><a href="#">凡人修真2</a></h1>
            <p>游戏人气:745214<br/>
              游戏状态:<span>4服开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-13.jpg" /></a>
            <h1><a href="#">傲视开地</a></h1>
            <p>游戏人气:654814<br/>
              游戏状态:<span>火爆开启</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <!--右侧内容开始-->
  <div class="gameRight">
    <div class="gameLogin">
      <h1>开心网用户登录</h1>
      <ul>
        <li>账号:
          <input name="username" type="text"/>
        </li>
        <li>密码:
          <input name="pwd" type="password"/>
        </li>
      </ul>
      <dl>
        <dt>
          <input name="login" type="submit" value=" "  class="login"/>
        </dt>
        <dd><a href="#">立即注册</a><br/>
          <a href="#">忘记密码</a></dd>
      </dl>
    </div>
    <div class="clear"></div>
    <div class="gameBorder">
      <div class="gameTitle">
        <dl>
          <dt>新闻公告</dt>
        </dl>
      </div>
      <div class="clear"></div>
      <ul class="news">
        <li><a href="#">[征战四方] 开心首服·黄巾之乱</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><a href="#">[神仙道] 03月05日·玄净魔影</a></li>
        <li><a href="#">[千军破] 48服·登录送史实名将</a></li>
        <li><a href="#">[大唐行镖] 全球唯一走镖页游</a></li>
        <li><a href="#">[范特西篮球] 疯狂纽约来啦!</a></li>
        <li><a href="#">[一球成名] 27服开服·王者之战</a></li>
        <li class="noBorder"><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
      </ul>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="gameBorder">
      <div class="gameTitle">
        <dl>
          <dt>游戏视频</dt>
        </dl>
      </div>
      <div class="clear"></div>
      <dl class="gameVideo">
        <dt><a href="#"><img src="images/img-1.jpg" /></a><a href="#">《航海之王》麻辣炫酷反穿越,英雄时尚大变身!</a></dt>
        <dd><a href="#"><img src="images/img-2.jpg" /></a><a href="#">《弹弹堂》吴克群同名激情主题MV,体验修真乐趣</a></dd>
      </dl>
      <div class="clear"></div>
    </div>
  </div>
  <!--右侧内容结束-->
</div>
<!--主体内容结束-->
<div id="footer"><a href="#">关于我们</a> <a href="#">手机版</a> <a href="#"> <a href="#">开放平台</a> <a href="#"> 自助广告</a> <a href="#"> 招聘</a> <a href="#">客服</a> <a href="#">帮助</a> @2013开心网   文网文[2009]157号   京ICP证080482号    京公网安备110000000003号 未成年人家长监护</div>
</body>
</html>




@charset "utf-8";
/* CSS Document */
* {
<span style="white-space:pre">	</span>margin:0px;
<span style="white-space:pre">	</span>padding:0px;
}
body {
<span style="white-space:pre">	</span>font-family:Verdana, Arial, Helvetica, sans-serif, "宋体";
<span style="white-space:pre">	</span>line-height:20px;
<span style="white-space:pre">	</span>font-size:12px;
}
li {
<span style="white-space:pre">	</span>list-style:none;
}
a img {
<span style="white-space:pre">	</span>border:0px;
}
a {
<span style="white-space:pre">	</span>text-decoration:none;
<span style="white-space:pre">	</span>color:#2b62a5;
}
a:hover {
<span style="white-space:pre">	</span>text-decoration:underline;
}
#container, #footer, #header {
<span style="white-space:pre">	</span>width:1000px;
<span style="white-space:pre">	</span>margin:0px auto;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>clear:both;
}
/*页面顶部样式*/
#header {
<span style="white-space:pre">	</span>height:50px;
<span style="white-space:pre">	</span>background:url(../images/menuBg.jpg) repeat-x;
}
#menu {
<span style="white-space:pre">	</span>float:right;
<span style="white-space:pre">	</span>color:#dbb9b9;
<span style="white-space:pre">	</span>padding:15px 30px 0px 0px;
}
#menu a, #menu a:hover {
<span style="white-space:pre">	</span>color:#ffffff;
<span style="white-space:pre">	</span>padding:0px 5px;
}
/*网页游戏页面样式*/<span style="white-space:pre">	</span>
#gameLogo {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>padding-top:5px;
}
.gameIndex {
<span style="white-space:pre">	</span>background:url(../images/btn-01.gif) 0px 0px no-repeat;
<span style="white-space:pre">	</span>width:100px;
<span style="white-space:pre">	</span>height:40px;
<span style="white-space:pre">	</span>text-align:center;
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>position:relative;
<span style="white-space:pre">	</span>left:20px;
<span style="white-space:pre">	</span>top:10px;
}
.gameIndex a, .gameIndex a:hover {
<span style="white-space:pre">	</span>font-size:14px;
<span style="white-space:pre">	</span>color:#cb3333;
<span style="white-space:pre">	</span>text-decoration:none;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>line-height:40px;
}
.gameLeft {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>width:724px;
<span style="white-space:pre">	</span>overflow:hidden;
}
.gameNav {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>border:1px #cccccc solid;
<span style="white-space:pre">	</span>height:230px;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>width:190px;
}
.gameNav li {
<span style="white-space:pre">	</span>background:url(../images/gameBg1.jpg) 0px 0px no-repeat;
<span style="white-space:pre">	</span>height:29px;
<span style="white-space:pre">	</span>line-height:30px;
}
.gameNav li img {
<span style="white-space:pre">	</span>padding:0px 10px 0px 8px;
<span style="white-space:pre">	</span>vertical-align:middle;
}
.gameNav li a {
<span style="white-space:pre">	</span>color:#000000;
<span style="white-space:pre">	</span>display:block;
<span style="white-space:pre">	</span>width:190px;
<span style="white-space:pre">	</span>height:27px;
<span style="white-space:pre">	</span>padding-top:2px;
}
.gameNav li a:hover {
<span style="white-space:pre">	</span>color:#fff;
<span style="white-space:pre">	</span>text-decoration:none;
<span style="white-space:pre">	</span>background:url(../images/gameBg2.jpg);
}
.gameAdver {
<span style="white-space:pre">	</span>float:right;
<span style="white-space:pre">	</span>border:1px #cccccc solid;
<span style="white-space:pre">	</span>height:230px;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>width:520px;
<span style="white-space:pre">	</span>text-align:center;
<span style="white-space:pre">	</span>vertical-align:middle;
}
.allGame {
<span style="white-space:pre">	</span>padding:25px;
<span style="white-space:pre">	</span>border-bottom:1px #cccccc solid;
<span style="white-space:pre">	</span>clear:both;
<span style="white-space:pre">	</span>width:672px;
<span style="white-space:pre">	</span>overflow:hidden;
}
.allGame dt, .allGame dd {
<span style="white-space:pre">	</span>width:320px;
<span style="white-space:pre">	</span>height:155px;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>border:1px #cccccc solid;
}
.allGame dt {
<span style="white-space:pre">	</span>float:left;
}
.allGame dd {
<span style="white-space:pre">	</span>float:right;
}
.allGame h1 a {
<span style="white-space:pre">	</span>font-size:14px;
<span style="white-space:pre">	</span>color:#a70a0a;
<span style="white-space:pre">	</span>line-height:30px;
}
.allGame .titleImg {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>padding:5px;
}
.allGame span {
<span style="white-space:pre">	</span>color:#a70a0a;
}
.role {
<span style="white-space:pre">	</span>width:680px;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>clear:both;
<span style="white-space:pre">	</span>margin:15px auto 0px auto;
}
.role li {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>width:170px;
<span style="white-space:pre">	</span>text-align:center;
<span style="white-space:pre">	</span>height:190px;
<span style="white-space:pre">	</span>overflow:hidden;
}
.role h1 {
<span style="white-space:pre">	</span>font-size:14px;
<span style="white-space:pre">	</span>line-height:30px;
<span style="white-space:pre">	</span>text-align:center;
}
.role h1 a, .role h1 a:hover {
<span style="white-space:pre">	</span>color:#a70a0a;
}
.role p span {
<span style="white-space:pre">	</span>color:#a70a0a;
}
.gameRight {
<span style="white-space:pre">	</span>float:right;
<span style="white-space:pre">	</span>width:262px;
<span style="white-space:pre">	</span>overflow:hidden;
}
.gameLogin {
<span style="white-space:pre">	</span>border:1px #cccccc solid;
<span style="white-space:pre">	</span>height:230px;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>background-color:#f3f3f3;
}
.gameLogin h1 {
<span style="white-space:pre">	</span>color:#767373;
<span style="white-space:pre">	</span>font-size:14px;
<span style="white-space:pre">	</span>padding:20px 0px 25px 20px;
}
.gameLogin li {
<span style="white-space:pre">	</span>padding-left:20px;
<span style="white-space:pre">	</span>height:35px;
<span style="white-space:pre">	</span>font-size:14px;
}
.gameLogin li input {
<span style="white-space:pre">	</span>border:1px #cccccc solid;
<span style="white-space:pre">	</span>width:150px;
<span style="white-space:pre">	</span>height:20px;
}
.gameLogin dt {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>padding-left:65px;
<span style="white-space:pre">	</span>padding-top:10px;
}
.gameLogin dd {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>padding-left:30px;
}
.gameLogin .login {
<span style="white-space:pre">	</span>background:url(../images/btnLogin.jpg) 0px 0px no-repeat;
<span style="white-space:pre">	</span>width:63px;
<span style="white-space:pre">	</span>height:24px;
<span style="white-space:pre">	</span>cursor:pointer;
<span style="white-space:pre">	</span>border:0px;
}
.gameBorder {
<span style="white-space:pre">	</span>border:1px #cccccc solid;
}
.gameTitle {
<span style="white-space:pre">	</span>background:url(../images/titleBg.jpg) 0px 0px repeat-x;
<span style="white-space:pre">	</span>height:28px;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>clear:both;
}
.gameTitle dt {
<span style="white-space:pre">	</span>font-size:14px;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>color:#7d0808;
<span style="white-space:pre">	</span>padding-left:10px;
<span style="white-space:pre">	</span>padding-right:30px;
<span style="white-space:pre">	</span>line-height:28px;
<span style="white-space:pre">	</span>float:left;
}
.gameTitle dd {
<span style="white-space:pre">	</span>float:left;
<span style="white-space:pre">	</span>color:#cccccc;
<span style="white-space:pre">	</span>padding:0px 5px;
<span style="white-space:pre">	</span>line-height:28px;
}
.gameTitle dd a {
<span style="white-space:pre">	</span>text-decoration:underline;
<span style="white-space:pre">	</span>color:#666666;
<span style="white-space:pre">	</span>font-size:14px;
}
.news {
<span style="white-space:pre">	</span>width:95%;
<span style="white-space:pre">	</span>margin:0px auto;
}
.news li {
<span style="white-space:pre">	</span>border-bottom:1px #cccccc dashed;
<span style="white-space:pre">	</span>height:27px;
<span style="white-space:pre">	</span>background:url(../images/btn-04.gif) 2px 5px no-repeat;
<span style="white-space:pre">	</span>padding-left:45px;
<span style="white-space:pre">	</span>line-height:27px;
}
.news .noBorder {
<span style="white-space:pre">	</span>border-bottom:0px;
}
.news li a {
<span style="white-space:pre">	</span>color:#4d4646;
}
.gameVideo {
<span style="white-space:pre">	</span>width:95%;
<span style="white-space:pre">	</span>margin:0px auto;
<span style="white-space:pre">	</span>line-height:26px;
}
.gameVideo dt {
<span style="white-space:pre">	</span>border-bottom:1px #cccccc dashed;
<span style="white-space:pre">	</span>clear:both;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>padding:10px 0px;
}
.gameVideo dd {
<span style="white-space:pre">	</span>clear:both;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>overflow:hidden;
<span style="white-space:pre">	</span>padding:10px 0px;
}
.gameVideo img {
<span style="white-space:pre">	</span>padding:0px 10px 0px 0px;
<span style="white-space:pre">	</span>float:left;
}
.clear {
<span style="white-space:pre">	</span>height:10px;
<span style="white-space:pre">	</span>clear:both;
<span style="white-space:pre">	</span>overflow:hidden;
}
/*页面底部样式*/
#footer {
<span style="white-space:pre">	</span>padding:15px 0px;
<span style="white-space:pre">	</span>clear:both;
<span style="white-space:pre">	</span>text-align:right;
<span style="white-space:pre">	</span>color:#666666;
}
#footer a {
<span style="white-space:pre">	</span>padding-right:15px;
<span style="white-space:pre">	</span>float:left;
}
.footerBorder-top {
<span style="white-space:pre">	</span>border-top:1px #cccccc solid;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值