三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTML&CSS

末蓝、 2023-10-08 14:12 17阅读 0赞

**注：这三个登录页面涉及到的图片素材可自行寻找，字体图标素材可以在阿里字体图标库获取（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2），如需原版素材可联系作者QQ（3416252112）**

#### 废话不多说 ####

## 先上图为敬！！ ##

![在这里插入图片描述][86ce349322734a4392a7cf972863f29f.jpg]

> ##### 文件目录结构 #####
> 
> ![请添加图片描述][e1361ff104794c58934e4e3a2d968e49.png]

##### FIRST #####

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16]

###### 1、html源码（index.html） ######

<!DOCTYPE html>
    <html lang="zh">
    <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="./css/style.css">
      <link rel="stylesheet" href="./iconfont/iconfont.css">
    </head>
    <body>
      <div class="outer_box">
        <div class="back_one"></div>
        <div class="back_two"></div>
        <div class="login_box">
          <h3 class="title">注册页面</h3>
          <p><i class="iconfont"></i><input type="text" value="Username"></p>
          <p><i class="iconfont"></i><input type="text" value="Password"></p>
          <p class="logIn_btn">
            <span class="left_line"></span>
            <span class="iconfont"></span>
            <span class="right_line"></span>
          </p>
          <p class="login"><span>注册</span></p>
        </div>
      </div>
    </body>
    </html>

###### 2、css源码（style.css） ######

* {
        
      margin: 0px;
      padding: 0px;
    }
    
    body {
        
      background-color: wheat;
    }
    input {
        
      border: none;
      border-bottom: 1px solid #dfdfdf;
      padding: 0px 0px 5px 15px;
      margin-left: 15px;
      font-size: 15px;
      color: #dfdfdf;
    }
    .outer_box {
        
      position: relative;
      height: calc(100vh);
    }
    
    /* 背景颜色 */
    .back_one {
        
      position: absolute;
      width: 50%;
      height: 100%;
      left: 0px;
      background-color: #7BB6B6;
    }
    .back_two {
        
      position: absolute;
      width: 50%;
      height: 100%;
      right: 0px;
      background-color: #E3D0AD;
    }
    
    /* 登录窗口 */
    .login_box {
        
      width: 300px;
      height: 350px;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 10px 10px #80808079;
    }
    
    /* 标题 */
    .login_box .title {
        
      width: 100%;
      text-align: center;
      margin: 35px 0px 35px 0px;
      font-size: 30px;
      color: #52565B;
    }
    
    /* p标签的公共样式 */
    .login_box p {
        
      width: 100%;
      height: 40px;
      margin-top: 15px;
      text-align: center;
      justify-content: center;
    }
    
    /* iconfont */
    .login_box p i {
        
      color: #52565B;
      font-size: 25px;
    }
    
    /* 登录按钮的样式 */
    .login_box .logIn_btn {
        
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin-left: 100px;
      background-color: #EBF7F3;
      color: #7BB6B6;
      border-radius: 5px;
      box-shadow: 0px 0px 3px #e6e5e5;
      font-weight: bold;
      display: flex;
    }
    .login_box .logIn_btn span {
        
      display: block;
      width: 33%;
      /* height: 100%; */
    }
    .login_box .logIn_btn .left_line {
        
      height: 20px;
      margin-top: 20px;
      border-left: 2px solid #7BB6B6;
    }
    .login_box .logIn_btn .right_line {
        
      height: 20px;
      border-right: 2px solid #7BB6B6;
    }
    
    /* 注册按钮 */
    .login_box .login {
        
      width: 100px;
      height: 40px;
      margin: 20px 0px 0px 100px;
      color: #E3D0AD;
      font-weight: bold;
      line-height: 40px;
    }

##### SECOND #####

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16 1]

###### 1、html源码（index.html） ######

<!DOCTYPE html>
    <html lang="zh">
    <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="./css/style.css">
      <link rel="stylesheet" href="./iconfont/iconfont.css">
    </head>
    <body>
      <div class="outer_box">
        <div class="filterImg"></div>
        <div class="login_box">
          <h1><img src="./img/user.png" alt=""></h1>
          <p><i class="iconfont"></i><input type="text" value="邮箱"></p>
          <p><i class="iconfont"></i><input type="text" value="登录密码"></p>
          <p class="logIn_btn">登录</p>
          <div><span>立即注册</span><span>忘记密码</span></div>
        </div>
      </div>
    </body>
    </html>

###### 2、css源码（style.css） ######

* {
        
      margin: 0px;
      padding: 0px;
      color: #fff;
    }
    
    input {
        
      border: none;
    }
    .filterImg {
        
      width: 100%;
      height: 100%;
      background-image: url('../img/backimg.jpg');
      background-size: 100% 100%;
    }
    .outer_box {
        
      width: 100%;
      position: relative;
      height: calc(100vh);
    }
    
    /* 登录窗口 */
    .login_box {
        
      width: 320px;
      height: 400px;
      border: 1px solid #fff;
      background-color: rgba(189, 156, 156, 0.233);
      border-radius: 10px;
      position: absolute;
      left: 75%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    /* 用户头像 */
    .login_box h1 {
        
      width: 100%;
      height: 112px;
      margin: 34px 0px;
      text-align: center;
    }
    .login_box h1 img{
        
      width: 90px;
      height: 90px;
      border-radius: 55px;
      padding: 10px;
      box-shadow: 0px 0px 5px #fff;
      border: 1px solid #fff;
    }
    
    /* p标签公共样式 */
    .login_box p {
        
      /* width: 100%; */
      width: 260px;
      height: 35px;
      margin: 20px 30px;
      line-height: 35px;
      text-align: center;
      border: 1px solid #fff;
      border-radius: 27px;
    }
    /* 邮箱与登录密码 */
    .login_box i {
        
      font-size: 20px;
      padding-left: 5px;
    }
    input {
        
      width: 200px;
      height: 35px;
      padding-left: 20px;
      border: none;
      background: none;
    }
    
    /* 登录按钮 */
    .logIn_btn {
        
      color: rgb(255, 166, 181);
      background-color: rgba(255, 255, 255, 0.863);
    }
    
    /* 注册与忘记密码 */
    .login_box div {
        
      width: 260px;
      font-size: 12px;
      margin: 0px 30px;
      display: flex;
      justify-content: space-between;
    }

##### THIRD #####

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16 2]

###### 1、html源码（index.html） ######

<!DOCTYPE html>
    <html lang="zh">
    <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="./css/style.css">
    </head>
    <body>
      <div class="outer_box">
        <div class="inner_box">
          <div class="left_label"></div>
          <div class="center_form">
            <p class="title"><span>S i g n I n    F o r m</span></p>
            <p><input type="text" value="User Name"></p>
            <p><input type="text" value="Password"></p>
            <div class="chk">
              <span><input type="checkbox" id="dd">Remember me?</span><span>Forgot password?</span>
            </div>
          </div>
          <div class="right_label"></div>
          <div class="signIn_btn">
            <span>SIGN IN</span>
          </div>
        </div>
      </div>
    </body>
    </html>

###### 2、css源码（style.css） ######

* {
        
      padding: 0px;
      margin: 0px;
      color: #fff;
    }
    
    /* 外部容器 */
    .outer_box {
        
      position: relative;
      width: 100%;
      height: 100vh;
      background-image: url('../img/backimg.jpg');
      background-size: 100% 100%;
    }
    
    /* 内部登录窗口 */
    .inner_box {
        
      position: absolute;
      width: 450px;
      height: 350px;
      /* background-color: rgba(127, 255, 212, 0.5); */
      left: 25%;
      top: 50%;
      transform: translate(-50%, -50%);
      /* display: flex; */
    }
    .inner_box div {
        
      float: left;
    }
    /* 登录表单 */
    .inner_box .center_form {
        
      width: 410px;
      height: 300px;
      background-color: rgba(134, 221, 221, 0.219);
      box-shadow: 0px 0px 3px rgb(76, 219, 219);
    }
    .inner_box .center_form p {
        
      height: 60px;
      width: 410px;
      text-align: center;
    }
    .title {
        
      height: 50px !important;
      line-height: 50px;
      background-color: rgba(82, 202, 182, 0.575);
      margin-bottom: 40px;
    }
    
    input {
        
      width: 310px;
      margin: 10px 50px 0px 40px;
      height: 35px;
      padding-left: 20px;
      background: none;
      border: none;
      border-bottom: 1px solid #fff;
      font-size: 15px;
    }
    /* remember me */
    .center_form .chk{
        
      width: 330px;
      height: 60px;
      line-height: 60px;
      margin: 10px 40px 0px 40px;
      display: flex;
      justify-content:space-between;
      font-size: 14px;
    }
    .chk span input {
        
      width: 15px;
      height: 15px;
      margin: 10px;
    }
    
    /*两侧小三角形 */
    .inner_box .left_label,.right_label {
        
      width: 0px;
      height: 0px;
      margin-top: 280px;
    }
    .inner_box .left_label {
        
      border-top: solid 10px rgba(255, 255, 255, 0);
      border-right: solid 10px rgb(255, 255, 255);
      border-bottom: solid 10px rgb(255, 255, 255);
      border-left: solid 10px rgba(255, 255, 255, 0);
    }
    .inner_box .right_label {
        
      border-top: solid 10px rgba(255, 255, 255, 0);
      border-right: solid 10px rgba(255, 255, 255, 0);
      border-bottom: solid 10px rgb(255, 255, 255);
      border-left: solid 10px rgb(255, 255, 255);
    }
    /* 登录按钮 */
    .signIn_btn {
        
      height: 50px;
      width: 450px;
      line-height: 50px;
      background-color: #fff;
      text-align: center;
    }
    .signIn_btn span {
        
      font-size: 20px;
      color:rgb(93, 182, 204);
    }

## END ##

## 靓仔/靓妹、大哥/大姐, 给个赞再 say拜拜，行不行？？？![在这里插入图片描述][8a6be25aaa7d44e6bc1998e63e24df03.gif] ##

[86ce349322734a4392a7cf972863f29f.jpg]: https://img-blog.csdnimg.cn/86ce349322734a4392a7cf972863f29f.jpg
[e1361ff104794c58934e4e3a2d968e49.png]: https://img-blog.csdnimg.cn/e1361ff104794c58934e4e3a2d968e49.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/32ce12ed2b1f4b48927055c5f2e09e0c.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e6e737b0921d47f5bc0ea7647d52e1df.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/904231488d2140cfa7408fa16366e28c.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_20,color_FFFFFF,t_70,g_se,x_16
[8a6be25aaa7d44e6bc1998e63e24df03.gif]: https://img-blog.csdnimg.cn/8a6be25aaa7d44e6bc1998e63e24df03.gif