HTML+CSS实现登陆页面复制即用（附完整代码）

最新推荐文章于 2024-06-22 14:01:29 发布

青玄博客-星空之上映衬出美景

最新推荐文章于 2024-06-22 14:01:29 发布

阅读量542

点赞数 1

原文链接：http://98to.cn/5.html

版权

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>


        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="./style.css">
      
  
      <!--------- Font ----------->
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  
</head>
<body>
    <br>
    <br><br><br><br>
    <br><br><br><br>
    <div class="modal-dialog text-center">
        <div class="col-sm-8 main-section">
            <div class="modal-content">
                <!-- 设置头像 -->
                <div class="col-12 user-img">
                    <img src="./images/boy.png" alt="">
                </div>

                <form class="col-12">
                    <div class="form-group">
                        <input type="username" class="form-control" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" class="form-control" placeholder="密码">
                    </div>
                    <button type="submit" class="btn btn-primary btn1">
                        <i class="fas fa-sign-in-alt"></i>
                        登陆</button>
                    <button  class="btn btn-success btn2">
                        <i class="fas fa-user-check"></i>
                        注册</button>
                </form>
                <div class="col-12 forget"></div>
                <a href="#" class="area">忘记密码?</a>
            </div>
        </div>
    </div>
    <!-- https://fontawesome.com/icons/user-check?s=solid -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

CSS代码

 body{
    /* 引入背景图片 设置居中布局 */
    background: url(./images/background1.jpg) no-repeat center center fixed;
    /* 计算背景大小 */
    background-size: cover;
    font-family: roboto,snas-serif;
}

/* 修改头像大小 */
.user-img img{
    width: 100px;
    height: 100px;
}

.main-section{
    margin: 0 auto;
    margin-top: 13px;
    padding: 0;
}

.modal-content{
    background-color: #3b4562;
    /* 背景颜色变淡 */
    opacity: 0.8;
    padding: 0 18px;
    /* 设置阴影部分 */
    box-shadow: 0 0 3px #848484;
}

/* 设置头像位置 */
.user-img{
    margin-top: -50px;
    margin-bottom: 35px;
}
.form-group{
    margin-bottom: 25px;
}

.form-group input{
    height: 42px;
    border-radius: 5px;
    border: 0px;
    font-size: 18px;
    padding-left: 54px;
}

/* 设置伪类  让input框前面出现user图像*/
.form-group::before{
  font-family: 'Font Awesome\ 5 Free';
    content: "\f007";
    /* 绝对定位 */
    position: absolute;
    font-size: 22px;
    color: black;
    left: 28px;
    padding-top: 5px;
}

/* 设置锁的位置 */
.fa-lock{
    position: absolute;
    padding-top: 8px;
    font-size: 22px;
    left: 28px;
}

button{
    margin: 5px 0 25px;
}

.btn1{
    float: left;
    font-size: 15px;
    padding: 7px 14px;
    border-bottom: 4px solid #428bca;
}

.btn2{
    float: right;
    font-size: 15px;
    padding: 7px 14px;
    border-bottom: 4px solid #5cb85c;
}

.area{
    color: #fff;
}