开心网-网页游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开心网-网页游戏</title>
<link rel="stylesheet" type="text/css" href="DJ10.css">
</head>
<body>
<div class="whole">
<div class="onewhole">
<div>
<h3><a href="#">首页</a></h3>
</div>
<ul>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
<div class="twowhole">
<div class="two">
<ul>
<li>
<a href="#"> <img src="sub-2.gif"> 征战四方</a>
</li>
<li>
<a href="#"> <img src="sub-3.gif"> 龙将</a>
</li>
<li>
<a href="#"> <img src="sub-4.gif"> 弹弹堂</a>
</li>
<li>
<a href="#"> <img src="sub-5.gif"> 凡人修仙2</a>
</li>
<li>
<a href="#"> <img src="sub-6.gif"> 一骑当千</a>
</li>
<li>
<a href="#"> <img src="sub-7.gif"> 宫廷计</a>
</li>
<li>
<a href="#"> <img src="sub-8.gif"> 神仙道</a>
</li>
</ul>
</div>
<div class="three">
<img src="xdtgg_frxz2_44.jpg">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
<div class="threewhole">
<div class="four">
<h3>全部游戏</h3>
<ul>
<li><a href="#">战争策略</a></li>
<li><a href="#">体育经营</a></li>
<li><a href="#">社交游戏</a></li>
</ul>
</div>
<div class="five">
<img src="img-4.jpg">
<ul>
<li>三国题材横版RPG网游,丰富的</li>
<li>武将系统</li>
<li>类型:角色扮演</li>
<li>游戏人气:<span>470921</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div class="six">
<img src="img-5.jpg">
<ul>
<li>一款不建主城不等CD,不占资</li>
<li>源,全程战斗</li>
<li>类型:战征策略</li>
<li>游戏人气:<span>8745221</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
</div>
<div class="fourwhole">
<div class="four">
<h3>角色扮演</h3>
</div>
<div class="eight">
<div>
<img src="img-6.jpg">
<ul>
<li>游戏人气:1765314</li>
<li>游戏状态:<span>22区开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-7.jpg">
<ul>
<li>游戏人气:1245814</li>
<li>游戏状态:<span>23区开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-8.jpg">
<ul>
<li>游戏人气:1232158</li>
<li>游戏状态:<span>25区开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-9.jpg">
<ul>
<li>游戏人气:123745</li>
<li>游戏状态:<span>18区开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-10.jpg">
<ul>
<li>游戏人气:178501</li>
<li>游戏状态:<span>火爆开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-11.jpg">
<ul>
<li>游戏人气:983014</li>
<li>游戏状态:<span>2区开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-12.jpg">
<ul>
<li>游戏人气:745214</li>
<li>游戏状态:<span>4区开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
<div>
<img src="img-13.jpg">
<ul>
<li>游戏人气:745214</li>
<li>游戏状态:<span>火爆开启</span></li>
<li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</li>
</ul>
</div>
</div>
</div>
<div class="fivewhole">
<h3>开心网用户登录</h3>
<form>
<ul>
<li>账号:<input type="text" placeholder=" 字母、数字的六位字符" required/></li>
<li>密码:<input type="password" placeholder=" 四位数字" required/></li>
<li><input type="submit" value=""/></li>
<li>
<a href="#">立即注册</a>
<a href="#">忘记密码</a>
</li>
</ul>
</form>
</div>
<div class="sixwhole">
<div class="seven">
<h3>新闻广告</h3>
</div>
<div class="nine">
<ul>
<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="#">[凡人修真2] 03月08日·四海帝王</a></li>
</ul>
</div>
</div>
<div class="sevenwhole">
<img src="ad1.jpg">
<img src="ad2.jpg">
</div>
<div class="eightwhole">
<div class="seven">
<h3>游戏视频</h3>
</div>
<div class="ten">
<ul>
<li>
<div><img src="img-1.jpg"></div>
<div><a href="#">《航海之王》麻辣<br/>炫酷反穿越,英雄<br/>时尚大变身!</a></div>
</li>
<li>
<div><img src="img-2.jpg"></div>
<div><a href="#">《弹弹堂》吴克群<br/>同名激情主题MV,<br/>体验修真乐趣</a></div>
</li>
</ul>
</div>
</div>
<div class="ninewhoie">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">手机版</a></li>
<li><a href="#">开放平台</a></li>
<li><a href="#">自助广告</a></li>
<li><a href="#">招聘</a></li>
<li><a href="#">客服</a></li>
<li><a href="#">帮助</a></li>
</ul>
<ul>
<li>@2017开心网</li>
<li>文网文[2009]157号</li>
<li>京ICP证080482号</li>
<li>京公网安备110000000003号 未成年人家长监护</li>
</ul>
</div>
</div>
<div class="tenwhole">
<img src="ad3.jpg">
</div>
</body>
</html>
body,div,ul,li,h3锛宖rom{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
.whole{
width: 1000px;
margin: 0 auto;
height: 1000px;
position: relative;
}
.onewhole{
background: linear-gradient(to bottom,#a70532,#bb131a);
height: 50px;
width: 100%;
position: relative;
border: 1px #bb131a solid;
border-radius: 10px;
margin-bottom: 20px;
}
.onewhole div{
background: url("../Semester1book3DJ10/gameLogo.png") no-repeat;
height: 100%;
width: 100%;
position: absolute;
bottom: -5px;
}
.onewhole div h3{
position: absolute;
left: 27%;
top: -13px;
background: url("../Semester1book3DJ10/btn-01.gif") no-repeat;
width: 100%;
height: 100%;
}
.onewhole div h3 a{
text-decoration: none;
color: red;
font-size: 14px;
position: absolute;
bottom: 20px;
left: 35px;
}
.onewhole ul{
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
padding-left: 10px;
left: 800px;
top: 10px;
}
.onewhole ul li{
float: left;
border-right: 1px #fff solid;
}
.onewhole ul li a{
color: #fff;
font-size: 12px;
padding-left: 10px;
margin-right: 10px;
}
.onewhole ul li:last-of-type{
border-right: 0 #fff solid;
}
.twowhole{
width: 750px;
height: 220px;
position: relative;
margin-bottom: 20px;
}
.two{
width: 192px;
border: 1px #999 solid;
border-radius: 10px;
height: 210px;
line-height: 30px;
position: relative;
}
.two li{
background: url("../Semester1book3DJ10/娓告垙鍒楄〃鐏拌壊娓愬彉.jpg");
}
.two li a{
color: black;
font-size: 14px;
}
.two li:hover{
background: url("../Semester1book3DJ10/娓告垙鍒楄〃榧犳爣绉诲叆鐨勬笎鍙?jpg");
}
.three{
width: 650px;
height: 210px;
}
.three img{
position: absolute;
right: -90px;
top: -30px;
border: 1px orange solid;
border-radius: 10px;
transform: scale(0.75);
}
.three ul{
position: absolute;
left: 600px;
bottom: 20px;
}
.three ul li{
float: left;
border-radius: 50%;
border: 3px #C8ECE3 solid;
background-color: #C8ECE3;
margin-right: 10px;
}
.three ul li:first-of-type{
border-radius: 50%;
border: 3px #bb131a solid;
background-color: #bb131a;
}
.three ul li a{
color: black;
}
.threewhole{
width: 750px;
position: relative;
height: 220px;
border: 1px #999 solid;
border-radius: 10px;
margin-bottom: 20px;
}
.four{
width: 100%;
height: 28px;
border-bottom: 1px #999 solid;
background: url("../Semester1book3DJ10/titleBg.jpg") repeat;
}
.four h3{
position: absolute;
color: #b81a15;
font-size: 14px;
top: -10px;
left: 5px;
}
.four ul{
position: absolute;
left: 100px;
top: 3px;
}
.four ul li{
float: left;
padding-right: 10px;
margin-left: 10px;
border-right: 1px #999 solid;
}
.four ul li:last-of-type{
border: 0;
}
.four ul li a{
color: #999;
font-size: 14px;
}
.five{
width: 350px;
height: 150px;
border: 1px #999 solid;
border-radius: 10px;
position: absolute;
left: 10px;
bottom: 20px;
}
.five img{
position: absolute;
left: 3px;
bottom: 10px;
transform: scale(0.9);
}
.five img:hover{
transition: 0.8s;
left: -10px;
}
.five ul{
position: absolute;
right: 0;
bottom: 5px;
}
.five ul li{
font-size: 12px;
margin-bottom: 10px;
}
.five ul li span{
color: red;
}
.five ul li a:nth-of-type(1){
background: #fff;
border: 1px #999 solid;
padding: 5px 10px;
border-radius: 5px;
color: black;
}
.five ul li a:nth-of-type(2){
background: blue;
border: 1px blue solid;
padding: 5px 10px;
border-radius: 5px;
color: white;
}
.six{
width: 350px;
height: 150px;
border: 1px #999 solid;
border-radius: 10px;
position: absolute;
right: 10px;
bottom: 20px;
}
.six img{
position: absolute;
left: 3px;
bottom: 10px;
transform: scale(0.9);
}
.six img:hover{
transition: all 0.5s linear;
left: -10px;
}
.six ul{
position: absolute;
right: 0;
bottom: 5px;
}
.six ul li{
font-size: 12px;
margin-bottom: 10px;
}
.six ul li span{
color: red;
}
.six ul li a:nth-of-type(1){
background: #fff;
border: 1px #999 solid;
padding: 5px 10px;
border-radius: 5px;
color: black;
}
.six ul li a:nth-of-type(2){
background: blue;
border: 1px blue solid;
padding: 5px 10px;
border-radius: 5px;
color: white;
}
.fourwhole{
width: 750px;
position: relative;
height: 500px;
border: 1px #999 solid;
border-radius: 10px;
}
.seven{
width: 100%;
height: 28px;
border-bottom: 1px #999 solid;
background: url("../Semester1book3DJ10/titleBg.jpg") repeat;
}
.seven h3{
position: absolute;
color: #b81a15;
font-size: 14px;
top: -10px;
left: 5px;
}
.eight{
padding: 10px;
text-align: center;
}
.eight div{
height: 200px;
width: 175px;
}
.eight div:nth-of-type(1) img{
position: absolute;
top: 58px;
left: 40px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(1) img:hover{
position: absolute;
top: 58px;
left: 20px;
transform: translate(0,0);
}
.eight div:nth-of-type(2) img{
position: absolute;
top: 58px;
left: 215px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(2) img:hover{
position: absolute;
top: 58px;
left: 195px;
transform: translate(0,0);
}
.eight div:nth-of-type(3) img{
position: absolute;
top: 58px;
right: 215px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(3) img:hover{
position: absolute;
top: 58px;
right: 235px;
transform: translate(0,0);
}
.eight div:nth-of-type(4) img{
position: absolute;
top: 58px;
right: 40px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(4) img:hover{
position: absolute;
top: 58px;
right: 60px;
transform: translate(0,0);
}
.eight div:nth-of-type(5) img{
position: absolute;
bottom: 150px;
left: 40px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(5) img:hover{
position: absolute;
bottom: 150px;
left: 20px;
transform: translate(0,0);
}
.eight div:nth-of-type(6) img{
position: absolute;
bottom: 150px;
left: 215px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(6) img:hover{
position: absolute;
bottom: 150px;
left: 195px;
transform: translate(0,0);
}
.eight div:nth-of-type(7) img{
position: absolute;
bottom: 150px;
right: 215px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(7) img:hover{
position: absolute;
bottom: 150px;
right: 235px;
transform: translate(0,0);
}
.eight div:nth-of-type(8) img{
position: absolute;
right: 40px;
bottom: 150px;
transition: all 0.5s linear;
}
.eight div:nth-of-type(8) img:hover{
position: absolute;
bottom: 150px;
right: 60px;
transform: translate(0,0);
}
.eight div:nth-of-type(1) ul{
position: absolute;
top: 160px;
left: 45px;
}
.eight div:nth-of-type(2) ul{
position: absolute;
top: 160px;
left: 220px;
}
.eight div:nth-of-type(3) ul{
position: absolute;
top: 160px;
right: 220px;
}
.eight div:nth-of-type(4) ul{
position: absolute;
top: 160px;
right: 45px;
}
.eight div:nth-of-type(5) ul{
position: absolute;
bottom: 50px;
left: 45px;
}
.eight div:nth-of-type(6) ul{
position: absolute;
bottom: 50px;
left: 220px;
}
.eight div:nth-of-type(7) ul{
position: absolute;
bottom: 50px;
right: 220px;
}
.eight div:nth-of-type(8) ul{
position: absolute;
right: 45px;
bottom: 50px;
}
.eight div ul li{
font-size: 12px;
margin-bottom: 10px;
}
.eight div ul li span{
color: red;
}
.eight div ul li a:nth-of-type(1){
background: #fff;
border: 1px #999 solid;
padding: 5px 10px;
border-radius: 5px;
color: black;
}
.eight div ul li a:hover:nth-of-type(1){
color: violet;
}
.eight div ul li a:nth-of-type(2){
background: blue;
border: 1px blue solid;
padding: 5px 10px;
border-radius: 5px;
color: white;
}
.eight div ul li a:hover:nth-of-type(2){
color: violet;
}
.fivewhole{
width: 240px;
height: 220px;
border: 1px #999 solid;
border-radius: 10px;
position: absolute;
top: 70px;
right: 0;
background: #ffddfc;
}
.fivewhole h3{
color: #999;
font-size: 14px;
margin-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.fivewhole li{
margin-bottom: 20px;
}
.fivewhole li:nth-of-type(1){
font-size: 14px;
margin-left: 20px;
}
.fivewhole li:nth-of-type(2){
font-size: 14px;
margin-left: 20px;
}
.fivewhole li:nth-of-type(3){
padding-left: 100px;
}
.fivewhole li:nth-of-type(3) input{
width: 60px;
background: url("../Semester1book3DJ10/btnLogin.jpg");
height: 25px;
}
.fivewhole li:nth-of-type(4){
margin-left: 60px;
}
.fivewhole li:nth-of-type(4) a{
color: blue;
font-size: 14px;
}
.fivewhole li:nth-of-type(4) a:hover{
text-decoration: underline;
}
.sixwhole{
width: 240px;
height: 220px;
border: 1px #999 solid;
border-radius: 10px;
position: absolute;
right: 0;
top: 310px;
}
.nine li{
margin: 0 20px;
height: 19px;
padding:4px 0;
border-bottom: 1px #999 dashed;
}
.nine li:last-of-type{
border: 0;
}
.nine li a{
background: url("../Semester1book3DJ10/rightTwo.png") no-repeat;
font-size: 12px;
padding-left: 30px;
color: #999;
}
.nine li:hover{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
.sevenwhole{
width: 240px;
height: 220px;
position: absolute;
right: 40px;
top: 550px;
}
.sevenwhole img{
transform: scale(0.75);
}
.eightwhole{
width: 240px;
height: 325px;
border: 1px #999 solid;
border-radius: 10px;
position: absolute;
right: 0;
top: 730px;
overflow: hidden;
}
.ten ul{
margin: 0 5px;
}
.ten li{
padding: 5px;
height: 120px;
border-bottom: 1px #999 dashed;
margin-top: 20px;
}
.ten li div:nth-of-type(1){
padding-left: 5px;
height: 100%;
width: 50%;
position: absolute;
left: 0;
}
.ten li div:nth-of-type(2){
height: 100%;
width: 50%;
position: absolute;
right: -18px;
margin-top: 10px;
}
.ten li div:nth-of-type(2) a{
font-size: 12px;
}
.ninewhoie{
position: absolute;
width: 100%;
height: 30px;
margin-top: 50px;
}
.ninewhoie ul:nth-of-type(1){
position: absolute;
left: 0;
}
.ninewhoie ul:nth-of-type(2){
position: absolute;
right: 0;
}
.ninewhoie ul li{
float: left;
padding-left: 10px;
font-size: 12px;
}
.ninewhoie ul li a{
font-size: 12px;
}
.tenwhole img{
transform: scale(0.7);
position: absolute;
right: -47px;
top: -43px;
animation:one 3s ease-in-out;
-o-animation:one 3s ease-in-out;
-moz-animation:one 3s ease-in-out;
-webkit-animation:one 3s ease-in-out;
}
.tenwhole img{
transform: scale(0.7);
position: absolute;
right: -47px;
top: 300px;
}
@-o-keyframes one {
0%{right: -47px;
top: -43px;}
50%{right: 750px;
top: 700px;}
100%{right: -47px;
top: 300px;}
}
@-moz-keyframes one {
0%{right: -47px;
top: -43px;}
50%{right: 750px;
top: 700px;}
100%{right: -47px;
top: 300px;}
}
@-webkit-keyframes one {
0%{right: -47px;
top: -43px;}
50%{right: 750px;
top: 700px;}
100%{right: -47px;
top: 300px;}
}