1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>开心网——网页游戏</title> 6 <style> 7 #header{ 8 width: 1040px; 9 height: 50px; 10 background: linear-gradient(to bottom,#9E3144,#D85D7A); 11 border: 1px red solid; 12 border-radius: 20px; 13 margin: 0px auto; 14 position: relative; 15 } 16 #gameLogo{ 17 position: absolute; 18 top: -20px; 19 float: left; 20 } 21 .gameIndex{ 22 position: absolute; 23 top: 15px; 24 left: 250px; 25 width: 97px; 26 height: 36px; 27 border: 1px hidden; 28 background: #FFFFFF; 29 text-align: center; 30 border-radius:5px 5px 0 0 ; 31 } 32 .gameIndex a{ 33 position: absolute; 34 top: 10px; 35 left: 30px; 36 text-decoration: none; 37 color: red; 38 font-weight: bold; 39 } 40 #menu{ 41 margin-top: 15px; 42 margin-right: 20px; 43 float: right; 44 } 45 #menu a{ 46 text-decoration: none; 47 color: #FFFFFF; 48 font-size: 10px; 49 } 50 .gameLeft{ 51 width: 728px; 52 height: 206px; 53 margin: 0px auto; 54 position: relative; 55 } 56 .gameNav{ 57 position: relative; 58 position: absolute; 59 top: 20px; 60 left: -140px; 61 width: 196px; 62 height: 210px; 63 border: 1px solid #D1CFD2; 64 border-radius: 5px; 65 } 66 .gameNav ul{ 67 width: 180px; 68 list-style: none; 69 text-decoration: none; 70 position: absolute; 71 left: -30px; 72 } 73 .gameNav li{ 74 background:linear-gradient(to bottom,#FFFFFF,#F8F8F8,#E8E8E8,#EAEAEA,#FLEFF0); 75 background: url(images/rightA.png) no-repeat 10px; 76 } 77 .gameNav a{ 78 text-decoration: none; 79 } 80 .gameNav li:hover{ 81 text-decoration: none; 82 background: linear-gradient(to right,#D85D7A,#E3865D,#D86136,#A96139,#CE4A19); 83 } 84 .gameAdver{ 85 position: relative; 86 position: absolute; 87 top: 20px; 88 left: 90px; 89 } 90 .gameAdver img{ 91 width: 527px; 92 height: 210px; 93 border: 1px hidden; 94 border-radius: 10px; 95 } 96 .code li{ 97 float: left; 98 padding: 0 6px; 99 background: rgba(204,204,204,0.98); 100 margin: 4px; 101 border-radius: 50%; 102 list-style: none; 103 } 104 .code a{ 105 text-decoration: none; 106 } 107 .code{ 108 position: absolute; 109 top: 160px; 110 left: 350px; 111 } 112 113 .gameBorder{ 114 width:770px; 115 height: 210px; 116 border: 1px solid #CCCCCC; 117 position: relative; 118 top: 250px; 119 left: -140px; 120 border-radius: 20px; 121 } 122 .gameTitle{ 123 background: #F6F6F5; 124 width: 770px; 125 height: 31px; 126 border: 0px hidden #CCCCCC; 127 border-radius: 20px; 128 position: absolute; 129 top: -40px; 130 left: -40px; 131 margin: 40px; 132 position: relative; 133 } 134 .gameTitle dl{ 135 position: absolute; 136 top: -10px; 137 } 138 dl dt{ 139 color: #7D0808; 140 font-weight: bold; 141 } 142 dl dd{ 143 position: relative; 144 top: -20px; 145 left: 70px; 146 display: inline-block; 147 margin-left: 10px; 148 } 149 dl a{ 150 color: #666666; 151 font-size: 15px; 152 text-decoration: none; 153 } 154 .clea{ 155 width: 321px; 156 height: 154px; 157 border: 1px solid #CCCCCC; 158 border-radius: 10px; 159 position: absolute; 160 top: 20px; 161 left: 20px; 162 } 163 .i{ 164 position: relative; 165 top: 20px; 166 left: -25px; 167 168 } 169 .i img{ 170 width: 160px; 171 height: 120px; 172 } 173 li{ 174 list-style: none; 175 } 176 .l{ 177 position: relative; 178 top: -125px; 179 left: 150px; 180 font-size: 12px; 181 font-weight: bold; 182 } 183 .l span{ 184 font-weight: bold; 185 color: #A70A0A; 186 } 187 .play{ 188 background: #FFFFFF; 189 width: 50px; 190 height: 30px; 191 border: 1px solid #CCCCCC; 192 border-radius: 5px; 193 position: relative; 194 } 195 .play a{ 196 position: absolute; 197 top: 5px; 198 left: 10px; 199 text-decoration: none; 200 font-size: 15px; 201 color: #333333; 202 } 203 .e{ 204 position: relative; 205 top: -43px; 206 left: 60px; 207 width: 70px; 208 height: 30px; 209 border: 1px solid #68B0C7; 210 border-radius: 5px; 211 position: relative; 212 background: #376C9C; 213 } 214 .e a{ 215 position: absolute; 216 top: 5px; 217 left: 10px; 218 text-decoration: none; 219 font-size: 13px; 220 color: #FFFFFF; 221 } 222 .cl{ 223 width: 330px; 224 height: 154px; 225 border: 1px solid #CCCCCC; 226 border-radius: 10px; 227 position: absolute; 228 top: 20px; 229 left: 400px; 230 } 231 .im{ 232 position: relative; 233 top: 10px; 234 left: -25px; 235 } 236 .lm{ 237 position: relative; 238 top: -130px; 239 left: 150px; 240 font-size: 12px; 241 font-weight: bold; 242 } 243 .im img{ 244 width: 160px; 245 height: 120px; 246 } 247 .gameRight{ 248 position: relative; 249 top: -185px; 250 left: 940px; 251 width: 264px; 252 height: 780px; 253 } 254 .gameLogin{ 255 position: relative; 256 border: 1px solid #CCCCCC; 257 width: 251px; 258 height: 207px; 259 border-radius: 10px; 260 } 261 .gameLogin h1{ 262 font-size: 16px; 263 color: #8A7373; 264 position: relative; 265 left: 10px; 266 top: 5px; 267 268 } 269 .gameLogin .login{ 270 position: relative; 271 left: 40px; 272 top: 5px; 273 } 274 .gameLogin a{ 275 text-decoration: none; 276 } 277 .rder{ 278 position: relative; 279 top: 20px; 280 border: 1px solid #CCCCCC; 281 width: 280px; 282 height: 220px; 283 border-radius: 10px; 284 } 285 .itle{ 286 width: 280px; 287 height: 30px; 288 border: 1px solid #CCCCCC; 289 border-radius: 8px; 290 background: #F1F2F1; 291 } 292 .itle dt{ 293 font-size: 14px; 294 position: relative; 295 top: -10px; 296 left: 10px; 297 } 298 .news li{ 299 width: 270px; 300 position: relative; 301 top: -15px; 302 left: -35px; 303 background: url(images/rightTwo.png) no-repeat 0px 8px; 304 border-top:1px dashed #CCCCCC; 305 } 306 .news a{ 307 position: relative; 308 top: 0px; 309 left: 40px; 310 font-size: 14px; 311 text-decoration: none; 312 line-height: 25px; 313 } 314 .ad{ 315 position: relative; 316 top: 40px; 317 318 } 319 .ad img{ 320 width: 280px; 321 height: 70px; 322 } 323 .der{ 324 position: relative; 325 top: 40px; 326 border: 1px solid #CCCCCC; 327 width: 280px; 328 height: 280px; 329 border-radius: 10px; 330 } 331 .gameVideo dt a{ 332 color: blue; 333 font-weight: lighter; 334 position: absolute; 335 top: 45px; 336 left: 140px; 337 } 338 .gameVideo dd img{ 339 position: absolute; 340 top: 40px; 341 left: -80px; 342 } 343 .gameVideo dd a{ 344 color: blue; 345 font-weight: lighter; 346 position: relative; 347 top: 45px; 348 left: 60px; 349 } 350 .adRight img{ 351 width: 210px; 352 height: 200px; 353 position: relative; 354 top: -700px; 355 left: 1100px; 356 animation:spread 5s linear 2; 357 } 358 @keyframes spread{ 359 0%{transform: rotate(0deg);right:0px;} 360 25%{transform: rotate(20deg);right:0px;} 361 50%{transform: rotate(0deg);left:600px;} 362 55%{transform: rotate(0deg) ;right:600px;} 363 70%{transform: rotate(0deg) scale(1.5);right:600px;} 364 80%{transform: rotate(-360deg);right:0px;} 365 100%{transform: rotate(0deg) ;right:900px; } 366 367 } 368 #footer{ 369 width: 1140px; 370 margin: 0px auto; 371 } 372 #footer a{ 373 text-decoration: none; 374 } 375 .ga{ 376 width:770px; 377 height: 440px; 378 border: 1px solid #CCCCCC; 379 position: relative; 380 top: 270px; 381 left: -140px; 382 border-radius: 20px; 383 } 384 .role li{ 385 width: 130px; 386 height: 165px; 387 display: inline-block; 388 position: relative; 389 top: -80px; 390 margin: 20px; 391 } 392 .role p{ 393 font-size: 12px; 394 font-weight: bold; 395 } 396 .role span{ 397 font-weight: bold; 398 color: #A70A0A; 399 } 400 </style> 401 </head> 402 <body> 403 <header id="header" class="clear"> 404 <div id="gameLogo"> 405 <h1><a href="#"><img src="images/gameLogo.png"/></a></h1> 406 </div> 407 <div class="gameIndex"> 408 <a href="#">首页</a> 409 </div> 410 <div id="menu"> 411 <a href="#">注册</a> | 412 <a href="#">登录</a> | 413 <a href="#">帮助</a> | 414 <a href="#">更多</a> 415 </div> 416 </header> 417 <!--主体内容开始--> 418 <article id="container"> 419 <!--左侧内容开始--> 420 <section class="gameLeft"> 421 <div class="clear firstLine"> 422 <div class="gameNav"> 423 <ul> 424 <li><a href="#"><img src="images/sub-2.gif"/>征战四方</a></li> 425 <li><a href="#"><img src="images/sub-3.gif"/>龙将</a></li> 426 <li><a href="#"><img src="images/sub-4.gif"/>弹弹堂</a></li> 427 <li><a href="#"><img src="images/sub-5.gif"/>凡人修真2</a></li> 428 <li><a href="#"><img src="images/sub-6.gif"/>一骑当先</a></li> 429 <li><a href="#"><img src="images/sub-7.gif"/>宫廷计</a></li> 430 <li><a href="#"><img src="images/sub-8.gif"/>神仙道</a></li> 431 </ul> 432 </div> 433 <div class="gameAdver"> 434 <a href="#"><img src="images/xdtgg_frxz2_44.jpg"/></a> 435 <ul class="code clear"> 436 <li class="active"><a href="#">1</a></li> 437 <li><a href="#">2</a></li> 438 <li><a href="#">3</a></li> 439 <li><a href="#">4</a></li> 440 </ul> 441 </div> 442 </div> 443 444 <div class="gameBorder"> 445 <div class="gameTitle"> 446 <dl> 447 <dt>全部游戏</dt> 448 <dd><a href="#">战争策略</a></dd> 449 <dd>|</dd> 450 <dd><a href="#">体育经营</a></dd> 451 <dd>|</dd> 452 <dd><a href="#">社交游戏</a></dd> 453 </dl> 454 </div> 455 456 <ul class="clea"> 457 <li> 458 <div class="i"> 459 <img src="images/img-4.jpg"/> 460 </div> 461 <div class="l"> 462 <p>三国题材横版RPG网游，丰富的<br/>武将系统</p> 463 464 <p>类型：角色扮演</p> 465 466 <p>游戏人气：<span>470921</span></p> 467 468 <p class="play"> 469 <a href="#">选服</a> 470 </p> 471 <p class="e"> 472 <a href="#">进入游戏</a> 473 </p> 474 </div> 475 </li> 476 </ul> 477 <ul class="cl"> 478 <li> 479 <div class="im"> 480 <img src="images/img-5.jpg"/> 481 </div> 482 <div class="lm"> 483 <p>一款不建主城不等CD，不占资源<br/>全程战斗</p> 484 485 <p>类型：战征策略</p> 486 487 <p>游戏人气：8745221</p> 488 <p class="play"> 489 <a href="#">选服</a> 490 </p> 491 <p class="e"> 492 <a href="#">进入游戏</a> 493 </p> 494 </div> 495 </li> 496 </ul> 497 <dl> 498 <dd> 499 </dl> 500 </div> 501 <div class="ga"> 502 <div class="gameTitle"> 503 <dl> 504 <dt>角色扮演</dt> 505 </dl> 506 </div> 507 <div class="role"> 508 <ul> 509 <li><a href="#"><img src="images/img-6.jpg"/></a> 510 511 <p>游戏人气：1765314<br/> 512 游戏状态：<span>22区开启</span></p> 513 514 <p class="play"> 515 <a href="#">选服</a> 516 </p> 517 <p class="e"> 518 <a href="#">进入游戏</a> 519 </p> 520 </li> 521 <li><a href="#"><img src="images/img-7.jpg"/></a> 522 523 <p>游戏人气：1245814<br/> 524 游戏状态：<span>23区开启</span></p> 525 526 <p class="play"> 527 <a href="#">选服</a> 528 </p> 529 <p class="e"> 530 <a href="#">进入游戏</a> 531 </p> 532 </li> 533 <li><a href="#"><img src="images/img-8.jpg"/></a> 534 535 <p>游戏人气：1232158<br/> 536 游戏状态：<span>25区开启</span></p> 537 538 <p class="play"> 539 <a href="#">选服</a> 540 </p> 541 <p class="e"> 542 <a href="#">进入游戏</a> 543 </p> 544 </li> 545 <li><a href="#"><img src="images/img-9.jpg"/></a> 546 547 <p>游戏人气：123745<br/> 548 游戏状态：<span>18区开启</span></p> 549 <p class="play"> 550 <a href="#">选服</a> 551 </p> 552 <p class="e"> 553 <a href="#">进入游戏</a> 554 </p> 555 </li> 556 <li><a href="#"><img src="images/img-10.jpg"/></a> 557 558 <p>游戏人气：178501<br/> 559 游戏状态：<span>火爆开启</span></p> 560 561 <p class="play"> 562 <a href="#">选服</a> 563 </p> 564 <p class="e"> 565 <a href="#">进入游戏</a> 566 </p> 567 </li> 568 <li><a href="#"><img src="images/img-11.jpg"/></a> 569 570 <p>游戏人气：983014<br/> 571 游戏状态：<span>2服开启</span></p> 572 573 <p class="play"> 574 <a href="#">选服</a> 575 </p> 576 <p class="e"> 577 <a href="#">进入游戏</a> 578 </p> 579 </li> 580 <li><a href="#"><img src="images/img-12.jpg"/></a> 581 582 <p>游戏人气：745214<br/> 583 游戏状态：<span>4服开启</span></p> 584 585 <p class="play"> 586 <a href="#">选服</a> 587 </p> 588 <p class="e"> 589 <a href="#">进入游戏</a> 590 </p> 591 </li> 592 <li><a href="#"><img src="images/img-13.jpg"/></a> 593 594 <p>游戏人气：654814<br/> 595 游戏状态：<span>火爆开启</span></p> 596 597 <p class="play"> 598 <a href="#">选服</a> 599 </p> 600 <p class="e"> 601 <a href="#">进入游戏</a> 602 </p> 603 </li> 604 </ul> 605 </div> 606 </div> 607 </section> 608 609 </section> 610 <!--右侧内容开始--> 611 <aside class="gameRight"> 612 <div class="gameLogin"> 613 <h1>开心网用户登录</h1> 614 <form action="#"> 615 <ul> 616 <li> 617 账号：<input name="username" type="text" placeholder="字母、数字的六位字符" required/> 618 </li> 619 <li>密码： 620 <input name="pwd" type="password" placeholder="四位数字" required/> 621 </li> 622 <li> 623 <input class="login" name="login" type="image" src="images/btnLogin.jpg"/> 624 625 </li> 626 <li> 627 <a href="#">立即注册</a> 628 <a href="#">忘记密码</a> 629 </li> 630 </ul> 631 </form> 632 </div> 633 <div class="rder"> 634 <div class="itle"> 635 <dl> 636 <dt>新闻公告</dt> 637 </dl> 638 </div> 639 <ul class="news"> 640 <li><a href="#" class="u">[征战四方] 开心首服·黄巾之乱</a></li> 641 <li><a href="#">[龙将] 火爆8服·八门金</a></li> 642 <li><a href="#">[弹弹堂] 41服开启·万人竞技</a></li> 643 <li><a href="#">[凡人修真2] 03月08日·四海帝王</a></li> 644 <li><a href="#">[一骑当先] 开心2服上线送黄金</a></li> 645 <li><a href="#">[宫廷计] 03月06日·西施秘史</a></li> 646 <li class="noBorder"><a href="#">[凡人修真2] 03月08日·四海帝王</a></li> 647 </ul> 648 </div> 649 <div class="ad"> 650 <a href="#"><img src="images/ad1.jpg" alt=""/></a> 651 <a href="#"><img src="images/ad2.jpg" alt=""/></a> 652 </div> 653 654 <div class="der"> 655 <div class="itle"> 656 <dl> 657 <dt>游戏视频</dt> 658 </dl> 659 </div> 660 <div class="clear"></div> 661 <dl class="gameVideo"> 662 <dt><img src="images/img-1.jpg"/><a href="#">《航海之王》麻辣<br/>炫酷反穿越，英雄<br/>时尚大变身！</a></dt> 663 <dd><img src="images/img-2.jpg"/><a href="#">《弹弹堂》吴克群<br/>同名激情主题MV<br/>体验修真乐趣</a></dd> 664 </dl> 665 <div class="clear"></div> 666 </div> 667 </aside> 668 <!--右侧内容结束--> 669 </article> 670 <!--主体内容结束--> 671 <footer id="footer"> 672 <a href="#">关于我们</a> 673 <a href="#">手机版</a> 674 <a href="#">开放平台</a> 675 <a href="#"> 自助广告</a> 676 <a href="#"> 招聘</a> 677 <a href="#">客服</a> 678 <a href="#">帮助</a> 679 @2017开心网 文网文[2009]157号 京ICP证080482号 京公网安备110000000003号 未成年人家长监护 680 </footer> 681 <!--广告动画--> 682 <div class="adRight"> 683 <a class="icon" href="#">X</a> 684 <a href="#"><img src="images/ad3.jpg" alt=""/></a> 685 </div> 686 </body> 687 </html>
