用html+css模仿百度登录页

最新推荐文章于 2024-07-10 13:43:03 发布

AKK188888881

最新推荐文章于 2024-07-10 13:43:03 发布

阅读量2.1k

点赞数 5

分类专栏： Web应用课文章标签： css html 前端

本文链接：https://blog.csdn.net/AKK188888881/article/details/129135342

版权

Web应用课专栏收录该内容

7 篇文章 2 订阅

订阅专栏

用html+css模仿百度登录页：
https://passport.baidu.com/v2/?reg&tt=1676939702850&overseas=undefined&gid=7A655FA-99BE-4139-9B19-EADD2726EE4D&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2F
html：

<!DOCTYPE html>
<html lang="en">
  <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="/static/css/login.css" />
  </head>
  <body>
    <div class="login-container">
      <div class="fixed-bg">
        <img class="logo" src="/static/images/baidu.png" alt="" />

        <div class="desc-text">
          <h3>用科技</h3>
          <p>让复杂的世界更简单</p>
        </div>

        <div class="login-wrapper">
          <div class="login-title">
            <h3>欢迎注册</h3>
            <p>已有账号？<span class="login_btn">登录</span></p>
          </div>

          <div class="login-content">
            <div class="form-item username">
              <label>用户名</label>
              <input type="text" placeholder="请设置用户名" />
            </div>

            <div class="form-item phone">
              <label>手机号</label>
              <input type="text" placeholder="可用于登录和找回密码" />
            </div>

            <div class="form-item psd">
              <label>密　码</label>
              <input type="password" placeholder="请设置登录密码" />
              <span class="reg">密码设置不符合要求</span>
            </div>

            <div class="form-item codes">
              <label>验证码</label>
              <input
                class="code-input"
                type="text"
                placeholder="请输入验证码"
              />
              <button class="get-bt">获取验证码</button>
              <!-- <span class="reg">验证码不能为空</span> -->
            </div>

            <button class="register-btn">注册</button>

            <div class="txt">
              <input class="checkbox" type="checkbox" />
              <span>
                阅读并接受<a>《百度用户协议》</a>、<a>《儿童个人信息保护声明》</a>及<a
                  >《百度隐私权保护声明》</a
                >
              </span>
              <p class="reg last">请勾选“阅读并接受百度用户协议”</p>
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="help">帮助中心</div>
          <div class="line"></div>
          <img src="/static/images/service-hover-2x.png" alt="" />
          <div class="copyright">2023 ©Baidu</div>
        </div>
      </div>
    </div>
  </body>
</html>

css：

.login-container {
    height: 100vh;
    position: relative;
  }
  
  .fixed-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('/static/images/reg_bg_min.jpg') no-repeat;
    background-size: cover;
    overflow-y: scroll;
  }
  
  .logo {
    position: fixed;
    left: 70px;
    top: 60px;
    width: 124.4px;
    height: 40px;
  }
  
  .desc-text {
    position: fixed;
    left: 195px;
    top: 314px;
    color: #FFFFFF;
  }
  
  .desc-text>h3 {
    font-size: 54px;
  }
  
  .desc-text p {
    font-size: 32px;
    font-weight: 300;
  }
  
  .login-wrapper {
    position: absolute;
    right: 139px;
    top: 50%;
    margin-top: -340px;
    width: 480px;
    height: 680px;
    background: rgba(255,255,255,.9);
    border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;
  }
  
  .login-title {
    margin: 50px 0 22px 39px;
  }
  
  .login-title h3 {
    font-size: 36px;
    color: #000;
    padding-bottom: 4px;
  }
  
  .login-title p {
    font-size: 14px;
    color: #9B9B9B;
  }
  
  .login_btn {
    color: #2e58ff;
    cursor: pointer;
  }
  
  .login-content {
    padding-top: 48px;
    position: relative;
    overflow: hidden;
  }
  
  .form-item {
    display: flex;
    position: relative;
    padding-bottom: 40px;
  }
  .form-item label {
    font-size: 14px;
    color: #333;
    letter-spacing: 0;
    text-align: right;
    width: 82px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    font-weight: 200;
    flex-shrink: 0;
  }
  
  .form-item input {
    padding: 11px 10px;
    max-height: 40px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-size: 14px;
    width: 321px;
    color: #000;
    outline: none;
    text-indent: 10px;
  }
  
  .form-item input::placeholder {
    color: #C0C4CC;
  }
  
  .form-item input:focus {
    border: 1px solid #2E58FF;
  }

  .reg {
    font-size: 12px;
    color: #F55;
    position: absolute;
    left: 97px;
    top: 42px;
    display: none;
  }

  .get-bt{
    color: rgb(123,123,123);
    background-color: #FFFFFF;
    width: 95px;
    height: 50px;
    cursor: pointer;
    margin-left: 9px;
    font-size: 5px;
    border-radius: 4px;
    border:none;
  }
  
  .register-btn {
    background: #BDCEFC;
    border-radius: 25px;
    width: 399px;
    /* display: block; */
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    border: none;
    transition: .3s;
    margin-left: 41px;
    /* margin-top: 33px; */
    margin-bottom: 15px;
  }
  
  .txt {
    color: #666;
    font-size: 12px;
    margin-left: 41px;
    width: 390px;
    text-align: center;
  }
  
  .txt a {
    color: #2E58FF;
    text-decoration: none;
    text-align: center;
  }
  
  .checkbox {
    vertical-align: middle;
  }
  
  .popover {
    position: absolute;
    background-color: #303133;
    font-size: 12px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    display: none;
  }
  .popover::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 8px solid #303133;
    border-right: 6px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 6px solid transparent;
    position: absolute;
    left: 23px;
    bottom: -13px;
  }
  
  .username .popover {
    left: 98px;
    top: -36px;
  }
  
  .psd .popover {
    width: 295px;
    right: 41px;
    top: -65px;
    z-index: 99;
  }
  
  .psd .popover::after {
    right: 9px;
    left: initial;
  }
  
  .code-input {
    width: 183px !important;
    margin-right: 9px;
  }
  
  .code {
    padding: 0 !important;
    width: 126px !important;
    text-indent: 0 !important;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #E0E0E0;
    font-size: 12px;
    color: #333;
    letter-spacing: 0;
    text-align: center;
    line-height: 24px;
  }
  
  .last {
    position: inherit;
  }
  
  .username i {
    position: absolute;
    right: 52px;
    color: #2E58FF;
    top: 13px;
    display: none;
  }
  
  .phone i {
    position: absolute;
    right: 52px;
    color: #2E58FF;
    top: 13px;
    display: none;
  }
  
  .psd i {
    position: absolute;
    top: 13px;
    display: none;
  }
  
  .psd .icon-yanjing {
    right: 76px;
  }
  
  .psd .icon-biyan-- {
    display: block;
    right: 72px;
    font-size: 24px;
    top: 9px;
  }
  
  .psd .icon-jinggao {
    display: block;
    right: 52px;
  }
  
  .psd .icon-fuxuancheckbox-fill {
    right: 52px;
    color: #2E58FF;
  }
  
  .footer {
    display: flex;
    align-items: center;
    position: fixed;
    left: 70px;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
  }
  .footer .help {
    color: #fff;
    opacity: .8;
    cursor: pointer;
  }
  .footer .help:hover {
    opacity: 1;
  }
  .footer .line {
    width: 2px;
    height: 12px;
    filter: alpha(opacity=78);
    opacity: .78;
    margin: 0 12px 0 13px;
    background: #fff;
  }
  .footer img {
    width: 16px;
    height: 16px;
    opacity: .8;
    cursor: pointer;
  }
  .footer img:hover {
    opacity: 1;
  }
  .footer .copyright {
    opacity: .54;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    padding-left: 30px;
    cursor: pointer;
  }
  
  @media (max-width: 1140px) {
    .desc-text {
      display: none;
    }
  }

请添加图片描述