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>
![]()
浙公网安备 33010602011771号