简约且好看的微信公众号的关注界面HTML单页源码-北忘山博客

今天发现一个好看的微信公众号的关注界面HTML单页代码，在这里分享给大家

看起来十分的简约大气，喜欢的朋友可以自行下载，效果图如下

预览地址：传送门

博主对部分的静态资源做了外链引入，大家可以自行的修改

<!DOCTYPE html>
<html lang="zh-cn">
  <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>
    <link rel="stylesheet" href="./main.css" />
    <link
      rel="icon"
      type="image/x-icon"
      href="https://cdn.beiwangshan.com/uploads/2023/02/3ed5424161230958.webp"
    />
    <link
      rel="apple-touch-icon"
      href="https://cdn.beiwangshan.com/uploads/2023/02/0b674bb61d231114.webp"
    />
    <meta name="apple-mobile-web-app-title" content="科技毒瘤君" />
    <link
      rel="bookmark"
      href="https://cdn.beiwangshan.com/uploads/2023/02/3ed5424161230958.webp"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="180x180"
      href="https://cdn.beiwangshan.com/uploads/2023/02/0b674bb61d231114.webp"
    />
    <meta
      name="description"
      content="关注科技毒瘤君微信公众号，获取更多软件、科技、资讯、开发相关文章。"
    />
    <meta name="theme-color" content="#f6f7f8" />
    <style>
      body {
        background: #f6f7f8;
        margin: 0;
        padding: 0;
      }

      .wechatOA {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: var(--vh);
      }

      .wechat-card {
        background: #fff;
        max-width: 428px;
        max-height: 569px;
        border-radius: 16px;
        padding: 24px 36px 20px 36px;
        display: flex;
        flex-direction: column;
        margin: auto;
        align-items: center;
      }

      .qrcode {
        width: 256px;
        height: 256px;
        display: flex;
      }

      .tips {
        font-size: 14px;
        color: #000;
        opacity: 0.5;
        margin-top: 8px;
      }

      .wechatOA-card {
        width: 100%;
        display: flex;
        margin-top: 16px;
        background: #f7f7f7;
        padding: 18px;
        border-radius: 16px;
        align-items: center;
      }

      .wechatOA-head {
        width: 48px;
        height: 48px;
        background-image: url(https://cdn.beiwangshan.com/uploads/2023/02/3ed5424161230958.webp);
        border-radius: 68px;
        background-size: contain;
        margin-right: 16px;
      }

      .wechatOA-name {
        font-weight: bold;
      }

      .wechatOA-description {
        font-size: 12px;
        color: #000;
        opacity: 0.5;
      }

      a.help {
        font-size: 14px;
        color: #000;
        opacity: 0.5;
        text-decoration: none;
        margin: 20px 0;
      }

      a.help:visited {
        color: #000;
      }
    </style>
  </head>
  <body>
    <div class="wechatOA">
      <div class="wechat-card">
        <img src="https://cdn.beiwangshan.com/uploads/2023/02/7ece8d57a2231211.jpeg" class="qrcode" alt="qrcode" />
        <div class="tips">扫描二维码关注公众号</div>
        <div class="wechatOA-card">
          <div class="wechatOA-head"></div>
          <div class="wechatOA-info">
            <div class="wechatOA-name">科技毒瘤君</div>
            <div class="wechatOA-description">分享软件与科技生活</div>
          </div>
        </div>
      </div>
      <a
      class="help"
      href="https://www.beiwangshan.com/"
      title="北忘山博客-专注互联网优质资源分享的技术博客"
      target="_blank"
      >北忘山博客</a
    >
    </div>
    <script>
      // 改进vh
      const vh = window.innerHeight * 1;
      document.documentElement.style.setProperty("--vh", `${vh}px`);

      window.addEventListener("resize", () => {
        let vh = window.innerHeight * 1;
        document.documentElement.style.setProperty("--vh", `${vh}px`);
      });
    </script>
  </body>
</html>

版权声明 1、本网站名称：北忘山
2、本站永久网址：https://www.beiwangshan.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长邮箱hi#beiwangshan.com(@替换#)进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END