作业一学期三书十章

body,div,ul,li,h3，from{    padding: 0;    margin: 0;}li{    list-style: none;}a{    text-decoration: none;}a:hover{    text-decoration: none;}.whole{    width: 1000px;    margin: 0 auto;    height: 1000px;    position: relative;}.onewhole{    background: linear-gradient(to bottom,#a70532,#bb131a);    height: 50px;    width: 100%;    position: relative;    border: 1px #bb131a solid;    border-radius: 10px;    margin-bottom: 20px;}.onewhole div{    background: url("../Semester1book3DJ10/gameLogo.png") no-repeat;    height: 100%;    width: 100%;    position: absolute;    bottom: -5px;}.onewhole div h3{    position: absolute;    left: 27%;    top: -13px;    background: url("../Semester1book3DJ10/btn-01.gif")  no-repeat;    width: 100%;    height: 100%;}.onewhole div h3 a{    text-decoration: none;    color: red;    font-size: 14px;    position: absolute;    bottom: 20px;    left: 35px;}.onewhole ul{    position: absolute;    width: 100%;    height: 30px;    line-height: 30px;    padding-left: 10px;    left: 800px;    top: 10px;}.onewhole ul li{    float: left;    border-right: 1px #fff solid;}.onewhole ul li a{    color: #fff;    font-size: 12px;    padding-left: 10px;    margin-right: 10px;}.onewhole ul li:last-of-type{    border-right: 0 #fff solid;}.twowhole{    width: 750px;    height: 220px;    position: relative;    margin-bottom: 20px;}.two{    width: 192px;    border: 1px #999 solid;    border-radius: 10px;    height: 210px;    line-height: 30px;    position: relative;}.two li{    background: url("../Semester1book3DJ10/游戏列表灰色渐变.jpg");}.two li a{    color: black;    font-size: 14px;}.two li:hover{    background: url("../Semester1book3DJ10/游戏列表鼠标移入的渐变.jpg");}.three{    width: 650px;    height: 210px;}.three img{    position: absolute;    right: -90px;    top: -30px;    border: 1px orange solid;    border-radius: 10px;    transform: scale(0.75);}.three ul{    position: absolute;    left: 600px;    bottom: 20px;}.three ul li{    float: left;    border-radius: 50%;    border: 3px #C8ECE3 solid;    background-color: #C8ECE3;    margin-right: 10px;}.three ul li:first-of-type{    border-radius: 50%;    border: 3px #bb131a solid;    background-color: #bb131a;}.three ul li a{    color: black;}.threewhole{    width: 750px;    position: relative;    height: 220px;    border: 1px #999 solid;    border-radius: 10px;    margin-bottom: 20px;}.four{    width: 100%;    height: 28px;    border-bottom: 1px #999 solid;    background: url("../Semester1book3DJ10/titleBg.jpg") repeat;}.four h3{    position: absolute;    color: #b81a15;    font-size: 14px;    top: -10px;    left: 5px;}.four ul{    position: absolute;    left: 100px;    top: 3px;}.four ul li{    float: left;    padding-right: 10px;    margin-left: 10px;    border-right: 1px #999 solid;}.four ul li:last-of-type{    border: 0;}.four ul li a{    color: #999;    font-size: 14px;}.five{    width: 350px;    height: 150px;    border: 1px #999 solid;    border-radius: 10px;    position: absolute;    left: 10px;    bottom: 20px;}.five img{    position: absolute;    left: 3px;    bottom: 10px;    transform: scale(0.9);}.five img:hover{    transition: 0.8s;    left: -10px;}.five ul{    position: absolute;    right: 0;    bottom: 5px;}.five ul li{    font-size: 12px;    margin-bottom: 10px;}.five ul li span{    color: red;}.five ul li a:nth-of-type(1){    background: #fff;    border: 1px #999 solid;    padding: 5px 10px;    border-radius: 5px;    color: black;}.five ul li a:nth-of-type(2){    background: blue;    border: 1px blue solid;    padding: 5px 10px;    border-radius: 5px;    color: white;}.six{    width: 350px;    height: 150px;    border: 1px #999 solid;    border-radius: 10px;    position: absolute;    right: 10px;    bottom: 20px;}.six img{    position: absolute;    left: 3px;    bottom: 10px;    transform: scale(0.9);}.six img:hover{    transition: all 0.5s linear;    left: -10px;}.six ul{    position: absolute;    right: 0;    bottom: 5px;}.six ul li{    font-size: 12px;    margin-bottom: 10px;}.six ul li span{    color: red;}.six ul li a:nth-of-type(1){    background: #fff;    border: 1px #999 solid;    padding: 5px 10px;    border-radius: 5px;    color: black;}.six ul li a:nth-of-type(2){    background: blue;    border: 1px blue solid;    padding: 5px 10px;    border-radius: 5px;    color: white;}.fourwhole{    width: 750px;    position: relative;    height: 500px;    border: 1px #999 solid;    border-radius: 10px;}.seven{    width: 100%;    height: 28px;    border-bottom: 1px #999 solid;    background: url("../Semester1book3DJ10/titleBg.jpg") repeat;}.seven h3{    position: absolute;    color: #b81a15;    font-size: 14px;    top: -10px;    left: 5px;}.eight{    padding: 10px;    text-align: center;}.eight div{    height: 200px;    width: 175px;}.eight div:nth-of-type(1) img{    position: absolute;    top: 58px;    left: 40px;    transition: all 0.5s linear;}.eight div:nth-of-type(1) img:hover{    position: absolute;    top: 58px;    left: 20px;    transform: translate(0,0);}.eight div:nth-of-type(2) img{    position: absolute;    top: 58px;    left: 215px;    transition: all 0.5s linear;}.eight div:nth-of-type(2) img:hover{    position: absolute;    top: 58px;    left: 195px;    transform: translate(0,0);}.eight div:nth-of-type(3) img{    position: absolute;    top: 58px;    right: 215px;    transition: all 0.5s linear;}.eight div:nth-of-type(3) img:hover{    position: absolute;    top: 58px;    right: 235px;    transform: translate(0,0);}.eight div:nth-of-type(4) img{    position: absolute;    top: 58px;    right: 40px;    transition: all 0.5s linear;}.eight div:nth-of-type(4) img:hover{    position: absolute;    top: 58px;    right: 60px;    transform: translate(0,0);}.eight div:nth-of-type(5) img{    position: absolute;    bottom: 150px;    left: 40px;    transition: all 0.5s linear;}.eight div:nth-of-type(5) img:hover{    position: absolute;    bottom: 150px;    left: 20px;    transform: translate(0,0);}.eight div:nth-of-type(6) img{    position: absolute;    bottom: 150px;    left: 215px;    transition: all 0.5s linear;}.eight div:nth-of-type(6) img:hover{    position: absolute;    bottom: 150px;    left: 195px;    transform: translate(0,0);}.eight div:nth-of-type(7) img{    position: absolute;    bottom: 150px;    right: 215px;    transition: all 0.5s linear;}.eight div:nth-of-type(7) img:hover{    position: absolute;    bottom: 150px;    right: 235px;    transform: translate(0,0);}.eight div:nth-of-type(8) img{    position: absolute;    right: 40px;    bottom: 150px;    transition: all 0.5s linear;}.eight div:nth-of-type(8) img:hover{    position: absolute;    bottom: 150px;    right: 60px;    transform: translate(0,0);}.eight div:nth-of-type(1) ul{    position: absolute;    top: 160px;    left: 45px;}.eight div:nth-of-type(2) ul{    position: absolute;    top: 160px;    left: 220px;}.eight div:nth-of-type(3) ul{    position: absolute;    top: 160px;    right: 220px;}.eight div:nth-of-type(4) ul{    position: absolute;    top: 160px;    right: 45px;}.eight div:nth-of-type(5) ul{    position: absolute;    bottom: 50px;    left: 45px;}.eight div:nth-of-type(6) ul{    position: absolute;    bottom: 50px;    left: 220px;}.eight div:nth-of-type(7) ul{    position: absolute;    bottom: 50px;    right: 220px;}.eight div:nth-of-type(8) ul{    position: absolute;    right: 45px;    bottom: 50px;}.eight div ul li{    font-size: 12px;    margin-bottom: 10px;}.eight div ul li span{    color: red;}.eight div ul li a:nth-of-type(1){    background: #fff;    border: 1px #999 solid;    padding: 5px 10px;    border-radius: 5px;    color: black;}.eight div ul li a:hover:nth-of-type(1){    color: violet;}.eight div ul li a:nth-of-type(2){    background: blue;    border: 1px blue solid;    padding: 5px 10px;    border-radius: 5px;    color: white;}.eight div ul li a:hover:nth-of-type(2){    color: violet;}.fivewhole{    width: 240px;    height: 220px;    border: 1px #999 solid;    border-radius: 10px;    position: absolute;    top: 70px;    right: 0;    background: #ffddfc;}.fivewhole h3{    color: #999;    font-size: 14px;    margin-left: 20px;    padding-top: 5px;    padding-bottom: 5px;}.fivewhole li{    margin-bottom: 20px;}.fivewhole li:nth-of-type(1){    font-size: 14px;    margin-left: 20px;}.fivewhole li:nth-of-type(2){    font-size: 14px;    margin-left: 20px;}.fivewhole li:nth-of-type(3){    padding-left: 100px;}.fivewhole li:nth-of-type(3) input{    width: 60px;    background: url("../Semester1book3DJ10/btnLogin.jpg");    height: 25px;}.fivewhole li:nth-of-type(4){    margin-left: 60px;}.fivewhole li:nth-of-type(4) a{    color: blue;    font-size: 14px;}.fivewhole li:nth-of-type(4) a:hover{    text-decoration: underline;}.sixwhole{    width: 240px;    height: 220px;    border: 1px #999 solid;    border-radius: 10px;    position: absolute;    right: 0;    top: 310px;}.nine li{    margin: 0 20px;    height: 19px;    padding:4px 0;    border-bottom: 1px #999 dashed;}.nine li:last-of-type{    border: 0;}.nine li a{    background: url("../Semester1book3DJ10/rightTwo.png") no-repeat;    font-size: 12px;    padding-left: 30px;    color: #999;}.nine li:hover{    transition: 0.5s;    -webkit-transition: 0.5s;    -moz-transition: 0.5s;    -o-transition: 0.5s;    transform: scale(1.2);    -webkit-transform: scale(1.2);    -moz-transform: scale(1.2);    -o-transform: scale(1.2);}.sevenwhole{    width: 240px;    height: 220px;    position: absolute;    right: 40px;    top: 550px;}.sevenwhole img{    transform: scale(0.75);}.eightwhole{    width: 240px;    height: 325px;    border: 1px #999 solid;    border-radius: 10px;    position: absolute;    right: 0;    top: 730px;    overflow: hidden;}.ten ul{    margin: 0 5px;}.ten li{    padding: 5px;    height: 120px;    border-bottom: 1px #999 dashed;    margin-top: 20px;}.ten li div:nth-of-type(1){    padding-left: 5px;    height: 100%;    width: 50%;    position: absolute;    left: 0;}.ten li div:nth-of-type(2){    height: 100%;    width: 50%;    position: absolute;    right: -18px;    margin-top: 10px;}.ten li div:nth-of-type(2) a{    font-size: 12px;}.ninewhoie{    position: absolute;    width: 100%;    height: 30px;    margin-top: 50px;}.ninewhoie ul:nth-of-type(1){    position: absolute;    left: 0;}.ninewhoie ul:nth-of-type(2){    position: absolute;    right: 0;}.ninewhoie ul li{    float: left;    padding-left: 10px;    font-size: 12px;}.ninewhoie ul li a{    font-size: 12px;}.tenwhole img{    transform: scale(0.7);    position: absolute;    right: -47px;    top: -43px;    animation:one 3s ease-in-out;    -o-animation:one 3s ease-in-out;    -moz-animation:one 3s ease-in-out;    -webkit-animation:one 3s ease-in-out;}.tenwhole img{    transform: scale(0.7);    position: absolute;    right: -47px;    top: 300px;}@-o-keyframes one {    0%{right: -47px;        top: -43px;}    50%{right: 750px;        top: 700px;}    100%{right: -47px;        top: 300px;}}@-moz-keyframes one {    0%{right: -47px;        top: -43px;}    50%{right: 750px;        top: 700px;}    100%{right: -47px;        top: 300px;}}@-webkit-keyframes one {    0%{right: -47px;        top: -43px;}    50%{right: 750px;        top: 700px;}    100%{right: -47px;        top: 300px;}}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>开心网-网页游戏</title>    <link rel="stylesheet" type="text/css" href="DJ10.css"></head><body><div class="whole">    <div class="onewhole">        <div>            <h3><a href="#">首页</a></h3>        </div>        <ul>            <li><a href="#">注册</a></li>            <li><a href="#">登录</a></li>            <li><a href="#">帮助</a></li>            <li><a href="#">更多</a></li>        </ul>    </div>    <div class="twowhole">        <div class="two">            <ul>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-2.gif">&nbsp;&nbsp;征战四方</a>                </li>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-3.gif">&nbsp;&nbsp;龙将</a>                </li>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-4.gif">&nbsp;&nbsp;弹弹堂</a>                </li>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-5.gif">&nbsp;&nbsp;凡人修仙2</a>                </li>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-6.gif">&nbsp;&nbsp;一骑当千</a>                </li>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-7.gif">&nbsp;&nbsp;宫廷计</a>                </li>                <li>                    <a href="#">&nbsp;&nbsp;<img src="sub-8.gif">&nbsp;&nbsp;神仙道</a>                </li>            </ul>        </div>        <div class="three">            <img src="xdtgg_frxz2_44.jpg">            <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>    <div class="threewhole">        <div class="four">            <h3>全部游戏</h3>            <ul>                <li><a href="#">战争策略</a></li>                <li><a href="#">体育经营</a></li>                <li><a href="#">社交游戏</a></li>            </ul>        </div>        <div class="five">            <img src="img-4.jpg">            <ul>                <li>三国题材横版RPG网游，丰富的</li>                <li>武将系统</li>                <li>类型：角色扮演</li>                <li>游戏人气：<span>470921</span></li>                <li>                    <a href="#">选服</a>                    <a href="#">进入游戏</a>                </li>            </ul>        </div>        <div class="six">            <img src="img-5.jpg">            <ul>                <li>一款不建主城不等CD，不占资</li>                <li>源，全程战斗</li>                <li>类型：战征策略</li>                <li>游戏人气：<span>8745221</span></li>                <li>                    <a href="#">选服</a>                    <a href="#">进入游戏</a>                </li>            </ul>        </div>    </div>    <div class="fourwhole">        <div class="four">            <h3>角色扮演</h3>        </div>        <div class="eight">            <div>                <img src="img-6.jpg">                <ul>                    <li>游戏人气：1765314</li>                    <li>游戏状态：<span>22区开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-7.jpg">                <ul>                    <li>游戏人气：1245814</li>                    <li>游戏状态：<span>23区开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-8.jpg">                <ul>                    <li>游戏人气：1232158</li>                    <li>游戏状态：<span>25区开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-9.jpg">                <ul>                    <li>游戏人气：123745</li>                    <li>游戏状态：<span>18区开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-10.jpg">                <ul>                    <li>游戏人气：178501</li>                    <li>游戏状态：<span>火爆开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-11.jpg">                <ul>                    <li>游戏人气：983014</li>                    <li>游戏状态：<span>2区开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-12.jpg">                <ul>                    <li>游戏人气：745214</li>                    <li>游戏状态：<span>4区开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>            <div>                <img src="img-13.jpg">                <ul>                    <li>游戏人气：745214</li>                    <li>游戏状态：<span>火爆开启</span></li>                    <li>                        <a href="#">选服</a>                        <a href="#">进入游戏</a>                    </li>                </ul>            </div>        </div>    </div>    <div class="fivewhole">        <h3>开心网用户登录</h3>        <form>            <ul>                <li>账号：<input type="text" placeholder="  字母、数字的六位字符" required/></li>                <li>密码：<input type="password" placeholder="  四位数字" required/></li>                <li><input type="submit" value=""/></li>                <li>                    <a href="#">立即注册</a>&nbsp;&nbsp;&nbsp;&nbsp;                    <a href="#">忘记密码</a>                </li>            </ul>        </form>    </div>    <div class="sixwhole">        <div class="seven">            <h3>新闻广告</h3>        </div>        <div class="nine">            <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>    <div class="sevenwhole">        <img src="ad1.jpg">        <img src="ad2.jpg">    </div>    <div class="eightwhole">        <div class="seven">            <h3>游戏视频</h3>        </div>        <div class="ten">            <ul>                <li>                    <div><img src="img-1.jpg"></div>                    <div><a href="#">《航海之王》麻辣<br/>炫酷反穿越，英雄<br/>时尚大变身！</a></div>                </li>                <li>                    <div><img src="img-2.jpg"></div>                    <div><a href="#">《弹弹堂》吴克群<br/>同名激情主题MV，<br/>体验修真乐趣</a></div>                </li>            </ul>        </div>    </div>    <div class="ninewhoie">        <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>        </ul>        <ul>            <li>@2017开心网</li>            <li>文网文[2009]157号</li>            <li>京ICP证080482号</li>            <li>京公网安备110000000003号 未成年人家长监护</li>        </ul>    </div></div><div class="tenwhole">    <img src="ad3.jpg"></div></body></html>