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>