小程序开发定制HTML（一）静态登录注册页面附有完整网页（html+css+js）-巴掌软件-高性价比的软件定制开发解决方案

小程序开发定制建一个文件夹，小程序开发定制文件夹里面放两个文件，一个是login.html文件，存放html代码，一个是login.css文件,存放css代码

html

<!DOCTYPE html><html lang="en"><head>    <meta charset=UTF-8">    <title>程序员之家</title>    <link rel="stylesheet" href="login.css"></head><body>    <div id="head">        <ul>            <li><a>首页</a></li>            <li><a>博客</a></li>            <li><a>程序员学院</a></li>            <li><a>论坛</a></li>            <li><a>问答</a></li>            <li><a>代码</a></li>            <li><a>高校</a></li>            <li><a href="https://www.csdn.net/" target="blank">CSDN</a></li>            <li><a href="https://www.cnblogs.com/" target="blank">博客园</a></li>            <li><a>登录/注册</a></li>            <li><a>会员中心</a></li>        </ul>    </div>    <div        style="background-image: url(download.jfif); background-size:100% 100%;margin-left: auto;margin-right: auto;width: 100%;height: 635px;">        <section id="content">            <div class="header">                <a href="javascript:;" class="current">我要登录</a>                <a href="javascript:;">我要注册</a>            </div>            <div id=body>                <div class="dom" style="display: block;">                    <form>                        <div id="s1">                            <h>账号</h>                            <input id="input" type="text" placeholder="手机/邮箱/用户名">                        </div>                        <div id="s1">                            <h>密码</h>                            <input id="input" type="password" placeholder="密码">                        </div>                        <div id="s1">                            <input type="checkbox">                            <span>记住密码</span>                        </div>                        <input id="button" type="submit" value="登&nbsp;录">                    </form>                    <div id="s1">                        <a href="#">找回密码</a>                        <span>|</span>                        <span>还没有注册帐号?</span>                        <a href="#">立即注册</a>                    </div>                    <div id="s2">                        <span>使用第三方账号直接登录</span>                        <div class="s3">                            <a href="#">                                <img src="images/qq.png" alt="">                            </a>                            <a href="#">                                <img src="images/wechat.png" alt="">                            </a>                        </div>                    </div>                </div>                <div class="dom">                    <form>                        <div id="s1">                            <h>手机号码</h>                            <input id="input" type="text" placeholder="填写你的手机号码作为登录账户">                        </div>                        <div id="s1">                            <h>用户名</h>                            <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字">                        </div>                        <div id="s1">                            <h>密码</h>                            <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写">                        </div>                        <div id="s1">                            <h>短信验证码</h><br>                            <input id="input1" type="text" placeholder="填写短信验证码">                            <input id="button1" type="button" value="获取短信验证码">                        </div>                        <input id="button" type="submit" value="注&nbsp;册">                    </form>                    <div id="s2">                        <span>使用第三方账号直接登录</span>                        <div class="s3">                            <a href="#">                                <img src="images/qq.png" alt="">                            </a>                            <a href="#">                                <img src="images/wechat.png" alt="">                            </a>                        </div>                    </div>                </div>            </div>        </section>        <script>            window.onload = function () {                // 1.1 获取需要的标签                let as = document.getElementsByClassName('header')[0].getElementsByTagName('a');                let contents = document.getElementsByClassName('dom');                // 1.2 遍历                for (let i = 0; i < as.length; i++) {                    // 1.2.1 取出单个对象                    let a = as[i];                    a.id = i;                    // 1.2.2 监听鼠标的移动事件                    a.onclick = function () {                        // 让所有的a的class都清除                        for (let j = 0; j < as.length; j++) {                            as[j].className = '';                            contents[j].style.display = 'none';                        }                        // 设置当前a的class                        this.className = 'current';                        // 从contents数组中取出对应的标签                        contents[this.id].style.display = 'block';                    }                }            }        </script>    </div>    </div>    <div id="foot">        <ul>            <li><a>关于我们</a></li>            <li><a>招贤纳士</a></li>            <li><a>广告服务</a></li>            <li><a>开发助手</a></li>            <li><a>工作时间 8:30-22:00</a></li>        </ul>    </div>    <div align="center" style="color: grey; font-size:12px;">        Copyright © 2008-2020. All Rights Reserved    </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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

css

body,html,div {  padding: 0;  margin: 0;}#head {  width: 100%;  height: 43px;}#head ul {  list-style-type: none;  margin: 0;  padding: 0;}#head ul li {  float: left;}#head ul li a {  display: block;  width: 139.6px;  color: black;  background-color: white;  text-align: center;  text-decoration: none;  margin: 0;  padding-top: 10px;  padding-bottom: 10px;  font-size: 18px;}#head ul li a:hover {  background-color: gray;}#foot {  width: 100%;  height: 42px;  margin-top: 10px;}#foot ul {  list-style-type: none;  margin: 0;  padding: 0;}#foot ul li {  float: left;}#foot ul li a {  display: block;  width: 250px;  color: grey;  background-color: white;  text-align: center;  padding: 4px;  text-decoration: none;  line-height: 30px;  font-size: 14px;}* {  text-decoration: none;}a {  color: blue;}input,button {  outline: none;}#content {  border: solid 2px #e0e0e0;  width: 25rem;  height: 33rem;  background-color: white;  margin-top: 50px;  margin-left: 50%;  float: left;  }.header a {  width: 50%;  height: 60px;  background-color: #f5f5f5;  display: inline-block;  float: left;  /*居中*/  text-align: center;  line-height: 60px;  color: #262626;}.header a.current {  background-color: transparent;  color: blue;}#body {  margin: 2rem;}.dom {  width: 100%;  display: none;}#input {  width: 100%;  height: 2rem;  margin-top: 0.5rem;  padding-left: 0.5rem;  border-radius: 5px;  border: 1px solid #cccccc;}#s1 {  margin-bottom: 1rem;}#button {  width: 100%;  height: 2rem;  border: none;  font-size: 1.5em;  color: #fff;  background-color: blueviolet;  border-radius: 3px;  margin-bottom: 1rem;}#s2 {  text-align: center;}#s3 {  margin-top: 1rem;}#input1 {  width: 60%;  height: 2rem;  margin-top: 0.5rem;  padding-left: 0.5rem;  border-radius: 5px;  border: 1px solid #cccccc;}#button1 {  width: 35%;  height: 2rem;  margin-top: 0.5rem;  padding-left: 0.5rem;  border-radius: 5px;  border: 1px solid #cccccc;  cursor: pointer;}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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159