guorui
/
Profile-template-html


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script type="text/javascript" src="/static/pixi.min.js"></script>
  <script type="text/javascript" src="/static/main.js"></script>
  <link rel="stylesheet" href="/static/font.css">
  <title>G.R.D主页</title>
  <style>
    canvas {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -2;
      pointer-events: none
    }
a:hover,
a:link,
a:visited,
a:active,
a:focus {
    text-decoration: none;
   
}

button,
input,
input:focus {
    outline: none;
    border: none;

}

a,
button,
input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*{

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* 其他浏览器 */
}

    * {
      box-sizing: border-box;
      -webkit-text-size-adjust: none
    }

    img {
      border: 0;
      vertical-align: middle
    }


    body {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: radial-gradient(#619bff, #e0e0e3);
}

    .main {
      width: 35%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media screen and (max-width:1024px) {
      .main {
        width: 45%;
      }
    }

    @media screen and (max-width:768px) {
      .main {
        width: 50%;
      }
    }

    @media screen and (max-width:540px) {
      .main {
        width: 60% !important;
      }
    }

    @media screen and (max-width:480px) {
      .main {
        width: 90% !important;
      }
    }

    @media screen and (max-width:360px) {
      .main {
        width: 100% !important;
      }
    }


    img {
      border: 3px solid rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      box-shadow:0 0px 20px 5px #e6e8ea;
      transition: .4s ease-in-out;
    }

    h1 {

  font-family: 'Noto Serif SC', serif;
      color: #fff;
      font-size: 1.8rem;
      line-height: 2em;
      font-weight: 800;
    }

    h2 {
      margin: 0;
      color: #ffffffa3;
      padding-bottom: 45px;
      font-size: 18px;
    }

    ul {
      margin: 0;
      padding: 0;
      position: relative;
      list-style-type: none;
      display: -ms-inline-flexbox;
      display: inline-flex;
      width: 100%;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      border-bottom: 2px solid hsla(0, 0%, 100%, .1);
      border-top: 2px solid hsla(0, 0%, 100%, .1);
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 85%
    }

    li {
      display: flex;
      transition: all .2s;
      width: 100%;
      border-left: 1px solid hsla(0, 0%, 100%, .1);
      border-right: 1px solid hsla(0, 0%, 100%, .1);
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    a {
      font-size: 1.2rem;
      color: #ffffff;
      transition: all .2s;
     
      cursor: pointer;
    }

    a:hover {
      color: #fff !important;
       text-shadow:0 0px 20px  #ffffff;
    }
  </style>
</head>

<body>


  <div class="main">

    <img src="https://q1.qlogo.cn/g?b=qq&nk=784501402&s=5" width="130" height="130" alt="avatar">
    <h1>G.R.D主页</h1>
    <h2>欢迎</h2>

    <ul>
      <li><a href="https://grd.net.cn"><span>按钮1</span></a></li>
      <li><a href="https://grd.net.cn"><span>按钮2</span></a></li>
      <li><a href="https://grd.net.cn"><span>按钮3</span></a></li>
      <li><a href="https://grd.net.cn"><span>按钮4</span></a></li>
    </ul>

  </div>
</body>
<script>
//按键触发 
 
 document.onkeydown = function(){
            //禁止 ctrl+u
            if (event.ctrlKey && window.event.keyCode==85){
                return false;
            }
            //禁止 F12
            if (window.event && window.event.keyCode == 123) {
                event.keyCode = 0;
                event.returnValue = false;
            }
     }
 
   //如果还要禁止其他键的话搜 window.event.keyCode的对照表
 
 
//网站禁止右键
        document.body.oncontextmenu = function() {
            self.event.returnValue=false
        };
 
// 禁用右键菜单、复制、选择
     $(document).bind("contextmenu copy selectstart", function() {
            return false;
     });
 
</script>
</html>