1
2
3
4

本文登录不适用severless平台，可放弃配置，有服务器的再折腾吧

<!-- more -->

开头

开头问问大家的hexo博客都是怎么登陆的，好用的Qexo ? ,hexo admin hexo plus plus?，因为他是静态的，所以本期的登录基本上只是完成登录的流程，因为他是html,所以账号密码都可以看见，这里登录功能可以

  • 评论区免登录
  • 记录访问人数
  • 实现发文章（不支持）

中间

当然这个html+css代码不是我写的，只提供了登录加注册，我后续继续开发研究👀！在yourblog\source路径新建一个文件夹，名字为login,然后创建一个叫index.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

<!DOCTYPE html>
<html lang="en">
<head>
<pre>Hello world!</pre>
    <meta charset="UTF-8">
    <title>登录hexo</title>
    <link rel="shortcut icon" href="images/camera.ico">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!--头部-->
<div id="header">
    <!--头部中间信息-->
    <div class="h_center">
        <img src="images/logo.png" alt="">
        <p>欢迎来到博客：请先登录！</p>
    </div>
</div>


<!--中部-->
<div id="login_body">
    <div class="login_b_center">
        <div class="login_bg">
            <h1>密码登录</h1>
            <form action="#" id="login">
<!--                //用户名-->
                <div class="userName">
                    <span></span><input type="text">
                </div>
<!--                //密码-->
                <div class="password">
                    <span></span><input type="password">
                </div>
<!--                //登录按钮-->
                <div class="login_btn">
                    <a href="https://laogoupro.us.kg">
                         <input type="button" value="登录">
                    </a>
                </div>
                <div class="forgot_password">
                    <a href="">忘记密码</a>
                    <a href="regist.html">注册账号</a>
                    <a href="1.0/index.html">帮助</a>
                </div>
            </form>
        </div>
    </div>
</div>

然后新建CSS，叫regist.css

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
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#reg_header{
    height: 110px;
    width: 100%;
    box-shadow: 0px 0px 10px orange;
}

#reg_header .reg_h_center{
    width: 1200px;
    height: 110px;
    margin: 0 auto;
    display: flex;
}
#reg_header .reg_h_left{
     height: 110px;
     flex: 1;
 }

#reg_header .reg_h_left img{
    height: 100px;
    width: 120px;
    float: left;
}
#reg_header .reg_h_left h3{
    float: left;
    margin-top: 80px;
    margin-left: 10px;
}
#reg_header .reg_h_right{
    height: 110px;
    flex: 1;
    padding-top: 50px;
    padding-left: 30px;
}


.reg_back {
    /*设置整体的尺寸、背景色、边距等*/
    width: 850px;
    height: 400px;
    border: 8px solid #eeeeee;
    background: white;
    margin: auto;
    margin-top: 20px;
}

.reg_left {
    /*设置左浮动和外边距*/
    float: left;
    margin: 10px;
}

.reg_left > p:first-child {
    /*设置段落（新用户注册）颜色和字体大小*/
    color: gray;
    font-size: 20px;
}

.reg_left > p:last-child {
    /*设置段落（USER REGISTER）颜色和字体大小*/
    color: #A6A6A6;
    font-size: 20px;
}

.reg_center {
    /*设置中间的各种输入框等*/
    float: left;
    width: 450px;
}

.reg_right {
    /*设置右边段落浮动和外间距*/
    float: right;
    margin: 30px;
}

.reg_right > p:first-child {
    font-size: 15px;
}

.reg_right p a {
    /*设置超链接（立即登录）颜色*/
    color: crimson;
}

.td_left {
    /*设置表单中字体对齐方式和宽度、高度*/
    width: 100px;
    text-align: right;
    height: 40px;
}

.td_right {
    /*设置输入框内边距*/
    padding-left: 40px;
}

#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode{
    /*设置输入框大小和边框*/
    width: 200px;
    height: 30px;
    border: 1px solid #A4A4A4;
    /* 设置边框为圆角 */
    border-radius: 8px;
    padding-left: 10px;
}
#checkcode{
    /*验证码宽度*/
    width: 100px;
}
#img_check{
    /*验证码图片*/
    vertical-align: middle;
    height: 30px;
    width: 95px;
}
#btn_sub{
    /*注册按钮*/
    margin-left: 50px;
    background: orangered;
    color: whitesmoke;
    width: 150px;
    height: 40px;
    border: 1px solid gray ;
}

这样登录页面就好了，然后注册页面，新建regist.css和regist.html

regist.css

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
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#reg_header{
    height: 110px;
    width: 100%;
    box-shadow: 0px 0px 10px orange;
}

#reg_header .reg_h_center{
    width: 1200px;
    height: 110px;
    margin: 0 auto;
    display: flex;
}
#reg_header .reg_h_left{
     height: 110px;
     flex: 1;
 }

#reg_header .reg_h_left img{
    height: 100px;
    width: 120px;
    float: left;
}
#reg_header .reg_h_left h3{
    float: left;
    margin-top: 80px;
    margin-left: 10px;
}
#reg_header .reg_h_right{
    height: 110px;
    flex: 1;
    padding-top: 50px;
    padding-left: 30px;
}


.reg_back {
    /*设置整体的尺寸、背景色、边距等*/
    width: 850px;
    height: 400px;
    border: 8px solid #eeeeee;
    background: white;
    margin: auto;
    margin-top: 20px;
}

.reg_left {
    /*设置左浮动和外边距*/
    float: left;
    margin: 10px;
}

.reg_left > p:first-child {
    /*设置段落（新用户注册）颜色和字体大小*/
    color: gray;
    font-size: 20px;
}

.reg_left > p:last-child {
    /*设置段落（USER REGISTER）颜色和字体大小*/
    color: #A6A6A6;
    font-size: 20px;
}

.reg_center {
    /*设置中间的各种输入框等*/
    float: left;
    width: 450px;
}

.reg_right {
    /*设置右边段落浮动和外间距*/
    float: right;
    margin: 30px;
}

.reg_right > p:first-child {
    font-size: 15px;
}

.reg_right p a {
    /*设置超链接（立即登录）颜色*/
    color: crimson;
}

.td_left {
    /*设置表单中字体对齐方式和宽度、高度*/
    width: 100px;
    text-align: right;
    height: 40px;
}

.td_right {
    /*设置输入框内边距*/
    padding-left: 40px;
}

#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode{
    /*设置输入框大小和边框*/
    width: 200px;
    height: 30px;
    border: 1px solid #A4A4A4;
    /* 设置边框为圆角 */
    border-radius: 8px;
    padding-left: 10px;
}
#checkcode{
    /*验证码宽度*/
    width: 100px;
}
#img_check{
    /*验证码图片*/
    vertical-align: middle;
    height: 30px;
    width: 95px;
}
#btn_sub{
    /*注册按钮*/
    margin-left: 50px;
    background: orangered;
    color: whitesmoke;
    width: 150px;
    height: 40px;
    border: 1px solid gray ;
}

还有regist.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="css/regist.css">
    <link rel="shortcut icon" href="images/camera.ico">
</head>
<body>
<!--头部-->
<div id="reg_header">
    <div class="reg_h_center">
        <div class="reg_h_left">
            <img src="images/logo.png" alt="">
            <h3>欢迎注册</h3>
        </div>
    </div>
</div>


<!--表单内容-->
<div class="reg_back">
    <div class="reg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="reg_center">
        <div class="reg_form">
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" placeholder="请输入用户名"
                                                    id="username"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" placeholder="请输入密码"
                                                    id="password"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="Email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="rename">姓名</label></td>
                        <td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="Telphone">手机号</label></td>
                        <td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"
                                                    id="Telphone"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right"><input type="radio" name="gender" value="male" checked> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="Birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="Birthday"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode">
                            <img src="images/商城素材/check_code.png" id="img_check"></td>
                        <!-- 10.png为验证码图片 -->
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="reg_right">
        <p>已有账号?<a href="login.html">立即登录</a></p>
    </div>
</div>
</body>
</html>



最后，加上页脚，也就是新建footer.css 和 header.css

footer.css

1
2
3
4
5
6
7
8
9
10
#footer{
    text-align: center;
    height: 300px;
    padding-top: 30px;
}
#footer .copyright{
    margin-top: 20px;
}


页头header.css

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
131
132
133
134
135
136
137
138
139
140
141
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

#header{
    height: 210px;
    background: white;
}

#header .header_top{
    height: 36px;
    background:#f5f5f5;
}

#header .header_top_center{
    width: 1200px;
    height: 36px;
    margin: 0 auto;
    line-height: 36px;
}
#header .header_top_center .h_top_left{
    color: gray;
    font-size: 13px;
    float: left;
    height: 36px;
}
#header .header_top_center .h_top_right{
    color: gray;
    font-size: 13px;
    float: right;
    height: 36px;
}
#header .header_top_center.h_top_right a{
    color: #6c6c6c;
    margin: 0 5px;
    font-size: 13px;
}

#header .header_center{
    height: 124px;
    width: 1200px;
    margin: 0 auto;
}

#header .header_center .h_c_logo{
    width: 190px;
    height: 124px;
    float: left;
}

#header .header_center .h_c_search{
    width: 815px;
    height: 124px;
    float: left;
}

#header .header_center .h_c_code{
    width: 190px;
    height: 124px;
    float: left;
}

#header .h_c_logo img{
    width: 200px;
    height:120px;
    margin-top:4px ;
}

#header .h_c_search form{
    width: 650px;
    height: 40px;
    margin-top: 40px;
    margin-left: 50px;
}
#header .h_c_search form .t_input{
    width: 555px;
    height: 40px;
    border: 2px solid black;
    padding-left: 10px;
}

#header .h_c_search form .t_button{
    width: 75px;
    height: 40px;
    border: 1px solid gray;
    float: right;
    color: orange;
    margin-left: 5px;


}
#header .h_c_search .hot{
    margin-left: 80px;
    margin-top: 5px;
}
#header .h_c_search .hot a{
    color: #6c6c6c;
    font-size: 15px;
}

#header .h_c_search .hot a:hover{
    color: orangered;
}

#header .h_c_code img{
    margin-top: 10px;
    margin-left: 20px;
    width: 140px;
    height: 110px;
}
#header .nav{
    width: 1200px;
    height: 44px;
    margin: 0 auto;
    background: darkslategrey;
    line-height: 44px;
    border-radius:8px 8px 8px 8px ;
}
#header .nav ul{
    list-style: none;
    width: 1200px;
    height: 44px;
    display: flex;
}
#header .nav ul li{
    flex: 1;
    text-align: center;
}

#header .nav ul li a{
    color: white;
    font-size: 16px;
    font-weight: bold;
}
#header .nav ul li a:hover{
    font-size: 25px;
}

最后

你就可以完工了

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~