GitHub的登录和注册页面的静态版

登录页面

要带验证码的登录页面私信我

<!DOCTYPE html>
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" >
<head>
    <meta charset="utf-8">
    <link crossorigin="anonymous"  integrity="sha512-sD8zc/Dn1lguLc4FdbeVhD2gfxFCTXGr/y+MpJG3oX1vkAyaFf/7BHPtvv1dAHA0KG4bDEW3Ex1EPrzGTMtN2Q==" rel="stylesheet" href="https://github.githubassets.com/assets/light-b03f3373f0e7.css" />
    <link crossorigin="anonymous" integrity="sha512-5ITBENg+F5FPizqEsxN2bcmczO46aikzj/TypfSsMeBhfQdvrwp+exPchAMYBksYmjzlK9JZ57G9b1EiEklI5A==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-e484c110d83e.css" />
    <title>Sign in</title>
</head>

<body class="logged-out env-production page-responsive session-authentication" >

<div class="position-relative js-header-wrapper ">
    <div class="header header-logged-out width-full pt-5 pb-4">
        <div class="container clearfix width-full text-center">
            <svg height="48"  viewbox="0 0 16 16"  width="48"  class="octicon octicon-mark-github">
                <path  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
            </svg>
        </div>
    </div>
</div>

<div class="auth-form-header p-0">
    <h1>登录</h1>
</div>
<div class="auth-form px-3"  >
    <div class="auth-form-body mt-3">
        <form id="format" accept-charset="UTF-8">
            <label>邮箱</label>
            <label>
            <input type="text" name="email"  autocomplete required class="form-control input-block js-login-field"/>
            </label>
           
            <div class="position-relative">
                <label>密码</label>
                <label>
                    <input type="password"  style="display:none" />
                    <!--浏览器会根据用户已经保存过的密码,在type为password的input中自动填充密码-->
                    <!--设置一个隐藏的inpu让他填充,即填充上面那个-->
                    <input type="password" name="password" autocomplete  required class="form-control form-control input-block js-password-field" />
                </label>
                <a class="label-link position-absolute top-0 right-0" href="#">忘记密码?</a>
            </div>
        </form>
        <button  id="submit" type="submit" class="btn btn-primary btn-block js-sign-in-button">提交</button>
    </div>
    <p class="login-callout mt-3">新用户?
        <a href="/registered.html">创建一个账号</a>.
    </p>
</div>
</body>

</html>

注册页面

<!DOCTYPE html>
<html lang="en" class="height-full">
<head>

    <meta charset="utf-8">


    <link crossorigin="anonymous" media="all"
          integrity="sha512-ksfTgQOOnE+FFXf+yNfVjKSlEckJAdufFIYGK7ZjRhWcZgzAGcmZqqArTgMLpu90FwthqcCX4ldDgKXbmVMeuQ=="
          rel="stylesheet" href="https://github.githubassets.com/assets/light-92c7d381038e.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-1KkMNn8M/al/dtzBLupRwkIOgnA9MWkm8oxS+solP87jByEvY/g4BmoxLihRogKcX1obPnf4Yp7dI0ZTWO+ljg=="
          rel="stylesheet" href="https://github.githubassets.com/assets/dark-d4a90c367f0c.css">
    <link data-color-theme="light" crossorigin="anonymous" media="all"
          integrity="sha512-ksfTgQOOnE+FFXf+yNfVjKSlEckJAdufFIYGK7ZjRhWcZgzAGcmZqqArTgMLpu90FwthqcCX4ldDgKXbmVMeuQ=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/light-92c7d381038e.css">
    <link data-color-theme="dark" crossorigin="anonymous" media="all"
          integrity="sha512-1KkMNn8M/al/dtzBLupRwkIOgnA9MWkm8oxS+solP87jByEvY/g4BmoxLihRogKcX1obPnf4Yp7dI0ZTWO+ljg=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/dark-d4a90c367f0c.css">
    <link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all"
          integrity="sha512-cZa7DZqvMBwD236uzEunO/G1dvw8/QftyT2UtLWKQFEy0z0eq0R5WPwqVME+3NSZG1YaLJAaIqtU+m0zWf/6SQ=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-7196bb0d9aaf.css">
    <link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all"
          integrity="sha512-WVoKqJ4y1nLsdNH4RkRT5qrM9+n9RFe1RHSiTnQkBf5TSZkJEc9GpLpTIS7T15EQaUQBJ8BwmKvwFPVqfpTEIQ=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-595a0aa89e32.css">
    <link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all"
          integrity="sha512-XpAMBMSRZ6RTXgepS8LjKiOeNK3BilRbv8qEiA/M3m+Q4GoqxtHedOI5BAZRikCzfBL4KWYvVzYZSZ8Gp/UnUg=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-5e900c04c491.css">
    <link data-color-theme="light_colorblind" crossorigin="anonymous" media="all"
          integrity="sha512-3HF2HZ4LgEIQm77yOzoeR20CX1n2cUQlcywscqF4s+5iplolajiHV7E5ranBwkX65jN9TNciHEVSYebQ+8xxEw=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-dc71761d9e0b.css">
    <link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all"
          integrity="sha512-+J8j3T0kbK9/sL3zbkCfPtgYcRD4qQfRbT6xnfOrOTjvz4zhr0M7AXPuE642PpaxGhHs1t77cTtieW9hI2K6Gw=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-f89f23dd3d24.css">
    <link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all"
          integrity="sha512-AQeAx5wHQAXNf0DmkvVlHYwA3f6BkxunWTI0GGaRN57GqD+H9tW8RKIKlopLS0qGaC54seFsPc601GDlqIuuHg=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-010780c79c07.css">
    <link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all"
          integrity="sha512-+u5pmgAE0T03d/yI6Ha0NWwz6Pk0W6S6WEfIt8veDVdK8NTjcMbZmQB9XUCkDlrBoAKkABva8HuGJ+SzEpV1Uw=="
          rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-faee699a0004.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-8im77z2MdqUUPARZbbz1zkghHLMsjB3rXhDup7ppdlbkXCYIJC78ff6fg0Cl5JMokSXGkCOY3XmzGerbGkSQ6w=="
          rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-f229bbef3d8c.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-HkEX8QA7jvh4C7f6L0A7+z0LHvDjg23dXGTtxBs+8HcHeXeIR97yvqc1osx0T0qlH5ESTb2qkcknE1ciVpr/4Q=="
          rel="stylesheet" href="https://github.githubassets.com/assets/behaviors-1e4117f1003b.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-L9YHrDcdzBe6561RsBJ29KVHAzIE/RCyO8v/P39vT55fyEr4ykX5jDvUlR1FColpDY12UTVtjQ3d6MCCdEE+ow=="
          rel="stylesheet" href="https://github.githubassets.com/assets/signup-2fd607ac371d.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-JFpvWFXXeFTndt9khfsyT5E6i38D5okXgZyyduXcfJS0eOw24sQJ4O/mY8ezRknLBiWRFeWRhkcOuAeh1RFvDg=="
          rel="stylesheet" href="https://github.githubassets.com/assets/github-245a6f5855d7.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-wGB0IJQvWgusQ0pHeCcb64AxNZGUK5IlEBuH7NT1dSGTxnyEltAH5mwPCg0SeHWHRm9GKVhhRLvtX5uf2WGpuQ=="
          rel="stylesheet" href="https://github.githubassets.com/assets/site-c0607420942f.css">
    <link crossorigin="anonymous" media="all"
          integrity="sha512-5GHPfse3ElkIL++kNGcn5wKqddNRl+p6kApETJXoBpbLloJ86KOX4lwTbzy59Hkp6NcE50FYs8bCn+x7RXmgVA=="
          rel="stylesheet" href="https://github.githubassets.com/assets/home-e461cf7ec7b7.css">

    <title>加入我们</title>

 <style>
     .loading{
         width: 80px;
         height: 40px;
         margin: 0 auto;
         margin-top:100px;
     }
     .loading span{
         display: inline-block;
         width: 8px;
         height: 100%;
         border-radius: 4px;
         background: lightgreen;
         -webkit-animation: load 1s ease infinite;
     }
     @-webkit-keyframes load{
         0%,100%{
             height: 40px;
             background: lightgreen;
         }
         50%{
             height: 70px;
             margin: -15px 0;
             background: lightblue;
         }
     }
     .loading span:nth-child(2){
         -webkit-animation-delay:0.2s;
     }
     .loading span:nth-child(3){
         -webkit-animation-delay:0.4s;
     }
     .loading span:nth-child(4){
         -webkit-animation-delay:0.6s;
     }
     .loading span:nth-child(5){
         -webkit-animation-delay:0.8s;
     }
 </style>
</head>

<script type="text/javascript"  src="../浏览器前端/js/jquery.min.js"></script>
<script type="text/javascript" src="../浏览器前端/js/ajax.js"></script>

<body class="logged-out env-production page-responsive height-full d-flex flex-column header-overlay global-focus-styles">

<div class="position-relative js-header-wrapper ">

    <header class="js-warp-hide header-logged-out f4 py-3 z-2" >
        <div class="container-xl d-lg-flex flex-items-center p-responsive">
            <div class="d-flex flex-justify-between flex-items-center width-full">
                <!--放图片-->
                <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32"
                     data-view-component="true" class="octicon octicon-mark-github color-fg-on-emphasis">
                    <path fill-rule="evenodd"
                          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
                </svg>

                <div class="font-mktg">
                    <a href="../浏览器前端/login.html" class="color-fg-on-emphasis">登录 → </a>
                    <!--登录-->
                </div>
            </div>
        </div>
    </header>
</div>

<div class="application-main d-flex flex-auto flex-column">

    <main class="js-warp-hide bg-gray-dark-mktg d-flex flex-auto flex-column overflow-hidden position-relative">
        <div class="d-flex flex-auto flex-justify-center pt-12">
            <div  class="js-continue-container width-full z-1 signup-text-suggester">
                <div class="m-4 p-4 f4 color-shadow-small bg-gray-800-mktg rounded-2 signup-content-container">
                    <h1 style="color: #627597;font-family: ui-monospace,SFMono-Regular,SF Mono,Liberation Mono,monospace; font-size: 16px">欢迎来到这里! </h1>
                    <h1 style="color: #627597;font-family: ui-monospace,SFMono-Regular,SF Mono,Liberation Mono,monospace; font-size: 16px">让我们开始冒险吧!</h1>
                    <form id="format" class="position-relative js-octocaptcha-parent">
                        <div class="js-continue-step-container signup-continue-step-container mt-4" >
                            <div>
                                <label for="email" class="text-mono signup-text-prompt">请输入你的邮箱</label>
                            </div>
                            <div class="d-flex flex-items-center flex-column flex-sm-row">
                                <div class="d-flex flex-items-center width-full">
                                    <span class="signup-continue-prompt mr-2" aria-hidden="true"></span>
                                        <input id="email" class="js-continue-input js-continue-focus-target signup-input form-control input-block flex-1 border-0 rounded-0 p-0 box-shadow-none color-text-white f4 text-mono"
                                               required autofocus  type="email" name="email"/>
                                    <!--type="email": 输入框会自动验证输入值是否是非空值且符合电子邮箱地址格式-->
                                </div>
                            </div>
                        </div>

                        <div id="password-container"
                             class="js-continue-step-container signup-continue-step-container">
                            <div class="mt-4">
                                <label for="password" class="text-mono signup-text-prompt">
                                    请输入密码
                                </label>
                            </div>
                            <div class="d-flex flex-items-center flex-column flex-sm-row">
                                <div class="d-flex flex-items-center width-full">
                                    <span class="signup-continue-prompt mr-2" ></span>

                                    <input type="password"  style="display:none" />
                                    <!--浏览器会根据用户已经保存过的密码,在type为password的input中自动填充密码-->
                                    <!--设置一个隐藏的inpu让他填充,即填充上面那个-->
                                    <input id="password"
                                           class="form-control js-continue-input js-continue-focus-target signup-input form-control input-block flex-1 border-0 rounded-0 p-0 box-shadow-none color-text-white f4 text-mono"
                                           required  type="password" name="password"/>
                                </div>
                            </div>
                        </div>

                        <div id="username-container" class="js-continue-step-container signup-continue-step-container">
                            <div class="mt-4">
                                <label for="login" class="text-mono signup-text-prompt">
                                    请输入用户名
                                </label>
                            </div>

                            <div class="d-flex flex-items-center flex-column flex-sm-row">
                                <div class="d-flex flex-items-center width-full">
                                    <span class="signup-continue-prompt mr-2" aria-hidden="true"></span>
                                    <input id="login"
                                           class="form-control js-continue-input js-continue-focus-target signup-input form-control input-block flex-1 border-0 rounded-0 p-0 box-shadow-none color-text-white f4 text-mono"
                                           required  type="text" name="login"/>
                                </div>
                            </div>
                        </div>

                        <div style="position: relative;top: auto" id="captcha-and-submit-container" class="width-full js-continue-step-container captcha-container">
                            <div class="js-continue-focus-target" tabindex="-1" >
                                <div class="my-3">
                                    <div class="loading">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                         <br>
                        <button style="color: #00cfc8;border-color: #627597; font-family: ui-monospace,SFMono-Regular,SF Mono,Liberation Mono,monospace; font-size: 16px" name="button" type="submit" class="form-control signup-submit-button width-full py-2 js-octocaptcha-form-submit">创建账号</button>
                    </form>
                </div>
            </div>
        </div>
    </main>
</div>

</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳衣白卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值