战地游戏攻略集网站

最新推荐文章于 2024-07-13 17:03:55 发布

ZZZKKKRTSAE

最新推荐文章于 2024-07-13 17:03:55 发布

阅读量115

点赞数 1

文章标签：游戏 css html

本文链接：https://blog.csdn.net/ZZZKKKRTSAE/article/details/140398363

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直接点login就能进入啦</title>
    <style>
        body{
            background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.ec6d06e7a3c694670bb1890291209d82?rik=0jmeaHZu2Bbu5w&riu=http%3a%2f%2fimgs.aixifan.com%2fo_1ce3jtepd1kpq1em32jjc3ri1l3i.jpg&ehk=oTGyJP%2fej64Fe4hbfESC%2fCekOJ%2fJXh65rXB9nA%2fR6YA%3d&risl=&pid=ImgRaw&r=0");
            background-attachment: fixed;
            background-size: cover;
        }
        .box{
            background-image: url("https://cdn.akamai.steamstatic.com/steam/apps/1238840/ss_2aac0cbea68f0ac82154ca627e2e991fc65c9ede.1920x1080.jpg?t=1633006806");
            width: 700px;
            height: 393px;
            margin-left: 50px;
            background-size: cover;
            margin-top: 100px;
            border-radius: 5%;
            box-shadow: 5px 5px 5px gray;
        }
        .login{
            color: yellow;
            font-size: 80px;
            font-weight: 500;
            text-align: center;
            text-shadow: 1px 1px 1px black;
            margin-top: -20px;
        }
        .logo{
            color: white;
            font-size: 24px;
            font-weight: 100;
            text-align: center;
            text-shadow: 1px 1px 1px black;
        }
        a{
            color: white;
            font-size: 24px;
            font-weight: 100;
            text-align: center;
            text-shadow: 1px 1px 1px black;
            text-decoration: none;
        }
        a:hover {
            color: gray;
            font-weight:600;
        }
        
        .input{
            text-align: center;
            color: pink;
            font-size: 20px;
            text-shadow: 1px 1px 1px black;
        }
        input{
            border-radius: 16%;
            height: 20px;
        }
        button{
            border-radius: 20%;
            height: 24px;
            margin-left: 86px;
            background-color: antiquewhite;
            color: blue;
            font-size: 16px;
            border: 2px 2px 2px;
        }
        .out:hover,.yes:hover{
            color: rgb(251, 134, 153);
            transform: scale(1.1);
        }

        .music{
            margin-left: 50px;
        }

        .zp1{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 80px;
            height: 80px;
            margin-left: 94%;
            margin-top: 2%;
        }
        .zp1:hover{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 80px;
            height: 80px;
            margin-left: 94%;
            margin-top: 2%;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="logo"><a href="https://store.steampowered.com/app/1238840/Battlefield_1/" title="BATTLEFIELD 1" target="_blank">BATTLEFIELD 1</a></div>
        <div class="login">sign in</div>
        <div class="input">
            <br>
            <form action="网站2.html" method="post" target="_blank">
                <p>username : <input type="text" name="username" placeholder="请狠狠输入我叭"></p>
                <p>password : <input type="password" name="password" placeholder="请狠狠输入我叭"></p>
                <button onclick="closeWindow()" class="out">out</button>
                <button class="yes" type="submit">login</button>
            </form>
        </div>
    </div>

    <div class="music"><audio src="Johan Soderqvist - The War to End All Wars.ogg" controls autoplay></audio></div>

    <a href="https://www.ea.com/zh-tw/games/battlefield/battlefield-1" target="_blank">
    <img title="EA" src="https://ts1.cn.mm.bing.net/th/id/R-C.46dfa5301caa040de825859d706a9301?rik=iMnnyN1Ml%2bqq0Q&riu=http%3a%2f%2ftous-logos.com%2fwp-content%2fuploads%2f2017%2f09%2fEA-logo-768x763.png&ehk=G8qkonvPcfWFb7cAEciIZUSYFJRf1ynU9tHBWornrtw%3d&risl=&pid=ImgRaw&r=0" alt="获取图片失败" class="zp1"></a>


    <script>
        function closeWindow() {
          window.close(); // 尝试关闭当前窗口
        }
        </script>
</body>
</html>

点击BATTLEFIELD 1或EA图标即可跳转至对应官网

登录页面只是样式，无实用性

点login即可跳转至下一网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BATTLEFIELD 1 工具大全</title>
    <style>
        body{
            background-image: url("https://img.3dmgame.com/uploads/allimg/160906/316-160Z6112T1.jpg");
            background-size: cover;
            background-attachment: fixed;
        }

        .first{
            color: white;
            font-size: 400%;
            font-weight: 90%;
            text-align: center;
            text-shadow: 2px 2px 2px black;
        }

        .a{
            display: inline-block;
        }
        .zp1{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 200px;
            height: 200px;
            margin-left: 50px;
        }
        .zp1:hover{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 200px;
            height: 200px;
            margin-left: 50px;
            transform: scale(1.2);
        }
        
        a{
            color: yellow;
            text-decoration: none;
            font-size: 30px;
        }
        a:hover {
            color: gray;
            font-weight:600;
        }
        
        .zdzs{
            margin-left: 90px;
        }


        .b{
            display: inline-block;
            margin-left: 70px;
        }
        .zjsj{
            margin-left: 90px;
        }


        .c{
            display: inline-block;
            margin-left: 70px;
        }
        .qxsj{
            margin-left: 90px;
        }


        .d{
            display: inline-block;
            margin-left: 70px;
        }
        .tzzs{
            margin-left: 90px;
        }

        .music{
            margin-left: 38%;
            margin-top: 12%;
        }

        .zp2{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 80px;
            height: 80px;
        }
        .zp2:hover{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 80px;
            height: 80px;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <p><div class="first">BATTLEFIELD 1 工具大全</div></p>
    <br>

    <div class="box">
        <div class="a">
            <a href="https://companion.battlefield.com/companion/emblems" target="_blank">
            <img title="战地助手" src="战地助手.png" alt="获取图片失败" class="zp1"></a>
            <div class="zdzs"><a href="https://companion.battlefield.com/companion/emblems" title="战地助手" target="_blank">战地助手</a></div>
        </div>

        <div class="b">
            <a href="https://battlefieldtracker.com/bf1" target="_blank">
            <img title="战绩数据" src="https://feedback.tracker.gg/uploads/default/original/1X/79d1b4970570ba2f23968c8bf1105048eda501b2.png" alt="获取图片失败" class="zp1"></a>
            <div class="zjsj"><a href="https://battlefieldtracker.com/bf1" title="战绩数据" target="_blank">战绩数据</a></div>
        </div>

        <div class="c">
            <a href="https://sym.gg/legacy/index.html?game=bf1&page=charts" target="_blank">
            <img title="枪械数据" src="枪械数据.png" alt="获取图片失败" class="zp1"></a>
            <div class="qxsj"><a href="https://sym.gg/legacy/index.html?game=bf1&page=charts" title="枪械数据" target="_blank">战绩数据</a></div>
        </div>

        <div class="d">
            <a href="https://emblems.2788.pro/" target="_blank">
            <img title="图章助手" src="图章助手.png" alt="获取图片失败" class="zp1"></a>
            <div class="tzzs"><a href="https://emblems.2788.pro/" title="图章助手" target="_blank">图章助手</a></div>
        </div>
    </div>

    <div class="music"><audio src="2.mp3" controls autoplay></audio></div>

<table align="center" width=100%>
    <tr>
        <td align="left"><a href="网站3.html" target="_blank">
            <img title="点我看up" src="up.png" alt="获取图片失败" class="zp2"></a>
        </td>
        <td align="right">
            <a href="https://www.dice.se/game/battlefield-1" target="_blank">
            <img title="DICE" src="https://bkimg.cdn.bcebos.com/pic/cdbf6c81800a19d8a141349539fa828ba71e46db?x-bce-process=image/format,f_auto/quality,Q_70/resize,m_lfit,limit_1,w_536" alt="获取图片失败" class="zp2"></a>
        </td>
    </tr>
</table>

</body>
</html>

点击图标或链接即可跳转至对应攻略网站

点左下图标跳转至下一网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一些战地up主</title>
    <style>
        body{
            background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.63fc241bcf6766f39ff315411302de48?rik=APAWnetPMEj1VA&riu=http%3a%2f%2fimgs.aixifan.com%2fo_1ce3jtepd145f15id1pen1cv31ukf3o.jpg&ehk=nB2%2bfTOKRvMXMT5ofOUUea4xsYZVFhwssj5x8zsVNJQ%3d&risl=&pid=ImgRaw&r=0");
            background-size: cover;
            background-attachment: fixed;
        }
        .first{
            color: pink;
            font-size: 240%;
            font-weight: 90%;
            text-align: center;
            text-shadow: 2px 2px 2px black;
        }


        .a{
            display: inline-block;
        }
        .zp1{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 110px;
            height: 110px;
        }
        .zp1:hover{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 110px;
            height: 110px;
            transform: scale(1.5);
        }
        
        a{
            color: yellow;
            text-decoration: none;
            font-size: 24px;
        }
        a:hover {
            color: gray;
            font-weight:550;
        }

        .zdzs{
            margin-left: 10px;
        }

        .music{
            text-align: center;
            font-size: 10px;
        }
        .zp2{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 200px;
            height: 200px;
            margin-top: -60px;
        }
        .zp2:hover{
            border-radius: 50%; /* 50% 的 border-radius 会创建一个完美的圆形 */
            overflow: hidden;   /* 确保图片被裁剪成圆形 */
            width: 200px;
            height: 200px;
            margin-top: -60px;
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <p><div class="first">一些战地up主</div></p>

    <table align="center" width=100% cellspacing="20px" cellpadding="15px">
        <tr>
            <td align="center">
                <div class="a">
                    <a href="https://space.bilibili.com/518073454?spm_id_from=333.999.0.0" target="_blank">
                    <img title="Games接近-虾" src="https://i1.hdslb.com/bfs/face/e6ecc94c90976665ebd67071ad5958d67de5dedb.jpg@240w_240h_1c_1s_!web-avatar-nav.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/518073454?spm_id_from=333.999.0.0" title="Games接近-虾" target="_blank">Games接近-虾</a></div>
                </div>
            </td>
            <td align="center">
                <div class="b">
                    <a href="https://space.bilibili.com/33329014?spm_id_from=333.999.0.0" target="_blank">
                    <img title="学德语的Marius" src="https://i1.hdslb.com/bfs/face/5c125e3819932c8fa01cb8ca5ecd49a62d9dc5d5.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/33329014?spm_id_from=333.999.0.0" title="学德语的Marius" target="_blank">学德语的Marius</a></div>
                </div>
            </td>
            <td align="center">
                <div class="c">
                    <a href="https://space.bilibili.com/99175401/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="朽火" src="https://i0.hdslb.com/bfs/face/c0e07c892b141d339c755f70518ea55cd0ae71bf.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/99175401/?spm_id_from=333.999.0.0" title="朽火" target="_blank">朽火</a></div>
                </div>
            </td>
        </tr>
        
        <tr>
            <td align="center">
                <div class="d">
                    <a href="https://space.bilibili.com/2860983/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="咖喱FPS" src="https://i0.hdslb.com/bfs/face/c36e8f0e8915c24053d5a32876126c538205e3d2.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/2860983/?spm_id_from=333.999.0.0" title="咖喱FPS" target="_blank">咖喱FPS</a></div>
                </div>
            </td>
            <td align="center">
                <div class="e">
                    <a href="https://space.bilibili.com/1573853/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="丧心病狂的魔笑" src="https://i2.hdslb.com/bfs/face/e672848bc2718b79ca2f44eb447e84282c6f806d.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/1573853/?spm_id_from=333.999.0.0" title="丧心病狂的魔笑" target="_blank">丧心病狂的魔笑</a></div>
                </div>
            </td>
            <td align="center">
                <div class="f">
                    <a href="https://space.bilibili.com/351035531/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="沙漠巡逻官" src="https://i2.hdslb.com/bfs/face/bd64a3fc839004df0a9ef6eda050aa5e5ace5497.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/351035531/?spm_id_from=333.999.0.0" title="沙漠巡逻官" target="_blank">沙漠巡逻官</a></div>
                </div>
            </td>
        </tr>

        <tr>
            <td align="center">
                <div class="g">
                    <a href="https://space.bilibili.com/53575119/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="Dino恐龙君" src="https://i0.hdslb.com/bfs/face/7ffe57e4637c04633a64a725d74b59de625d0fd4.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/53575119/?spm_id_from=333.999.0.0" title="Dino恐龙君" target="_blank">Dino恐龙君</a></div>
                </div>
            </td>
            <td align="center">
                <div class="h">
                    <a href="https://space.bilibili.com/7418846/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="二五仔Re7nb5" src="https://i2.hdslb.com/bfs/face/51e5810bb43c9332e263d1c4d4bb9606b0eadf12.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/7418846/?spm_id_from=333.999.0.0" title="二五仔Re7nb5" target="_blank">二五仔Re7nb5</a></div>
                </div>
            </td>
            <td align="center">
                <div class="i">
                    <a href="https://space.bilibili.com/86680317/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="查尔filosofia" src="https://i0.hdslb.com/bfs/face/f455b54b2be1c19c592a204bda158ab2b9c5f9cd.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/86680317/?spm_id_from=333.999.0.0" title="查尔filosofia" target="_blank">查尔filosofia</a></div>
                </div>
            </td>
        </tr>

        <tr>
            <td align="center">
                <div class="g">
                    <a href="https://space.bilibili.com/314875396" target="_blank">
                    <img title="FisherLee费舍李" src="https://i1.hdslb.com/bfs/face/54827fb15b3957a7010840db120e9d48ba60dd03.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/314875396" title="FisherLee费舍李" target="_blank">FisherLee费舍李</a></div>
                </div>
            </td>
            <td align="center">
                <div class="h">
                    <a href="https://space.bilibili.com/109075948" target="_blank">
                    <img title="XiaoYaoGate" src="https://i1.hdslb.com/bfs/face/208ebbdba5ad4aa40a4c2d49dc2196b8d6c33c93.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/109075948" title="XiaoYaoGate" target="_blank">XiaoYaoGate</a></div>
                </div>
            </td>
            <td align="center">
                <div class="i">
                    <a href="https://space.bilibili.com/631533887/?spm_id_from=333.999.0.0" target="_blank">
                    <img title="岩滅TheRd" src="https://i2.hdslb.com/bfs/face/2a14f7bd97fce8e5921d44d301f2fd68ffe5ca91.jpg@240w_240h_1c_1s_!web-avatar-space-header.avif" alt="获取图片失败" class="zp1"></a>
                    <div class="zdzs"><a href="https://space.bilibili.com/631533887/?spm_id_from=333.999.0.0" title="岩滅TheRd" target="_blank">岩滅TheRd</a></div>
                </div>
            </td>
        </tr>
    </table>

    <div class="music"><audio src="3.ogg" controls autoplay></audio></div>
    <div class="music">
        <a href="https://store.steampowered.com/app/1238840/Battlefield_1/" target="_blank">
        <img title="STEAM" src="https://store.st.dl.eccdnx.com/public/shared/images/header/logo_steam.svg?t=962016" alt="获取图片失败" class="zp2"></a>
    </div>
</body>
</html>