HTML 第十章 開心網遊戲頁面
阿新 • • 發佈：2018-12-19
HTML程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>開心網遊戲頁面</title> <link rel="stylesheet" type="text/css" href="css/Game.css" /> </head> <body style="height: 1200px;"> <header> <img src="img/gameLogo.png" /> <div class="box"><span>首頁</span></div> <ul> <li> <a href="#">註冊</a> </li> | <li> <a href="#">登入</a> </li> | <li> <a href="#">幫助</a> </li> | <li> <a href="#">更多</a> </li> </ul> </header> <section> <div class="box2"> <ul> <li><img src="img/sub-2.gif" /><span>征戰四方</span></li> <li><img src="img/sub-3.gif" /><span>龍將</span></li> <li><img src="img/sub-4.gif" /><span>彈彈堂</span></li> <li><img src="img/sub-5.gif" /><span>凡人修真2</span></li> <li><img src="img/sub-6.gif" /><span>一騎當先</span></li> <li><img src="img/sub-7.gif" /><span>宮廷計</span></li> <li><img src="img/sub-8.gif" /><span>神仙道</span></li> </ul> </div> <div class="img"> <div class="box3"> <img src="img/xdtgg_bjsg_27.jpg" /> <img src="img/xdtgg_dtszj_125.jpg" /> <img src="img/xdtgg_frxz2_70.jpg" /> <img src="img/xdtgg_gcld_93.jpg" /> <img src="img/xdtgg_sxd_74.jpg" /> </div> <div id="num"> <ul> <a href="#"> <li>1</li> </a> <a href="#"> <li>2</li> </a> <a href="#"> <li>3</li> </a> <a href="#"> <li>4</li> </a> <a href="#"> <li>5</li> </a> </ul> </div> </div> </section> <div class="box5"> <ul> <li> <h3>全部遊戲</h3></li> <li> <a href="#">戰爭策略</a> </li> | <li> <a href="#">體育經營</a> </li> | <li> <a href="#">社交遊戲</a> </li> </ul> <div class="box6"> <a href="#"><img src="img/img-4.jpg" /></a> <div id="box6"> <p>三國題材橫版RPG網遊，豐富的</p> <P>武將系統</P> <P>型別：角色扮演</P> <P>遊戲人氣：<span class="span">470921</span></P> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> </div> <div class="box6"> <a href="#"><img src="img/img-5.jpg" /></a> <div id="box6"> <p>一款不建主城不等CD，不佔資</p> <P>源，全程戰鬥</P> <P>型別：戰徵策略</P> <P>遊戲人氣：<span>8745221</span></P> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> </div> </div> <div class="box7"> <ul> <li> <h3>角色扮演</h3></li> </ul> <div class="div-box"> <a href="#"><img src="img/img-6.jpg" /></a> <p>遊戲人氣：1765314</p> <p>遊戲狀態：<span>22區開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-box"> <a href="#"><img src="img/img-7.jpg" /></a> <p>遊戲人氣：1245814</p> <p>遊戲狀態：<span>23區開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-box"> <a href="#"><img src="img/img-8.jpg" /></a> <p>遊戲人氣：1232158</p> <p>遊戲狀態：<span>25區開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-box"> <a href="#"><img src="img/img-9.jpg" /></a> <p>遊戲人氣：123745</p> <p>遊戲狀態：<span>18區開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-box"> <a href="#"><img src="img/img-10.jpg" /></a> <p>遊戲人氣：178501</p> <p>遊戲狀態：<span>火爆開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-aox"> <a href="#"><img src="img/img-11.jpg" /></a> <p>遊戲人氣：983014</p> <p>遊戲狀態：<span>2服開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-aox"> <a href="#"><img src="img/img-12.jpg" /></a> <p>遊戲人氣：745214</p> <p>遊戲狀態：<span>4服開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> <div class="div-aox"> <a href="#"><img src="img/img-13.jpg" /></a> <p>遊戲人氣：654814</p> <p>遊戲狀態：<span>火爆開啟</span></p> <button class="button1">選服</button> <button class="button2">進入遊戲</button> </div> </div> <div class="box4"> <h6>開心網使用者登入</h6> <span>賬號：</span><input type="text" placeholder="字母、數字的六位字元" /> <span>密碼：</span><input type="password" placeholder="四位數字" /> <button class="img2"></button> <p> <a href="#" class="a">立即註冊</a> <a href="#">忘記密碼</a> </p> </div> <div class="div-box2"> <ul class="ul"> <li> <h3>新聞公告</h3></li> </ul> <div id="ul"> <ul class="ul-box"> <li class="box-li"> <a href="#">[征戰四方] 開心首服·黃巾之亂</a> </li> <li class="box-li"> <a href="#">[龍將] 火爆8服·八門金</a> </li> <li class="box-li"> <a href="#">[彈彈堂] 41服開啟·萬人競技</a> </li> <li class="box-li"> <a href="#">[凡人修真2] 03月08日·四海帝王</a> </li> <li class="box-li"> <a href="#">[一騎當先] 開心2服上線送黃金</a> </li> <li class="box-li"> <a href="#">[宮廷計] 03月06日·西施祕史</a> </li> <li> <a href="#">[凡人修真2] 03月08日·四海帝王</a> </li> </ul> </div> </div> <div class="box-img"> <a href="#"><img src="img/ad1.jpg" width="285" /></a> </div> <div class="box-img2"> <a href="#"><img src="img/ad2.jpg" width="285" /></a> </div> <div class="box-div"> <ul> <li> <h3>遊戲視訊</h3></li> </ul> <div class="dis"> <a href="#"><img src="img/img-1.jpg" /></a> <a href="#"> <p>《航海之王》麻辣</p> <p>炫酷反穿越，英雄</p> <p>時尚大變身！</p> </a> </div> <div class="dis2"> <a><img src="img/img-2.jpg" /></a> <a href="#"> <p>《彈彈堂》吳克群</p> <p>同名激情主題MV，</p> <p>體驗修真樂趣</p> </a> </div> </div> <footer> <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 class="li"> <a href="#">幫助</a> </li> ©2017開心網 文網文[2009]157號京ICP證080482號京公網安備110000000003號 未成年人家長監護 </ul> </footer> <img src="img/ad3.jpg" class="img3" /> </body> </html>
CSS樣式:
* { margin: 0px auto; } header { width: 65%; padding-top: 8px; border-radius: 10px; background-color: #D13551; } ul { list-style-type: none; } a { text-decoration: none; } header img { margin-bottom: -12px; } header .box { display: inline-block; width: 50px; font-size: 16px; margin-left: 60px; border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 10px 35px 10px 35px; text-align: center; font-weight: bold; color: #D13551; background: white; } header ul { position: relative; top: -5px; margin-left: 550px; font-family: "微軟雅黑"; font-size: 14px; color: white; display: inline-block; } header ul li { margin-right: 5px; display: inline-block; } header ul li a { color: white; text-decoration: none; } header ul li a:hover { color: black; } section .box2 { width: 190px; height: 240px; float: left; margin-top: 35px; margin-left: 340px; border: 1px solid gray; border-radius: 5px; } section ul li { background-image: url(../img/遊戲列表灰色漸變.jpg); background-repeat: no-repeat; margin-left: -40px; line-height: 35px; } section ul li img { margin-right: 15px; margin-bottom: -3px; } section ul li span { color: gray; } section ul li:hover { background-image: url(../img/遊戲列表滑鼠移入的漸變.jpg); } .img { float: left; margin-top: 20px; margin-left: 20px; width: 726px; height: 272px; overflow: hidden; } .box3 { margin-left: 0px; width: 3630px; animation: switch 25s ease-out infinite; } .box3 img { margin-right: -4px; border-radius: 5px; } @keyframes switch { 0%, 20% { margin-left: 0px; } 25%, 45% { margin-left: -726px; } 50%, 70% { margin-left: -1452px; } 75%, 95% { margin-left: -2178px; } 100% { margin-left: 0; } } #num { position: relative; font-size: 14px; font-family: "微軟雅黑"; font-weight: 900; bottom: 35px; right: -5px; text-align: center; } #num ul { margin-right: 80px; color: white; list-style-type: none; } #num li { opacity: 0.8; width: 30px; border-radius: 5px; margin-top: -3px; margin-left: 10px; display: inline-block; text-align: center; height: 35px; background: dimgray; } #num a { text-decoration: none; color: white; } #num ul a:hover li { background: orangered; } .box4 { position: absolute; top: 55px; right: -15px; font-size: 15px; color: gray; font-weight: bold; border: 1px solid gray; border-radius: 10px; margin-right: 340px; margin-top: 35px; width: 280px; height: 240px; } h6 { font-size: 15px; color: gray; margin: 25px 0 30px 25px; } .box4 span { margin-left: 25px; } .box4 input { text-indent: 0.3em; width: 170px; border: 1px solid gray; line-height: 20px; border-radius: 2px; margin-bottom: 20px; } .img2 { background-image: url(../img/btnLogin.jpg); background-repeat: no-repeat; border: none; cursor: pointer; width: 63px; height: 24px; margin-left: 110px; } .box4 p a { text-decoration: none; position: relative; bottom: -12px; margin-left: 55px; font-size: 14px; font-weight: 500; } .box5 { margin-left: 340px; border-radius: 5px; width: 935px; height: 290px; border: 1px solid gray; margin-top: 320px; } .box5 ul { border-radius: 5px; border: 1px solid #E4E4E4; width: 893px; display: inline-block; background: #F4F4F3; } .box5 h3 { margin-left: -40px; margin-right: 25px; font-family: "微軟雅黑"; font-size: 16px; color: #D13551; } .box5 li { margin-left: 10px; margin-right: 10px; line-height: 35px; display: inline-block; } .box5 a { color: gray; } .box5 a:hover { color: orangered; } .box6 { display: inline-block; border-radius: 8px; margin-left: 60px; margin-top: 25px; margin-right: -45px; width: 400px; height: 180px; font-size: 13px; border: 1px solid gray; } .box6 img { margin: 25px 0 0 10px; } #box6 { float: right; margin-top: 20px; } p { margin-bottom: 10px; margin-right: 12px; } .span { color: #D13551; font-weight: bold; } .button1 { cursor: pointer; border: 1px solid gray; background: white; margin-top: 5px; width: 50px; height: 25px; border-radius: 5px; } .button1:hover { background: orangered; } .button2 { border: 1px solid #34679A; color: white; background-color: #4E8AB0; margin-top: 5px; height: 25px; border-radius: 5px; } .button2:hover { cursor: pointer; background: orange; } .box7 { width: 935px; border: 1px solid gray; border-radius: 5px; margin-top: 20px; margin-left: 340px; } .box7 ul { border-radius: 5px; border: 1px solid #E4E4E4; width: 893px; display: inline-block; background: #F4F4F3; } .box7 li { margin-left: 10px; margin-right: 10px; line-height: 35px; display: inline-block; } .box7 h3 { margin-left: -40px; margin-right: 25px; font-family: "微軟雅黑"; font-size: 16px; color: #D13551; } .div-box { display: inline-block; font-size: 14px; font-family: "微軟雅黑"; margin-left: 70px; margin-top: 20px; margin-bottom: 20px; } .div-aox { display: inline-block; font-size: 14px; margin-right: 3px; font-family: "微軟雅黑"; margin-left: 75px; margin-top: 20px; margin-bottom: 20px; } .div-aox span { font-size: 13px; color: #d13551; } .div-aox p { margin-top: 3px; margin-bottom: 3px; } .box7 img{ transition: all 0.5s; } .box7 a:hover img{ transform: translate(-8px,0); } .div-box p { margin-top: 3px; margin-bottom: 3px; } .div-box span { font-size: 13px; color: #d13551; } .div-box2 { position: absolute; width: 280px; top: 375px; right: 325px; border-radius: 5px; border: 1px solid gray; } .div-box2 .ul { border-radius: 5px; border: 1px solid #E4E4E4; width: 238px; display: inline-block; background: #F4F4F3; } .div-box2 .ul li { margin-left: 10px; margin-right: 10px; line-height: 35px; display: inline-block; } .div-box2 h3 { margin-left: -40px; margin-right: 25px; font-family: "微軟雅黑"; font-size: 16px; color: #D13551; } .ul-box { font-size: 12px; } .box-li { border-bottom: 1px dashed; } .ul-box li { transition: all 0.3s; line-height: 35px; background: url(../img/rightTwo.png)0 15px no-repeat; width: 260px; text-indent: 3.5em; margin-left: -30px; } .ul-box li:hover { transform: translate(0,4px) scale(1.1); } .ul-box a:hover { color: red; } .ul-box a { text-decoration: none; color: gray; } a img{ transition: all 0.5s; } a:hover img { transform: translate(-10px,0); } .box-img{ float: right; position: relative; top: -440px; left: -325px; } .box-img2{ float: right; position: relative; top: -345px; left: -40px; } .box-div{ border: 1px solid gray; position: relative; top: -255px; right: -485px; border-radius: 5px; width: 280px; } .box-div ul { border-radius: 5px; border: 1px solid #E4E4E4; width: 238px; display: inline-block; background: #F4F4F3; } .box-div li { margin-left: 10px; margin-right: 10px; line-height: 35px; display: inline-block; } .box-div h3 { margin-left: -40px; margin-right: 25px; font-family: "微軟雅黑"; font-size: 16px; color: #D13551; } .dis{ padding: 10px 0 8px 8px; font-size: 14px; border-bottom: 1px dashed gray; height: 90px; } .box-div p{ color: #3267A8; position: relative; top: -85px; right: -140px; } .dis2{ padding: 10px 0 8px 8px; font-size: 14px; height: 90px; } .dis img{ transition: all 0.5s; } footer{ font-size: 15px; margin-top: -225px; margin-right: 360px; float: right; color: gray; font-family: "微軟雅黑"; } footer li{ color: #6EAFE8; margin-right: 10px; display: inline-block; } .li{ margin-right: 100px; } .img3{ display: block; left: 794px; position: relative; top: -1200px; z-index: 10; animation: lyar 6s ease-out; } @keyframes lyar{ 0%{ transform: translate(0px); } 50%{ transform: translate(-900px,600px); } }