CSS样式文件
/*公共*/
.w {
width: 1000px;
margin: 0 auto;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
/*导航栏*/
.nav {
float: left;
height: 50px;
border-radius: 8px;
background: linear-gradient(#d12240, #d25c75);
}
.all {
float: left;
margin-left: 40px;
width: 500px;
}
.all .ther {
display: inline-block;
color: #d12240;
width: 100px;
height: 40px;
text-decoration: none;
font-size: 14px;
line-height: 40px;
text-align: center;
position: relative;
top: -6px;
left: -26px;
background: white;
border-radius: 5px;
}
.all .index::before {
content: url(../img/gameLogo.png);
position: relative;
top: 4px;
left: -50px;
}
.nav_1 {
float: right;
margin-right: 35px;
}
.nav_1 ul li a {
color: #fff;
text-decoration: none;
font-size: 12px;
margin: 0 5px;
}
.nav_1 ul li {
float: left;
color: #fff;
}
.nav_1 .font img {
width: 0.1px;
height: 12px;
vertical-align: middle;
margin-right: 10px;
}
/*征战四方*/
.for {
float: left;
width: 190px;
height: 203px;
margin-top: 20px;
border-radius: 8px;
border: 1px solid #cccccc;
}
.for ul li {
height: 29px;
width: 190px;
box-sizing: border-box;
}
.for ul {
float: left;
margin: 0;
padding: 0;
}
.for ul li:nth-of-type(1) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
border-radius: 8px 8px 0 0;
}
.for ul li:nth-of-type(2) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}
.for ul li:nth-of-type(3) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}
.for ul li:nth-of-type(4) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}
.for ul li:nth-of-type(5) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}
.for ul li:nth-of-type(6) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
}
.for ul li:nth-of-type(7) {
background: url(../img/游戏列表灰色渐变.jpg) no-repeat;
border-radius: 0 0 8px 8px;
}
.for ul li:nth-of-type(1):hover {
background: url(../img/游戏列表鼠标移入的渐变.jpg);
border-radius: 8px 8px 0 0;
}
.for ul li:nth-of-type(odd):hover {
background: url(../img/游戏列表鼠标移入的渐变.jpg);
}
.for ul li:nth-of-type(even):hover {
background: url(../img/游戏列表鼠标移入的渐变.jpg);
}
.for ul li:nth-of-type(7):hover {
background: url(../img/游戏列表鼠标移入的渐变.jpg);
border-radius: 0 0 8px 8px;
}
.for ul li a {
color: black;
text-decoration: none;
font-size: 12px;
line-height: 29px;
margin-left: 20px;
position: relative;
top: 2px;
}
.for ul li a img {
position: relative;
top: 6px;
left: -10px;
}
/*
.for ul li:nth-of-type(1) a{
}
.for ul li:nth-of-type(2) a::before{
content: url(../img/sub-3.gif);
float: left;
margin-top: 4px;
margin-left: 1px;
}
.for ul li:nth-of-type(3) a::before{
content: url(../img/sub-4.gif);
float: left;
margin-top: 4px;
margin-left: 10px;
}
.for ul li:nth-of-type(4) a::before{
content: url(../img/sub-5.gif);
float: left;
margin-top: 4px;
margin-left: 10px;
}
.for ul li:nth-of-type(5) a::before{
content: url(../img/sub-6.gif);
float: left;
margin-top: 4px;
margin-left: 10px;
}
.for ul li:nth-of-type(6) a::before{
content: url(../img/sub-7.gif);
float: left;
margin-top: 4px;
margin-left: 10px;
}
.for ul li:nth-of-type(7) a::before{
content: url(../img/sub-8.gif);
float: left;
margin-top: 4px;
margin-left: 10px;
}
*/
/*中心图模块*/
.center img {
float: left;
margin-top: 24px;
margin-left: 12px;
width: 520px;
height: 195px;
border-radius: 8px;
}
.center .qie_huan ul li a {
text-decoration: none;
color: black;
font-size: 12px;
float: left;
margin-left: 6px;
margin-top: 2px;
}
.center .qie_huan ul li {
float: left;
margin: 0 10px;
height: 20px;
width: 20px;
background: #cbcac9;
color: black;
border-radius: 50%;
}
.center .qie_huan ul li:hover {
background: #b91e1a;
}
.center .qie_huan ul li a:hover {
color: white;
}
.qie_huan {
float: left;
margin-top: 174px;
margin-left: -218px;
}
/*用户登录模块*/
.login {
float: right;
width: 260px;
height: 205px;
border: 1px solid #cccccc;
border-radius: 8px;
background: #fafafa;
margin: 20px 0 0 0;
}
.login a {
float: left;
color: #8a7373;
font-size: 14px;
font-family: 微软雅黑;
font-weight: 600;
margin: 25px 0 0 20px;
}
.login input {
border: 1px solid #cccccc;
outline: 0;
margin-top: 10px;
}
.login form {
float: left;
margin: 20px 0 0 20px;
font-size: 13px;
}
.login a img {
float: left;
margin: -12px 0 0 78px;
}
.login p {
float: left;
position: relative;
top: -26px;
left: 43px;
}
.login p a {
color: #2b62a5;
font-weight: 400;
font-size: 12px;
}
/*全部游戏模块*/
.all_game {
float: left;
margin-top: 20px;
height: 225px;
width: 720px;
border: 1px solid #cccc;
border-radius: 8px;
}
.all_game .class {
float: left;
width: 720px;
height: 30px;
border-radius: 8px 8px 0 0;
background: linear-gradient(white, #e3e3e3);
border-bottom: 1px solid #cccc;
}
.class ul {
height: 30px;
width: 100%;
margin: 0;
padding: 0;
}
.class ul li {
float: left;
margin: 0 20px;
}
.gray a::after {
content: '|';
color: #cccccc;
position: relative;
left: 20px;
}
.more {
position: relative;
left: -14px;
}
.class ul li a {
color: gray;
font-size: 12px;
line-height: 30px;
font-weight: bold;
}
.class ul li:nth-of-type(1) a {
color: #7d0808;
}
.class ul li a:hover {
color: #7d0808;
}
.game_1 {
float: left;
margin: 20px 0 0 24px;
width: 320px;
height: 150px;
border-radius: 8px;
border: 1px solid #cccccc;
}
.game_1 img {
float: left;
margin: 20px 0 0 10px;
width: 130px;
height: 98px;
transition: all .8s;
}
.game_1 img:hover {
transform: translate(-12px);
}
.game_1 ul li {
font-size: 12px;
line-height: 22px;
}
.game_1 ul {
float: left;
margin: 20px 0 0 10px;
padding: 0;
}
.game_1 ul li span {
color: #7d0808;
}
.game_1 button {
float: left;
height: 26px;
background: white;
border: 1px solid #cccccc;
border-radius: 3px;
margin: 0 0 0 10px;
cursor: pointer;
font-size: 12px;
outline: 0;
}
.all_game .game_1 .over {
float: left;
height: 26px;
background: linear-gradient(#7dc1d3, #326598);
border: 1px solid #326598;
color: white;
border-radius: 3px;
margin: 0 0 0 10px;
cursor: pointer;
font-size: 12px;
outline: 0;
}
/*新闻公告模块*/
.news_flash{
float: right;
margin-top: 20px;
width: 260px;
height: 227px;
border-radius: 8px;
border: 1px solid #cccccc;
}
.tall{
float: left;
width: 100%;
height: 30px;
background: linear-gradient(white, #e3e3e3);
border-bottom: 1px solid #cccccc;
border-radius: 8px 8px 0 0;
color:#7d0808;
font-size: 12px;
font-weight: bold;
}
.tall a{
float: left;
margin: 6px 0 0 10px;
}
.tall ul{
float: left;
padding: 0;
margin-left:5px ;
}
.tall ul li{
float: left;
transition: all .4s;
width: 244px;
background: url(../img/rightTwo.png) no-repeat 10px 10px;
}
.tall ul li a{
color: #4d4646;
font-weight: normal;
line-height: 21px;
margin-left: 44px;
position: relative;
top:-4px;
}
.tall ul li a:hover{
transform: scale(1.2);
}
.tall ul li{
border-bottom: 1px dashed #ccc;
}
/*官方微博模块*/
.w .weibo{
float: right;
width: 260px;
height: 160px;
margin-top: 20px;
}
.w .weibo img{
width: 260px;
height: 70px;
margin-bottom: 10px ;
}
/*角色扮演模块*/
.cosplay{
width: 720px;
height: 430px;
float: left;
margin-top: 20px;
border-radius: 8px;
border: 1px solid #cccccc;
}
.cosplay .font_s{
float: left;
width: 100%;
height: 30px;
background: linear-gradient(white, #e3e3e3);
border-bottom: 1px solid #cccccc;
border-radius: 8px 8px 0 0;
font-size: 12px;
font-weight: bold;
}
.w .cosplay .font_s a{
color:#7d0808;
float: left;
margin: 6px 0 0 10px;
}
.w .cosplay ul li a{
color: black;
font-size: 12px;
font-weight: normal;
}
.cosplay .shenxian ul{
padding: 0;
}
.cosplay .shenxian ul li{
float: left;
width: 150px;
text-align: center;
}
.shenxian{
float: left;
width: 150px;
margin: 10px 0 0 24px;
}
.cosplay button {
float: left;
height: 26px;
background: white;
border: 1px solid #cccccc;
border-radius: 3px;
margin: 5px 0 0 10px;
cursor: pointer;
font-size: 12px;
outline: 0;
}
.cosplay .over{
float: left;
height: 26px;
background: linear-gradient(#7dc1d3, #326598);
border: 1px solid #326598;
color: white;
border-radius: 3px;
margin: 5px 0 0 26px;
cursor: pointer;
font-size: 12px;
outline: 0;
}
.shenxian img{
transition: all .8s;
}
.shenxian img:hover{
transform: translate(-12px);
}
/*游戏视频模块*/
.game_video{
float: right;
width: 260px;
height: 240px;
border: 1px solid #ccc;
border-radius: 8px;
margin-top: 26px;
}
.game_video .font_s{
float: left;
width: 100%;
height: 30px;
background: linear-gradient(white, #e3e3e3);
border-bottom: 1px solid #cccccc;
border-radius: 8px 8px 0 0;
font-size: 12px;
font-weight: bold;
}
.game_video .font_s a{
color: #7d0808;
float: left;
margin: -12px 0 0 10px;
}
.game_video img{
float: left;
margin: 9px 10px;
}
.game_video .he_1{
width: 100%;
height: 138px;
border-bottom: 1px dashed #ccc;
}
.game_video .he_1 a{
position: relative;
top: 18px;
font-size: 12px;
line-height: 20px;
color: #2b62a5;
}
.game_video a{
position: relative;
top: 18px;
font-size: 12px;
line-height: 20px;
color: #2b62a5;
}
/*广告模块*/
.guanggao img{
width: 200px;
height: 180px;
}
.guanggao{
position: fixed;
right: 1px;
top: 35px;
animation-name: guanggao;
animation-duration: 4s;
animation-direction: alternate;
animation-iteration-count: 2;
}
@keyframes guanggao {
from {
}
to {
transform: translate(-900px, 400px);
}
}
.guanggao .x{
float: left;
width: 20px;
height: 30px;
background: lightgray;
opacity: 0.2;
color: blue;
text-align: center;
line-height: 30px;
position: relative;
top: -24px;
left: 200px;
}
/*底部信息模块*/
.police ul{
float: left;
padding: 0;
}
.police ul li{
float: left;
font-size: 12px;
margin: 40px 18px 0 0;
}
.police ul li a{
color: #2b62a5;
}
.police ul .right{
margin-left: 76px;
margin-right: 0;
float: right;
color: gray;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开心网页游戏</title>
<link href="css/GameIndex.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="w">
<!--导航栏start-->
<div class="w nav">
<div class="all">
<a class="index" href="#"> </a>
<a class="ther" href="#">首 页</a>
</div>
<div class="nav_1">
<ul>
<li><a href="#">注册</a></li>
<li><a href="#" class="font" ><img src="img/titleBg.jpg">帮助</a></li>
<li><a href="#" class="font" ><img src="img/titleBg.jpg">登录</a></li>
<li><a href="#" class="font" ><img src="img/titleBg.jpg">更多</a></li>
</ul>
</div>
</div>
<!--导航栏end-->
<!--征战四方模块start-->
<div class="for">
<ul>
<li><a href="#"><img src="img/sub-2.gif">征战四方</a></li>
<li><a href="#"><img src="img/sub-3.gif">龙将</a></li>
<li><a href="#"><img src="img/sub-4.gif">弹弹堂</a></li>
<li><a href="#"><img src="img/sub-5.gif">凡人修真2</a></li>
<li><a href="#"><img src="img/sub-6.gif">一骑当先</a></li>
<li><a href="#"><img src="img/sub-7.gif">宫廷计</a></li>
<li><a href="#"><img src="img/sub-8.gif">神仙道</a></li>
</ul>
</div>
<!--征战四方模块end-->
<!--中心图模块start-->
<div class="center">
<img src="img/xdtgg_frxz2_44.jpg">
<div class="qie_huan">
<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>
<!--中心图模块end-->
<!--用户登录模块start-->
<div class="login">
<a href="#">开心网用户登录</a>
<form action="#" method="">
账号: <input type="text" placeholder="字母,数字的六位数字符"><br/>
密码: <input type="password" placeholder="四位数字">
</form>
<a href="#"><img src="img/btnLogin.jpg"> </a>
<p><a href="#" class="new">立即注册 </a><a href="#" class="wu">忘记密码</a></p>
</div>
<!--用户登录模块end-->
<!--全部游戏模块start-->
<div class="all_game">
<div class="class">
<ul>
<li class="red"><a href="#" class="more">全部游戏</a></li>
<li class="gray"><a href="#">战争策略</a></li>
<li class="gray"><a href="#">体育经营</a></li>
<li><a href="#">社交游戏</a></li>
</ul>
</div>
<div class="game_1">
<img src="img/img-4.jpg">
<ul>
<li>三国题材横版RPG网游,丰富的</li>
<li>武将系统</li>
<li>类型:角色扮演</li>
<li>游戏人气:<span>470921</span></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="game_1">
<img src="img/img-5.jpg">
<ul>
<li>一款不建主城不等CD,不占资</li>
<li>源,全程战斗</li>
<li>类型:战征策略</li>
<li>游戏人气:8745221</li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
</div>
<!--全部游戏模块end-->
<!--新闻公告模块start-->
<div class="news_flash">
<div class="tall"><a>新闻公告</a>
<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>
<!--新闻公告模块end-->
<!--角色扮演模块start-->
<div class="cosplay">
<div class="font_s"><a href="#">角色扮演</a></div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-6.jpg"> </a></li>
<li><a href="#">游戏人气:1765314</a></li>
<li><a href="#">游戏状态:22区开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-7.jpg"> </a></li>
<li><a href="#">游戏人气:654814</a></li>
<li><a href="#">游戏状态:火爆开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-8.jpg"> </a></li>
<li><a href="#">游戏人气:1245814</a></li>
<li><a href="#">游戏状态:23区开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-9.jpg"> </a></li>
<li><a href="#">游戏人气:1232158</a></li>
<li><a href="#">游戏状态:25区开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-10.jpg"> </a></li>
<li><a href="#">游戏人气:123745</a></li>
<li><a href="#">游戏状态:18区开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-11.jpg"> </a></li>
<li><a href="#">游戏人气:178501</a></li>
<li><a href="#">游戏状态:火爆开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-12.jpg"> </a></li>
<li><a href="#">游戏人气:983014</a></li>
<li><a href="#">游戏状态:2服开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
<div class="shenxian">
<ul>
<li><a href="#"><img src="img/img-13.jpg"> </a></li>
<li><a href="#">游戏人气:745214</a></li>
<li><a href="#">游戏状态:4服开启</a></li>
</ul>
<button>选服</button>
<button class="over">进入游戏</button>
</div>
</div>
<!--角色扮演模块end-->
<!--官方微博模块start-->
<div class="weibo">
<img class="pic_2" src="img/ad1.jpg">
<img class="pic_2" src="img/ad2.jpg">
</div>
<!--官方微博模块end-->
<!--游戏视频模块start-->
<div class="game_video">
<div class="font_s"><a href="#">游戏视频</a></div>
<div class="he_1">
<img src="img/img-1.jpg">
<a>《航海之王》麻辣炫酷反穿越,英雄时尚大变身!</a>
</div>
<img src="img/img-2.jpg">
<a>《弹弹堂》吴克群同名激情主题MV,体验修真乐趣</a>
</div>
<!--游戏视频模块end-->
<div class="guanggao">
<div class="x">x</div>
<img src="img/ad3.jpg">
</div>
<!--底部信息模块start-->
<div class="police">
<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>
<li class="right">@2017开心网 文网文[2009]157号 京ICP证080482号 京公网安备110000000003号 未成年人家长监护</li>
</ul>
</div>
<!--底部信息模块end-->
</div>
</body>
</html>