安稳跳转页源码分享

anwen4816 2024-6-19 928 6/19

认真看小白也能变成大佬!

本源码效果站点:https://03-06.cn/index.html

大佬教程:

1.直接服务器新建index.html把源码复制粘贴进去即可!

2.然后修改代码204到220行代码即可!

 

小白教程:

1.桌面新建一个新建文本文档.txt

安稳跳转页源码分享

2.打开文本文档复制粘贴代码进去

3.修改里面的文字在最后面

安稳跳转页源码分享

4.name里面写成自己的域名或者名字

4.<a href=“”里面链接写自己的即可

5.保存文件

6.把文件名字改成index.html(记得删除.txt)

安稳跳转页源码分享

7.然后直接双击看一下效果

安稳跳转页源码分享

8.然后把源码上传到直接服务器或者域名即可

完工!!!下面是源码分享


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>安稳跳转页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 通用样式 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
      }

      /* 外层容器样式 */
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      /* 拟态框样式 */
      .modal {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background-color: #e3f2f6;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        padding: 40px;
        max-width: 600px;
        width: 80vw;
        border: 5px solid #ffffff;
        border-color: rgba(0, 0, 0, 0.1);
      }

      /* 头像样式 */
      .avatar {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
        border-radius: 50%;
        background-image: url(https://img1.baidu.com/it/u=3709586903,1286591012&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.4));
      }

      /* 名称样式 */
      .name {
        text-align: center;
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: 700;
        color: #565656;
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
        filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
      }

      /* 下载按钮样式 */
      .download-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 60px;
        margin-top: 20px;
        margin-bottom: 40px;
        border: none;
        border-radius: 30px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
        background-image: linear-gradient(to bottom right, #b5a0f7, #8db6ff);
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        outline: none;
        transition: transform 0.2s ease-out;
      }

      /* 下载按钮悬停时的样式 */
      .download-btn:hover {
        transform: scale(1.05);
      }

      /* 安卓下载按钮样式 */
      .android-btn {
        background-image: linear-gradient(to bottom right, #b5a0f7, #8db6ff);
      }

      /* 苹果下载按钮样式 */
      .apple-btn {
        background-color: #4dd0e1;
        color: #ffffff;
      }

      /* 苹果下载按钮悬停时的样式 */
      .apple-btn:hover {
        background-color: #26c6da;
      }

      /* 描述样式 */
      .description {
        margin: 20px 0;
        font-size: 16px;
        color: #666;
        text-align: center;
      }

      /* 其他信息样式 */
      .info {
        margin-bottom: 40px;
        font-size: 16px;
        color: #666;
        text-align: center;
      }

      /* 标题样式 */
      .title {
        margin-bottom: 10px;
        font-weight: 700;
      }

      /* 软件截图样式 */
      .screenshot {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        background-image: url(https://q4.qlogo.cn/headimg_dl?dst_uin=3523864713&spec=100);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }

      @media only screen and (max-width: 768px) {
        /* 拟态框样式 */
        .modal {
          padding: 20px;
          border: 3px solid #ffffff;
        }

        /* 头像样式 */
        .avatar {
          width: 80px;
          height: 80px;
          margin-bottom: 10px;
        }

        /* 名称样式 */
        .name {
          margin-bottom: 10px;
          font-size: 20px;
        }

        /* 描述样式 */
        .description {
          margin: 10px 0;
          font-size: 14px;
        }

        /* 下载按钮样式 */
        .download-btn {
          width: 160px;
          height: 50px;
          font-size: 18px;
          line-height: 50px;
          margin-top: 10px;
          margin-bottom: 20px;
        }

        /* 其他信息样式 */
        .info {
          font-size: 14px;
        }
        .name {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-image: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="modal">
   <center><div class="mizhi-sjcs-item2"><iframe src="https://www.wuaijs.cn/wp-content/themes/zibll/inc/widgets/web/tkr/" width="300" height="300" frameborder="no"></iframe></div></center>


        <div class="name">当前访问域名:03-06.cn</div>
         <div class="name">新域名是:安稳权益.cn</div>
        
        
         <a href="https://xn--49su6yzqmzjd.cn/#/" target="_blank"  class="download-btn apple-btn">点击这个即可打开</a>
        <a href="https://www.quanyihy.top/#/" target="_blank"  class="download-btn android-btn">点击备用新域名</a>
        <a href="https://03-06.cn/" target="_blank"  class="download-btn android-btn">安稳博客</a>
    
    
        <div align=center><a href="http://beian.miit.gov.cn/"; target=_blank>闽ICP备2023006453号</a>
 /* 安稳博客提醒本源码仅供参考学习使用! */
 /* 安稳博客:03-06.cn */
        </div>
      </div>
    </div>
  </body>
</html>

 

- THE END -

anwen4816

6月19日15:01

最后修改:2024年6月19日
0

非特殊说明,本博所有文章均为博主原创。