一款精简好看的用户致歉信HTML自适应单页源码-战雀笔记

源码介绍

这是一款单页静态的HTML页面源码，上传到虚拟主机/服务器，即可访问查看！
效果预览

源码

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>致歉信</title>
  <style>
    .xc-permission {
      position: relative;
      width: 100%;
      height: 100%;
      background: #E2EDFA;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 20px;
      user-select: none;
      color: #1B1C33;
      overflow: hidden;
    }
    .no-per-img{
      width: 200px;
      height: 200px;
      display: none;
      position: absolute;
      bottom: 50px;
      right: -8px;
      z-index: 9;
    }
    .show{
      display: block !important;
    }
    .no-per-p{
      margin: 0;
      padding: 20px;
    }
    html, body{
      margin: 0;
      height: 100%;
      width: 100%;
    }
    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      color: inherit;
      text-decoration: none;
    }

    a:visited {
      color: inherit;
      text-decoration: none;
    }

    a:active {
      color: inherit;
      text-decoration: none;
    }
    .btn-box{
      display: flex;
      position: relative;
      margin-top: 20px;
    }
    .btn {
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid rgba(151, 151, 151, 0.30);
      font-size: 14px;
      color: #00172f;
      padding: 8px 64px;
    }
    .btn-default{
      background-color: rgba(255, 255, 255, 0.65);
    }
    .btn-parm{
      background-color: rgba(0, 24, 46, 1);
      color: #FFFFFF;
      margin-left: 10px;
    }
    .btn-parm:hover{
      background-color: rgba(0, 142, 250, 1);
    }

    .main{
      width: 916px;
      height: 408px;
      position: relative;
    }
    .main-title{
      margin-top: 10%;
      text-align: center;
      font-weight: 400;
      color: #1A1B49;
      font-size: 17px;
      margin-bottom: 1%;
    }
    .main::after{
      content: "";
      position: absolute;
      right: -20px;
      top: -20px;
      width: 220px;
      height: 220px;
      background: #89FFE4;
      opacity: 0.1;
      filter: blur(15px);
      border-radius: 70px;
      overflow: hidden;
      z-index: 1;
    }
    .main-img{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-image: url('/uploads/allimg/20250208/1-25020QTR9153.jpeg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      position: relative;
      z-index: 3;
    }
    @media screen and (max-width: 768px) {
      .xc-permission {
        font-size: 18px;
      }
      .btn{
        padding: 8px 39px;
      }
      .no-per-img{
        bottom: 50px;
        right: -32px;
      }
      .main{
        width: 100%;
        height: 494px;
       
      }
      .main-img{
        background-image: url('/uploads/allimg/20250208/1-25020QTR9153.jpeg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      .main-title{
        margin-top: 29px;
      }
    }

  </style>
</head>
<body>
  <div>
    <div>致歉信</div>
    <div><div></div></div>
    <div>
      <a href="/" target="_blank" class="btn btn-default">退款登记</a>
      <div class="btn btn-parm" id="contact">联系我们</div>
      <img src="/uploads/allimg/20230830/1-230S01S614334.jpg" >
    </div>
  </div>
</body>
<script type="text/javascript">
  const idDom = document.getElementById('contact')
  idDom.addEventListener('mouseover', function(){
    const imgDom = document.getElementsByClassName('no-per-img')
    imgDom[0].classList.toggle('show')
  })
  idDom.addEventListener('mouseleave', function(){
    const imgDom = document.getElementsByClassName('no-per-img')
    imgDom[0].classList.toggle('show')
  })
</script>
</html>