一个好看的登陆源码

最新推荐文章于 2024-04-28 15:36:04 发布

敬故

最新推荐文章于 2024-04-28 15:36:04 发布

阅读量1.5k

点赞数 4

分类专栏：从单调到花里胡哨文章标签： css html css3

本文链接：https://blog.csdn.net/m0_57376815/article/details/122347071

版权

从单调到花里胡哨专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一个好看的登陆模板，有账户密码验证。
在这里插入图片描述

再输入正确的账户密码之后就会跳转到指定页面。
HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
        <div id="login-box">
            <h1>登录</h1>
            <div class="form">
                <div class="item">
                    <input type="text" placeholder="username" name="username" id="username">
                </div>
                <div class="item">
                    <input type="password" placeholder="password" name="password" id="password">
                </div>
            </div>
            <button type="submit" name="login" id="login">Login</button>
        </div>
</body>
</html>

css部分：

body {
    background: url("../img/background.png") center no-repeat;
    background-size:cover;  /* 让背景图基于容器大小伸缩 */
    background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    //此条属性必须设置否则可能无效/
    background-color:#CCCCCC;;
}

#login-box {
    width: 30%;
    height: auto;
    margin: 0 auto;
    margin-top: 15%;
    text-align: center;
    background: #00000080;
    padding: 20px 50px;
    border-radius: 20px;
}

#login-box h1 {
    color: white;

}

#login-box .form .item {
    margin-top: 15px;
}

#login-box .form .item input {
    width: 180px;
    font-size: 18px;
    border: 0;
    border-bottom: 3px solid white;
    padding: 5px 10px;
    background: #ffffff00;
    color: #ffffff;
}

#login-box .form .item input[placeholder] {
    color: white;
}

#login-box .form .item i {
    font-size: 18px;
    color: white;
}

#login-box button {
    border: 0;
    margin-top: 15px;
    width: 125px;
    height: 30px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
    border-radius: 15px;
}

#message-box {
    color: white;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

JS部分：

document.getElementById('login').addEventListener('click',function() {
                 var username = document.getElementById('username');
   	 var password = document.getElementById('password');
 	   if (username.value == "") {
 	       alert("请输入用户名");
	    } else if (password.value  =="") {
	        alert("请输入密码");
	    } else if(username.value == "admin" && password.value == "123456"){
	       window.location.href='https://www.baidu.com/';
	    } else {
	        alert("请输入正确的用户名和密码！")
 	   }
	})

点我下载

昨天很重要，它构建了我们的记忆;明天很重要，它让我们有了憧憬和梦想。

敬故

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
一个好看的登陆源码

一个好看的登陆模板，有账户密码验证。再输入正确的账户密码之后就会跳转到指定页面。HTML部分：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用户登录</title> <link rel="stylesheet" href="./css/login.css"></head><body>
复制链接

扫一扫