HTML 第九章部分代码

最新推荐文章于 2022-07-11 18:33:48 发布

_苏小白

最新推荐文章于 2022-07-11 18:33:48 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/qq_36074043/article/details/52903079

版权

<!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">
.a {
	width:800px;
	height:45px;
	background:url(menuBg.jpg) repeat-x;
}


.ulli li {
	background:url(gameBg1.jpg);
	list-style-type:none;
	position:relative;
	height:28px;
}
.w{float:left;}
.b {padding:2px;
	float:left;
	width:140px;
	height:200px;
}
.c {
	width:100px;
	height:30px;
	float:left;
	background:url(btn-01.gif) no-repeat;
	position:relative;
	top:14px;
	text-align:center;
}
a {
	color:#FFF;
	text-decoration:none;
}
a:hover {
	color:#F93;
	text-decoration:underline;
}
.pp {
	color:#000;
	text-decoration:none;
}
.pp:hover {
	color:#FFF;
}
.ee:hover {
	background:url(gameBg2.jpg) no-repeat;
}
.leftd {
	width:200px;
	float:left;
	height:224px;
	border:#000 solid thin;
	margin-right:10px;
}
.d {
	margin-top:10px;
}
.rightd {
	float:left;
	width:px;
	border:#000 solid thin;
	height:100px;
}
ul {
	list-style:none;
	margin:0px;
	padding:0px;
}
.sll,.zzz,.susu,.ppp{	clear:both;
	}
.sll {

	border:#999 thin dashed;
	color: #000;
	text-decoration: underline;
	background-color:#CCC;
	width:600px;
	height:24px;
	float:left;
	text-decoration:none;
	margin-top:6px;
	margin-bottom:8px;
}

.woaini {
	margin-top:6px;
	border:#000 solid thin;
	margin-left:2px;
	float:left;
	width:300px;
	margin-right:2px;
	padding:2px;
}
.eee {
	margin-top:6px;
	border:#000 solid thin;
	margin-left:2px;
	float:left;
	width:300px;
}

.aa {
	border:#999 thin dashed;
	color: #000;
	text-decoration: underline;
	background-color:#CCC;
	width:600px;
	height:24px;
	text-decoration:none;
	margin-top:6px;
	margin-bottom:6px;
	margin-right:6px;
}
.ppp {
	width:600px;
	height:400px;
	border:#999 thin dashed;
	padding:2px;
}

</style>
</head>

<body>
<div class="zong">
  <div class="a"> <img class="w" src="gameLogo.jpg"/>
    <div class="c"> 首页</div  >
    <div  style="float:right;"><a href="#">注册|</a> <a href="#">登录|</a> <a href="#">帮助|</a> <a href="#">更多</a> </div>
  </div>
  <div class="d">
    <div class="leftd">
      <ul class="ulli">
        <a class="pp" href="#">
        <li class="ee"><img src="sub-1.gif"/>侠客世界</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-2.gif"/>征战四方</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-3.gif"/>龙将</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-4.gif"/>弹弹堂</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-5.gif"/>凡人修真2</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-6.gif"/>一骑当先</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-7.gif"/>宫廷计</li>
        </a> <a class="pp" href="#">
        <li class="ee"><img src="sub-8.gif"/>神仙道</li>
        </a>
      </ul>
    </div>
    <div class="rightd"> <img src="img-3.jpg" width="400px" height="226"/> </div>
  </div>
  <div class="sll"> <span>全部游戏</span> <a href="#">战争策略|</a> <a href="#">体育经营|</a> <a href="#">社会游戏</a> </div>
  <div class="zzz">
    <div class="woaini">
      <ul>
        <li class="b"><img src="img-4.jpg"/></li>
        <li>龙将</li>
        <li>三国题材横版RPG网游,丰富的武将系统</li>
        <li>类型:角色扮演</li>
        <li>游戏人气:470921</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="eee">
      <ul>
        <li class="b"><img src="img-5.jpg"/></li>
        <li>征战四方</li>
        <li>一款不建主城不等CD，不占资源，全程战斗</li>
        <li>类型:战征策略</li>
        <li>游戏人气:845221</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
  </div>
  <div class="sll"> 角色扮演</div>
  <div class="ppp">
    <div class="b">
      <ul>
        <li><img src="img-6.jpg"/></li>
        <li>神仙道</li>
        <li>游戏人气:1765314</li>
        <li>游戏状态：22区开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-7.jpg"/></li>
        <li>征战四方</li>
        <li>游戏人气：1245814</li>
        <li>游戏状态：23区开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-8.jpg"/></li>
        <li>一骑当先</li>
        <li>游戏人气：1232158</li>
        <li> 游戏状态：25区开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-9.jpg"/></li>
        <li>洪荒神话</li>
        <li> 游戏人气：123745</li>
        <li>游戏状态：18区开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-10.jpg"/></li>
        <li>龙将</li>
        <li>游戏人气：178501</li>
        <li>游戏状态：火爆开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-11.jpg"/></li>
        <li>一球成名</li>
        <li>游戏人气：983014</li>
        <li>游戏状态：2服开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-12.jpg"/></li>
        <li>凡人修真2</li>
        <li>游戏人气：745214</li>
        <li>游戏状态：4服开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
    <div class="b">
      <ul>
        <li><img src="img-13.jpg"/></li>
        <li>傲视开地</li>
        <li>游戏人气：654814</li>
        <li> 游戏状态：火爆开启</li>
        <li><img src="btn-02.jpg"/><img src="btn-03.jpg"/></li>
      </ul>
    </div>
  </div>
  
  
</div>
<div class="you">
<div  class="deng">
开心用户登录

</div>





</div>

</body>
</html>

_苏小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 第九章部分代码

开心网游戏页面.a { width:800px; height:45px; background:url(menuBg.jpg) repeat-x;}.ulli li { background:url(gameBg1.jpg); list-style-type:none; position:relative; height:28px;}.w{float:left;}
复制链接

扫一扫