zoukankan      html  css  js  c++  java

  • 英雄联盟界面

    周六周日两天时间忙着做了一个仿英雄联盟界面的网站，熟练掌握了 anation的用法，hover的用法，还有ul和li的用法 

    li中 list-style none的用法，超链接 text-decraction 的用法 做网页 大部分用的都是div 就是下拉框还不太会做，

    做出了下拉框 但是不会忘上面加字，这就比较难受了，还有轮播台 也不太会 ，就是那种 点一下下面的字体，上面就出现对应字体的图片

    这个功能还是没有实现，后序，得在这方面努力一下，，然后动态web也不太会。还得努力。

     源代码：图片可以自己网上找：

    <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>英雄联盟官网</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .head {
                width: 1349px;
                height: 90px;
                background: black;
                position: relative;
            }
            
            .head-logo {
                width: 190px;
                height: 90px;
                background: red;
                margin-left: 50px;
                background: url(img/u=1585137997,543802177&fm=26&gp=0.jpg);
                background-size: 100% 100%;
            }
            
            .head p {
                font-family: "楷体";
                font-size: 20px;
                color: white;
            }
            
            .head p span {
                font-family: "微软雅黑";
                font-size: 12px;
                color: whitesmoke;
            }
            
            .head-1 {
                width: 120px;
                height: 90px;
                background: black;
                margin-left: 240px;
                margin-top: -90px;
                position: absolute;
                float: left;
            }
            /*.head-1-text{
                 120px;
                height: 90px;
                background: red;
                opacity: 1;
            }*/
            
            .head-1:hover
            /*.head-1-text*/
            
            {
                width: 120px;
                height: 350px;
                background: black;
                /*opacity: 0.5;*/
                position: absolute;
                /*text-align: justify;*/
            }
            
            .head-2 {
                width: 120px;
                height: 90px;
                background: black;
                margin-left: 360px;
                margin-top: -90px;
                position: absolute;
                float: left;
            }
            
            .head-2:hover {
                width: 120px;
                height: 350px;
                background: black;
                /*margin-top: 100px;*/
                /*margin-left: ;*/
                position: absolute;
            }
            
            .head-3 {
                width: 120px;
                height: 90px;
                background: black;
                margin-left: 480px;
                margin-top: -90px;
                position: absolute;
                float: left;
            }
            
            .head-3:hover {
                width: 120px;
                height: 350px;
                background: black;
                /*margin-top: 100px;*/
                /*margin-left: ;*/
                position: absolute;
            }
            
            .head-4 {
                width: 120px;
                height: 90px;
                background: black;
                margin-left: 600px;
                margin-top: -90px;
                position: absolute;
                float: left;
            }
            
            .head-4:hover {
                width: 120px;
                height: 350px;
                background: black;
                /*margin-top: 100px;*/
                /*margin-left: ;*/
                position: absolute;
            }
            
            .head-5 {
                width: 120px;
                height: 90px;
                background: black;
                margin-left: 720px;
                margin-top: -90px;
                position: absolute;
                float: left;
            }
            
            .head-5:hover {
                width: 120px;
                height: 350px;
                background: black;
                /*margin-top: 100px;*/
                /*margin-left: ;*/
                position: absolute;
            }
            
            .head-logo-1 {
                width: 40px;
                height: 90px;
                background: black;
                margin-top: -90px;
                margin-left: 840px;
                position: absolute;
            }
            
            .head-logo-2 {
                width: 40px;
                height: 90px;
                background: black;
                margin-top: -90px;
                margin-left: 880px;
                position: absolute;
            }
            
            .head-right-1 {
                width: 100px;
                height: 90px;
                background: black;
                margin-top: -90px;
                margin-left: 920px;
                position: absolute;
                float: left;
            }
            
            .head-right-2 {
                width: 250px;
                height: 90px;
                background: black;
                margin-top: -90px;
                margin-left: 1020px;
                position: absolute;
                float: left;
            }
            
            .head-right-2:hover {
                width: 250px;
                height: 350px;
                background: black;
                /*margin-top: 100px;*/
                /*margin-left: ;*/
                position: absolute;
            }
            
            .bg {
                width: 1349px;
                height: 440px;
                /*background: url(img/201808241008335b7f71c57db89.png);
            background-size:100%;*/
            }
            
            .menu {
                width 1349px;
                height: 82px;
                background: white;
            }
            
            .menu li a {
                text-decoration: none;
            }
            
            .menu li a:hover {
                color: gold;
            }
            
            .menu li {
                list-style: none;
                font-family: "微软雅黑";
                font-size: 20px;
                color: black;
                margin-left: 35px;
                margin-top: 25px;
            }
            
            .menu li:hover {
                color: gold;
            }
            
            .content-inner {
                width: 1349px;
                height: 1628px;
                background: white;
            }
            
            .content-inner-shang {
                width: 1240px;
                height: 400px;
                background: white;
                margin-left: 55px;
            }
            
            .content-inner-shang-left {
                width: 820px;
                height: 350px;
                animation: bian 10s linear infinite 2s;
                background: url(img/61e92d0df3d71e254426cb30468f666e.jpg);
                background-size: 100% 100%;
                /*position: relative;*/
            }
            
            @keyframes bian {
                20% {
                    width: 820px;
                    height: 350px;
                    background: url(img/7046437a7a5d53784819a74a4127d101.jpg);
                    background-size: 100% 100%;
                }
                40% {
                    width: 820px;
                    height: 350px;
                    background: url(img/5ff1d87eb36d068ca077aec4037e56bf.jpg);
                    background-size: 100% 100%;
                }
                60% {
                    width: 820px;
                    height: 350px;
                    background: url(img/78956c643ce17a9b8a692ac8e0d7d5f8.jpg)r;
                    background-size: 100% 100%;
                }
                80% {
                    width: 820px;
                    height: 350px;
                    background: url(img/f2ca54699876ecab175ce7cbee979098.jpg);
                    background-size: 100% 100%;
                }
                10% {
                    width: 820px;
                    height: 350px;
                    background: url(img/61e92d0df3d71e254426cb30468f666e.jpg);
                    background-size: 100% 100%;
                }
            }
            
            .content-inner-shang-left-1 {
                width: 164px;
                height: 50px;
                background: black;
            }
            
            .content-inner-shang-left-2 {
                width: 164px;
                height: 50px;
                background: black;
                margin-top: -50px;
                margin-left: 164px;
            }
            
            .content-inner-shang-left-3 {
                width: 164px;
                height: 50px;
                background: black;
                margin-top: -50px;
                margin-left: 328px;
            }
            
            .content-inner-shang-left-4 {
                width: 164px;
                height: 50px;
                background: black;
                margin-top: -50px;
                margin-left: 492px;
            }
            
            .content-inner-shang-left-5 {
                width: 164px;
                height: 50px;
                background: black;
                margin-top: -50px;
                margin-left: 656px;
            }
            
            .content-inner-shang-right {
                width: 400px;
                height: 400px;
                background: white;
                float: right;
                margin-top: -400px;
            }
            
            .content-inner-shang-right-top {
                width: 400px;
                height: 150px;
                background: lightskyblue;
            }
            
            .content-inner-shang-right-bottom {
                width: 400px;
                height: 235px;
                background: white;
                margin-top: 15px;
            }
            
            .content-inner-shang-right-bottom li {
                list-style: none;
                /*float: left;*/
            }
            
            .content-inner-shang-right-bottom a {
                text-decoration: none;
            }
            
            .content-inner-shang-right-bottom-menu {
                width: 130px;
                height: 55px;
            }
            
            .content-inner-shang-right-bottom-menu-2 {
                width: 130px;
                height: 55px;
                margin-left: 130px;
                margin-top: -55px;
            }
            
            .content-inner-shang-right-bottom-menu-3 {
                width: 130px;
                height: 55px;
                margin-left: 260px;
                margin-top: -55px;
            }
            
            .icon-1 {
                width: 30px;
                height: 30px;
                margin-left: 2px;
                /*background: url(img/导航.png)*/
            }
            
            .icon-2 {
                width: 30px;
                height: 30px;
            }
            
            .kongbai {
                width: 1240px;
                height: 55px;
                background: white;
            }
            
            .zhongjian {
                width: 820px;
                height: 655px;
                background: white;
            }
            
            .zhongjian-head {
                width: 820px;
                height: 55px;
                background: whitesmoke;
            }
            
            .zhongjian-head li {
                list-style: none;
                float: left;
                align-items: center;
                margin-left: 0px;
                margin-top: -24px;
            }
            
            .tab-title {
                width: 104px;
                height: 39px;
                font-family: "楷体";
                font-size: 24px;
            }
            
            .tab-nav-1 {
                width: 169px;
                height: 39px;
                margin-left: 135px;
                margin-top: -45px;
            }
            
            .tab-nav-2 {
                width: 169px;
                height: 39px;
                margin-left: 135px;
                margin-top: -45px;
            }
            
            .tab-nav-3 {
                width: 169px;
                height: 39px;
                margin-left: 135px;
                margin-top: -45px;
            }
            
            .tab-nav-4 {
                width: 169px;
                height: 39px;
                margin-left: 135px;
                margin-top: -45px;
            }
            
            .news-nav {
                font-family: "微软雅黑";
                font-size: 20px;
                align-items: center;
            }
            
            .zhongjian-left {
                width: 820px;
                height: 578px;
                background: whitesmoke;
                margin-top: 22px;
                position: relative;
            }
            
            .zhongjian-left-logo {
                width: 210px;
                height: 124px;
                position: absolute;
                background: white;
            }
            
            .biaoti {
                width: 600px;
                height: 50px;
                background: white;
                margin-left: 210px;
                margin-top: -129px;
            }
            
            .nenrong {
                width: 600px;
                height: 60px;
                background: white;
                margin-left: 210px;
            }
            
            .xinwen {
                width: 820px;
                height: 454px;
                background: white;
                margin-top: 124px;
                position: absolute;
            }
            
            .xinwen li {
                list-style: none;
            }
            
            .xinwenziti {
                font-size: 21px;
            }
            
            .xinwen li:hover {
                color: gold;
            }
            
            .zhongjian-right {
                width: 420px;
                height: 655px;
                background: white;
                margin-top: -710px;
                margin-left: 820px;
            }
            
            .zhongjian-right-biaoti li {
                list-style: none;
                float: left;
                align-items: center;
                margin-top: -24px;
            }
            
            .zhongjian-right-news {
                width: 104px;
                height: 39px;
                font-family: "楷体";
                font-size: 22px;
            }
            
            .news-tab-nav-1 {
                width: 140px;
                height: 39px;
                /*margin-left: 140px;*/
                margin-top: -45px;
            }
            
            .news-tab-nav-2 {
                width: 140px;
                height: 39px;
                margin-top: -45px;
            }
            
            .news-tab-nav-3 {
                width: 140px;
                height: 39px;
            }
            
            .body-tupian-1 {
                width: 210px;
                height: 370px;
                background: white;
                margin-top: 55px;
            }
            
            .body-tupian-2 {
                width: 210px;
                height: 370px;
                background: white;
                margin-top: -316px;
                margin-left: 210px;
            }
            
            .body-tupian-3 {
                width: 210px;
                height: 370px;
                background: white;
                margin-top: -370px;
            }
            
            .weiba {
                width: 420px;
                height: 70px;
                background: white;
                margin-top: 55px;
                float: left;
            }
            
            .wenxintishi {
                width: 405px;
                height: 75px;
                background: white;
                margin-top: 142px;
            }
            
            .shipin {
                width: 1240px;
                height: 323px;
                background: white;
                /*position: relative;*/
            }
            
            .shipin-title {
                width: 1240px;
                height: 53px;
                background: white;
                margin-top: 50px;
            }
            
            .shipin-title li {
                list-style: none;
                float: left;
            }
            
            .shipin-1 {
                font-family: "楷体";
                font-size: 32px;
            }
            
            .shipin-2 {
                font-family: "新宋体";
                font-size: 28px;
                margin-left: 50px;
            }
            
            .tupian-1 {
                width: 300px;
                height: 240px;
                background: white;
                float: left;
            }
            
            .tupian-2 {
                width: 300px;
                height: 240px;
                background: white;
                float: left;
            }
            
            .tupian-3 {
                width: 300px;
                height: 240px;
                background: white;
                margin-left: 600px;
                margin-top: -240px;
                float: left;
            }
            
            .tupian-4 {
                width: 300px;
                height: 240px;
                background: white;
                margin-left: 900px;
            }
            
            .tail {
                width: 1349px;
                height: 224px;
                background: black;
                margin-top: 1053px;
            }
            
            .tail li {
                list-style: none;
                color: white;
                float: left;
                margin-top: 40px;
                font-size: 12px;
            }
            
            .tail p {
                color: white;
            }
            
            .tail-right {
                width: 800px;
                height: 224px;
                background: black;
                float: right;
                margin-top: -167px;
            }
            
            .zuidibu-1 {
                margin-top: 65px;
                font-size: 12px;
            }
            
            .zuidibu-2 {
                margin-top: 5px;
                font-size: 11px;
            }
            
            .zuidibu-3 {
                margin-top: 5px;
                font-size: 11px;
            }
            
            .zuidibu-4 {
                margin-top: 5px;
                font-size: 11px;
            }
            
            .zuidibu-5 {
                margin-top: 5px;
                font-size: 11px;
            }
            
            .zuidibu-6 {
                margin-top: 5px;
                font-size: 11px;
            }
        </style>
    </head>

    <body>
        <div class="head">
            <div class="head-logo"></div>
            <div class="head-1">
                <p style="margin-top: 18px;margin-left: 20px;">游戏资料<br><span style="margin-left: 6px;">GAME INFO</span></p>
                <!--<div class="head-1-text">fuck you</div>-->
            </div>
            <div class="head-2">
                <p style="margin-top: 18px;margin-left: 20px;">商城/合作<br><span style="margin-left: 20px;">STORE</span></p>
            </div>
            <div class="head-3">
                <p style="margin-top: 18px;margin-left: 20px;">用户互动<br><span style="margin-left: 6px;">COMMUITY</span></p>
            </div>
            <div class="head-4">
                <p style="margin-top: 18px;margin-left: 20px;">赛事中心<br><span style="margin-left: 16px;">EVENTS</span></p>
            </div>
            <div class="head-5">
                <p style="margin-top: 18px;margin-left: 20px;">自助系统<br><span style="margin-left: 16px;">SYSTEM</span></p>
            </div>
            <div class="head-logo-1"><img src="img/橙色搜索.png" width="40px" height="40px" style="margin-top: 25px;"></div>
            <div class="head-logo-2"><img src="img/金色手机.png" width="40px" height="40px" style="margin-top: 25px;"></div>
            <div class="head-right-1"><img src="img/default(1).png" width="74px" height="74px" style="margin-top: 8px;margin-left: 13px;"></div>
            <div class="head-right-2">
                <p style="margin-top: 18px;margin-left: 20px;">亲爱的召唤师，欢迎
                    <a href="#">登录</a><br><span style="margin-left: 6px;">登录后查看自己的资产、战绩等</span></p>
            </div>
        </div>
        <div class="bg"><img src="img/-39t2Q5-g7i1Z1mT3cS1hc-u0.jpg" width="1349px" height="440px"></div>
        <div class="menu">
            <ul>
                <li style="float: left;">
                    <a href="http://www.lol.com">综合资讯</a>
                </li>
                <li style="float: left;">视频中心</li>
                <li style="float: left;">赛事中心</li>
                <li style="float: left;">活动中心</li>
            </ul>
        </div>
        <div class="content-inner">
            <div class="content-inner-shang">
                <div class="content-inner-shang-left"></div>
                <div class="content-inner-shang-left-1">
                    <p align="center" style="color: white;">星宫之礼</p>
                </div>
                <div class="content-inner-shang-left-2">
                    <p align="center" style="color: white;">星界2018限定皮肤</p>
                </div>
                <div class="content-inner-shang-left-3">
                    <p align="center" style="color: white;">泳池派对限时售卖</p>
                </div>
                <div class="content-inner-shang-left-4">
                    <p align="center" style="color: white;">8月24日赛程预告</p>
                </div>
                <div class="content-inner-shang-left-5">
                    <p align="center" style="color: white;">七周年创作大赛</p>
                </div>
                <div class="content-inner-shang-right">
                    <div class="content-inner-shang-right-top"><img src="img/2018-08-25_112851.jpg"></div>
                    <div class="content-inner-shang-right-bottom">
                        <ul class="content-inner-shang-right-bottom-menu">
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/路标.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">新手推荐</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/手机.png" style="margin-left: 20px;margin-top: 20px;"width="30px"height="30px"><span class="icon-1"style="margin-top: 10px;">新客户端</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/搜索.png" style="margin-left: 20px;margin-top: 20px;"width="30px"height="30px"><span class="icon-1"style="margin-top: 10px;">微信绑定</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/橙色搜索.png" style="margin-left: 20px;margin-top: 20px;"width="30px"height="30px"><span class="icon-1"style="margin-top: 10px;">官方微博</span></i></li>
                        </ul>
                        <ul class="content-inner-shang-right-bottom-menu-2">
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/捕蝶.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">宇宙官网</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/地图.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">峡谷之巅</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/电脑.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">游戏资料</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/帆船.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">玩家论坛</span></i></li>
                        </ul>
                        <ul class="content-inner-shang-right-bottom-menu-3">
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/加载.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">周边商城</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/书.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">玩家创作</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/相机.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">领取中心</span></i></li>
                            <li>
                                <a href="LOL.html" target="_blank"><i><img src="img/音乐.png" style="margin-left: 20px;margin-top: 20px;"><span class="icon-1"style="margin-top: 10px;">在线客服</span></i></li>
                        </ul>
                    </div>
                </div>
                <div class="kongbai"></div>
                <div class="zhongjian">
                    <div class="zhongjian-head">
                        <h3 class="tab-title">最新资讯</h3>
                        <ul>
                            <li class="tab-nav-1 news-nav" style="margin-left: 144px;">综合新闻</li>
                            <li class="tab-nav-2 news-nav">官方公告</li>
                            <li class="tab-nav-3 news-nav">赛事新闻</li>
                            <li class="tab-nav-4 news-nav">论坛资讯</li>
                        </ul>
                    </div>
                    <div class="zhongjian-left">
                        <div class="zhongjian-left-logo"><img src="img/pic-news6.jpg" </div>
                            <div class="biaoti">
                                <a>
                                    <p style="font-size: 32px;">8.16版本更新，全新的实验模式</p>
                                </a>
                            </div>
                            <div class="nenrong">
                                <a>
                                    <p style="color: grey; font-size: 13px;">lol将在8月21日凌晨开始全区停机维护(请注意：1点将关闭排位模式不会影响正在排位的比赛)，发布8.16版本，更新后会发布4.10.12版本，预计停机时间为8:00到12:00</p>
                                </a>
                            </div>
                        </div>
                        <div class="xinwen">
                            <ul class="xinwenziti">
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>8月24日免费英雄更换公告<span style="float: right;">8/22</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>峡谷之巅第三赛季专属奖励：穿星魔风 赵信<span style="float: right;">8/21</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>幸运商店限时开启！<span style="float: right;">8/21</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>实验性模式：极限闪击限时开启公告<span style="float: right;">8/21</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>部分大区延迟开服公告<span style="float: right;">8/21</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>微信登录功能开启测试<span style="float: right;">8/20</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>关于IG新选手注册申请的公告<span style="float: right;">8/17</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>情人节皮肤限时五折<span style="float: right;">8/17</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>8月27日免费英雄更换公告<span style="float: right;">8/15</span></li>
                                <li style="margin-top: 10px;"><span style="background: gray;">新闻&nbsp;&nbsp;&nbsp;&nbsp;</span>8月14日比赛服下载地址更新公告<span style="float: right;">8/15</span></li>
                            </ul>
                            <p align="center" style="margin-top: 20px;">
                                <a href="LOL.html" style="font-size: 18px;">阅读更多最新资讯</a>
                            </p>
                        </div>
                    </div>
                    <div class="zhongjian-right">
                        <div class="zhongjian-right-biaoti">
                            <ul>
                                <li class="zhongjian-right-news news-tab-nav-1">最新皮肤</li>
                                <li class="zhongjian-right-news news-tab-nav-2">最新英雄</li>
                                <li class="zhongjian-right-news news-tab-nav-3">周免英雄</li>
                            </ul>
                        </div>
                        <div class="body-tupian-1">
                            <!--<p><img src="img/Alistar.jpg"></p>-->
                        </div>
                        <div class="body-tupian-2">
                            <p>
                                <a href="LOL.html"><img src="img/Camille.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Alistar.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Cassiopeia.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Fizz.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Galio.jpg" width="195px" height="70px"></a>
                            </p>
                        </div>
                        <div class="body-tupian-3">
                            <p>
                                <a href="LOL.html"><img src="img/Irelia.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Ivern.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Kalista.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Kled.jpg"></a>
                            </p>
                            <p>
                                <a href="LOL.html"><img src="img/Kayn.jpg" width="195px" height="70px"></a>
                            </p>
                        </div>
                        <div class="weiba">
                            <p>
                                <a href="LOL.html"><img src="img/pic-go-qt.jpg" width="195px" height="70px"></a>
                                <a href="LOL.html" style="margin-left: 10px;"><img src="img/pic-go-mall-20180507.jpg" width="195px" height="70px"></a>
                            </p>
                        </div>
                        <div class="wenxintishi">
                            <i><img src="img/捕获.PNG"></i>
                            <h5 style="margin-left: 75px;margin-top: -72px;">本游戏适合18岁及以上玩家娱乐</h5>
                            <p style="margin-left: 75px;font-size: 12px;">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 <br>适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>
                        </div>
                    </div>
                </div>
                <div class="shipin">
                    <div class="shipin-title">
                        <ul>
                            <li class="shipin-1">最新推荐</li>
                            <li class="shipin-2">视频推荐</li>
                            <li class="shipin-2">活动推荐</li>
                        </ul>
                    </div>
                    <div class="shipin-tuijian">
                        <div class="tupian-1"><img src="img/lol_1535079016_sSmallImgUrl.jpg" width="300px" height="120px">
                            <p style="margin-top: 10px;">永久免费英雄pick</p>
                            <p style="font-size: 13px;">活动时间：2018-08-24~2018-09-06</p>
                            <p style="font-size: 13px;">第四位永久免费英雄虚位以待，等你确定！</p>
                        </div>
                        <div class="tupian-2"><img src="img/lol_1533712471_sSmallImgUrl.jpg" width="300px" height="120px">
                            <p style="margin-top: 10px;">泳池派对幸运宝藏</p>
                            <p style="font-size: 13px;">活动时间：2018-08-24~2018-09-06</p>
                            <p style="font-size: 13px;">开启宝藏赢珍惜皮肤</p>
                        </div>
                        <div class="tupian-3"><img src="img/lol_1534905958_sSmallImgUrl.jpg" width="300px" height="120px">
                            <p style="margin-top: 10px;">星宫之礼</p>
                            <p style="font-size: 13px;">活动时间：2018-08-24~2018-09-06</p>
                            <p style="font-size: 13px;">参与星宫之礼，赢珍稀皮肤穿星魔锋 赵信</p>
                        </div>
                        <div class="tupian-4"><img src="img/lol_1534818964_sSmallImgUrl.jpg" width="300px" height="120px">
                            <p style="margin-top: 10px;">七周年庆半价周边票选</p>
                            <p style="font-size: 13px;">活动时间：2018-08-24~2018-09-06</p>
                            <p style="font-size: 13px;">半价周边由你决定，周年庆期间线上线下限时售卖…</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tail">
                <p style="margin-left: 60px;">
                    <a href="LOL.html"><img src="img/LOL.PNG" style="margin-top: 80px;"></a>
                </p>
                <p style="margin-left: 250px;">
                    <a href="LOL.html"><img src="img/rito.PNG" style="margin-top: -70px;"></a>
                </p>
                <div class="tail-right">
                    <ul class="zuidibu">
                        <li>腾讯互动娱乐|&nbsp;</li>
                        <li>服务条款|&nbsp;</li>
                        <li>隐私政策|&nbsp;</li>
                        <li>腾讯游戏招聘|&nbsp;</li>
                        <li>游戏地图|&nbsp;</li>
                        <li>商务合作|&nbsp;</li>
                        <li>腾讯网|&nbsp;</li>
                        <li>网站导航&nbsp;</li>
                    </ul>
                    <p class="zuidibu-1">腾讯公司版权所有</p>
                    <p class="zuidibu-2">COPYRIGHT © 1998 - 2018 TENCENT. ALL RIGHTS RESERVED.</p>
                    <p class="zuidibu-3">COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</p>
                    <p class="zuidibu-4">本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间.</p>
                    <p class="zuidibu-5">粤网文[2017]6138-1456号|新出网证（粤）字010号</p>
                    <p class="zuidibu-6">批准文号：新出审字[2011]310号 |文网进字[2011] 004号 | 出版物号：ISBN 978-7-89989-145-2|全国文化市场统一举报电话：12318</p>
                </div>
            </div>
    </body>

</html>

    运行结果如下：
  • 相关阅读:
    多区域显示（5）-粘贴为图片链接
    coco2d-x怎样创建project
    把数组排成最小的数
    前端框架 EasyUI （1）熟悉一下EasyUI
    easyui form 方式提交数据
    Jquery插件easyUi表单验证提交
    EASYUI 表单(FORM)用法
    easyui form submit 不提交
    JQuery Easy Ui dataGrid 数据表格
    EasyUI datagrid 格式化显示数据
  • 原文地址：https://www.cnblogs.com/yuxuanlian/p/9539229.html
Copyright © 2011-2022 走看看