代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开心网游戏页面</title>
<style>
header {
width: 1000px;
height: 45px;
background: red;
border-radius: 15px;
margin: 0 auto;
}
.a {
color: red;
background: white;
width: 100px;
height: 35px;
position: absolute;
left: 300px;
top: 5px;
border-radius: 5px;
text-align: center;
line-height: 38px;
}
.b {
display: inline-block;
position: relative;
right: -550px;
top: -10px;
color: white;
}
a:hover {
text-decoration: underline;
}
.z ul li {
background: linear-gradient(to bottom, #ffffff, #f8f8f8, #e8e8e8, #eaeaea, #f1eff0);
list-style: none;
width: 220px;
margin-left: -39px;
}
.z ul {
border: 1px gray solid;
width: 181px;
border-radius: 5px;
margin-left: 185px;
}
.c {
position: absolute;
left: 220px;
margin-top: 10px;
}
.a {
margin-left: 185px;
}
.z li:hover {
width: 220px;
background: linear-gradient(to right, red, white);
}
.x img {
border-radius: 5px;
position: relative;
right: -430px;
top: -187px;
height: 173px;
}
.x {
margin-left: -10px;
}
.x p {
width: 20px;
height: 20px;
border-radius: 50%;
background: gainsboro;
text-align: center;
display: inline-block;
position: relative;
right: -250px;
top: -200px;
}
.x p:hover {
background: red;
color: white;
}
.v form p:nth-of-type(3) {
text-align: center;
}
.v p a {
text-decoration: none;
margin-left: 20px;
}
.v p a:hover {
text-decoration: underline;
}
nav {
border: 1px gray solid;
width: 250px;
height: 180px;
background: white;
border-radius: 5px;
margin-left: 930px;
margin-top: -380px;
line-height: 5px;
background: #F5F4F4;
}
.c {
margin-left: 185px;
}
.v span {
font-weight: bolder;
font-size: 14px;
}
.n1 li {
display: inline-block;
list-style: none;
color: gray;
}
.n1 li:nth-of-type(1) {
color: #7D0808;
font-weight: bolder;
padding-left: 10px;
}
.n1 li:nth-of-type(2) {
padding-left: 40px;
}
.n1 ul {
border: 1px gray solid;
width: 700px;
height: 30px;
margin-left: -1px;
background: #F5F4F4;
margin-top: -1px;
border-radius: 5px;
}
.n2 {
border: 1px gray solid;
width: 350px;
height: 200px;
padding-left: 10px;
padding-top: 30px;
border-radius: 5px;
margin-left: 5px;
}
.n21 {
margin-left: 190px;
margin-top: -150px;
}
.n2 a:nth-of-type(1) {
width: 100px;
height: 50px;
background: white;
border: 1px gray solid;
border-radius: 5px;
padding: 5px;
text-decoration: none;
}
.n23 a:nth-of-type(1) {
width: 100px;
height: 50px;
background: white;
border: 1px gray solid;
border-radius: 5px;
padding: 5px;
text-decoration: none;
}
.n2 a:nth-of-type(2) {
width: 200px;
height: 50px;
background: #79BFD1;
color: white;
padding: 5px;
border-radius: 5px;
margin-left: 20px;
text-decoration: none;
}
.n23 a:nth-of-type(2) {
width: 200px;
height: 50px;
background: #79BFD1;
color: white;
padding: 5px;
border-radius: 5px;
margin-left: 20px;
text-decoration: none;
}
.n3 {
border: 1px gray solid;
width: 350px;
height: 200px;
margin-left: 370px;
margin-top: -230px;
padding-left: 10px;
padding-top: 30px;
border-radius: 5px;
}
.n23 {
margin-left: 580px;
margin-top: -220px;
}
.n {
border: 1px gray solid;
width: 740px;
height: 310px;
border-radius: 5px;
margin-left: 185px;
}
.m {
border: 1px gray solid;
width: 250px;
height: 259px;
margin-left: 750px;
margin-top: -200px;
border-radius: 5px;
line-height: 30px;
}
.m ul {
list-style: none;
padding-left: 20px;
font-size: 14px;
padding-top: 5px;
}
.m1 {
color: red;
background: #F4F4F3;
width: 250px;
height: 40px;
margin-left: 0px;
margin-top: 0px;
border-radius: 5px;
margin-bottom: -20px;
}
.m ul img {
margin-left: -10px;
margin-right: 20px;
}
.m ul li {
border-bottom: 1px gray dashed;
}
.m li:nth-of-type(7) {
border-bottom: none;
}
.m li:hover {
transform: scale(1.1);
}
.k ul {
list-style: none;
display: inline-block;
margin-left: -10px;
}
.k {
border: 1px gray solid;
width: 740px;
height: 430px;
margin-top: 60px;
margin-left: 180px;
border-radius: 5px;
}
.k1 {
color: #7D0808;
background: #DCDCDC;
width: 740px;
height: 35px;
font-weight: bolder;
border-radius: 5px;
}
.k ul a {
line-height: 40px;
}
.p ul {
list-style: none;
margin-left: 900px;
margin-top: -430px;
}
.o {
border: 1px gray solid;
width: 250px;
height: 250px;
margin-top: 40px;
margin-left: 940px;
}
.o1 {
color: #7D0808;
background: #DCDCDC;
width: 240px;
height: 35px;
font-weight: bolder;
border-radius: 5px;
padding-left: 10px;
margin-bottom: 20px;
}
.o a {
text-decoration: none;
}
.o li {
list-style: none;
}
.o li:nth-of-type(1) {
margin-top: -190px;
margin-left: 100px;
}
.o li:nth-of-type(2) {
margin-top: 5px;
margin-left: 100px;
}
footer {
font-size: 12px;
margin-left: 180px;
margin-top: 30px;
}
.q {
margin-left: 440px;
margin-top: -15px;
}
footer a {
text-decoration: none;
}
.k a:nth-of-type(1) {
width: 100px;
height: 50px;
background: white;
border: 1px gray solid;
border-radius: 5px;
padding: 5px;
text-decoration: none;
}
.k a:nth-of-type(2) {
width: 200px;
height: 50px;
background: #79BFD1;
color: white;
padding: 5px;
border-radius: 5px;
margin-left: 20px;
text-decoration: none;
}
.k img:hover {
transform: translate(-10px, 0);
transition: all 0.8s ease-in-out;
}
.n2 img:hover {
transform: translate(-10px, 0);
transition: all 0.8s ease-in-out;
}
.n3 img:hover {
transform: translate(-10px, 0);
transition: all 0.8s ease-in-out;
}
span{
color: red;
}
.w{
position: absolute;
width: 180px;
right: 0;
top: 200px;
animation: name 6s ease-out;
}
@keyframes name{
0%{
transform: translate(0px);
}
50%{
transform: translate(-600px,300px);
}
}
</style>
</head>
<body>
<header>
<img src="img/gameLogo.png" />
<p class="a">首页</p>
<p class="b">
<a>注册 </a>|
<a>登入</a> |
<a> 帮助</a> |
<a>更多</a>
</p>
</header>
<article>
<div class="z">
<ul>
<li><img src="img/sub-2.gif" /> 征战四方<img class="c" src="img/rightA.png" /></li>
<li><img src="img/sub-3.gif" /> 龙将<img class="c" src="img/rightA.png" /></li>
<li><img src="img/sub-4.gif" /> 弹弹堂<img class="c" src="img/rightA.png" /></li>
<li><img src="img/sub-5.gif" /> 凡人修真2<img class="c" src="img/rightA.png" /></li>
<li><img src="img/sub-6.gif" /> 一骑当先<img class="c" src="img/rightA.png" /></li>
<li><img src="img/sub-7.gif" /> 宫廷计<img class="c" src="img/rightA.png" /></li>
<li><img src="img/sub-8.gif" /> 神仙道<img class="c" src="img/rightA.png" /></li>
</ul>
</div>
<div class="x">
<img src="img/xdtgg_frxz2_44.jpg" width="500px" />
<p>1</p>
<p>2</p>
<p>3</p>1
<p>4</p>
</div>
<nav>
<div class="v">
<p> <span>开心网用户登入</span></p>
<form action="" method="post">
<p>账号：<input type="text" placeholder="字母、数字的六位字符" required/></p>
<p>密码：<input type="password" placeholder="四位数字" required/></p>
<p><input class="login" name="login" type="submit" value="登入 " /></p>
</form>
<p>
<a href="#">立即注册</a>
<a href="#">忘记密码</a>
</p>
</div>
</nav>
<div class="n">
<div class="n1">
<ul>
<li>全部游戏</li>
<li>战争策略</li>
<li>|</li>
<li>体育经营</li>
<li>|</li>
<li>社交游戏</li>
</ul>
</div>
<div class="n2">
<img src="img/img-4.jpg" />
<div class="n21">
<p>三国题材横版RPG网游，丰富的武将系统</p>
<p>类型：角色扮演</p>
<p>游戏人气：<span>470921</span></p>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</div>
</div>
<div class="n3">
<img src="img/img-5.jpg" />
</div>
<div class="n23">
<p>一款不建主城不等CD，不占资源，全程战斗</p>
<p>类型：战征策略</p>
<p>游戏人气：8745221</p>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</div>
<div class="m">
<div class="m1">
新闻广告
</div>
<ul>
<li><img src="img/rightTwo.png" />[征战四方]开心首服：黄巾之乱</li>
<li><img src="img/rightTwo.png" />[龙将] 火爆8服·八门金</li>
<li><img src="img/rightTwo.png" />[弹弹堂] 41服开启·万人竞技</li>
<li><img src="img/rightTwo.png" />[凡人修真2] 03月08日·四海帝王</li>
<li><img src="img/rightTwo.png" />[一骑当先] 开心2服上线送黄金</li>
<li><img src="img/rightTwo.png" />[宫廷计] 03月06日·西施秘史</li>
<li><img src="img/rightTwo.png" />[凡人修真2] 03月08日·四海帝王</li>
</ul>
</div>
</div>
<div class="k">
<div class="k1">角色扮演</div>
<ul>
<li><img src="img/img-6.jpg" /></li>
<li>游戏人气：1765314</li>
<li>游戏状态：<span>22区开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-7.jpg" /></li>
<li>游戏人气：1245814</li>
<li>游戏状态：<span>23区开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-8.jpg" /></li>
<li>游戏人气：1232158</li>
<li>游戏状态：<span>25区开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-9.jpg" /></li>
<li>游戏人气：123745</li>
<li>游戏状态：<span>18区开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-10.jpg" /></li>
<li>游戏人气：1765314</li>
<li>游戏状态：<span>火爆开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-11.jpg" /></li>
<li>游戏人气：983014</li>
<li>游戏状态：<span>2服开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-12.jpg" /></li>
<li>游戏人气：745214</li>
<li>游戏状态：<span>4服开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
<ul>
<li><img src="img/img-13.jpg" /></li>
<li>游戏人气：654814</li>
<li>游戏状态：<span>火爆开启</span></li>
<a href="#">选服</a>
<a href="#">进入游戏</a>
</ul>
</div>
<div class="p">
<ul>
<li><img src="img/ad1.jpg" width="250px" /></li>
<li><img src="img/ad2.jpg" width="250px" /></li>
</ul>
</div>
<div class="o">
<div class="o1"> 游戏视频</div>
<img src="img/img-1.jpg" />
<img src="img/img-2.jpg" />
<ul>
<li>
<a href="#">《航海之王》麻辣炫酷反穿越，英雄时尚大变身！</a>
</li>
<li>
<a href="#">《弹弹堂》吴克群同名激情主题MV，体验修真乐趣！</a>
</li>
</ul>
</div>
</article>
<footer>
<a href="#">关于我们</a>
<a href="#">手机版</a>
<a href="#">开放平台</a>
<a href="#"> 自助广告</a>
<a href="#"> 招聘</a>
<a href="#">客服</a>
<a href="#">帮助</a>
<div class="q">
@2017开心网 文网文[2009]157号 京ICP证080482号 京公网安备110000000003号 未成年人家长监护
</div>
<img class="w" src="img/ad3.jpg" />
</footer>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
