html登录界面编写_登陆页面html代码

作者：2023面试高手 | 2024-06-02 22:10:19

踩

登陆页面html代码

文章目录

前言
正文

前言

今天暂且水一期，过几天再详细写。

正文

直接上代码
index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(background.png) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         
        #loginDiv {
            width: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 250px;
        }
         
        
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
         
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
         
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
    <style type="text/css">
        input::-ms-input-placeholder{text-align: center;}
        input::-webkit-input-placeholder{text-align: center;}
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="" id="form">
            <h1 style="text-align: center;color: aliceblue;">立即登录</h1>
            <p>邮箱:<input id="email" type="text"></p>
            
            <p>密码:<input id="password" type="password" placeholder="密码长度至少为6位"></p>
            <p style="text-align: center;color: darkgray;"><a href="#">忘记密码?</a></p>
            <div style="text-align: center;margin-top: 30px;">
                <input type="button" class="button" value="登录" onclick="login_click()">
                <input type="button" class="button" value="注册" onclick="register_click()">
            </div>
        </form>
 
        <script>
 
            //获取注册时存储在localStorage中的值
            var sex=localStorage.getItem("sex");
            var password=localStorage.getItem("password");
            var email=localStorage.getItem("email");
            var username=localStorage.getItem("username");
 
            //注册按钮跳转
            function register_click(){
                window.location.href="register.html";
            }
 
            //判断登录是否成功
            function login_click(){
                //获取用户输入的信息
                var email1=document.getElementById("email").value;
                var password1=document.getElementById("password").value;
                
                //判断输入的信息和注册的信息是否一致
                if(email1!='' && password1!=''){
                    if (email1==email && password==password1){
                        window.location.href="My_Album.html";
                    }
                    else{
                        alert("邮箱或密码错误，请重新输入！");
                    }
                }
                else{
                    alert("邮箱或密码不能为空！");
                }
                
            }
        </script>
    </div>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/664520