1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JS/CSS 注册表单（模态框设置）</title>
6 <style>
7
8 input[type=email], input[type=password] {
9 width: 100%;
10 padding: 12px 20px;
11 margin: 8px 0;
12 display: inline-block;
13 border: 1px solid #ccc;
14 box-sizing: border-box;
15 }
16
17
18 button {
19 background-color: #4CAF50;
20 color: white;
21 padding: 14px 20px;
22 margin: 8px 0;
23 border: none;
24 cursor: pointer;
25 width: 100%;
26 }
27
28
29 .cancelbtn {
30 padding: 14px 20px;
31 background-color: #f44336;
32 }
33
34
35 .cancelbtn,.signupbtn {float:left;width:50%}
36
37
38 .container {
39 padding: 16px;
40 }
41
42
43 .modal {
44 display: none;
45 position: fixed;
46 z-index: 1;
47 left: 0;
48 top: 0;
49 width: 100%;
50 height: 100%;
51 overflow: auto;
52 background-color: rgb(0,0,0);
53 background-color: rgba(0,0,0,0.4);
54 padding-top: 60px;
55 }
56
57
58 .modal-content {
59 background-color: #fefefe;
60 margin: 5% auto 15% auto;
61 border: 1px solid #888;
62 width: 80%;
63 }
64
65
66 .close {
67 position: absolute;
68 right: 35px;
69 top: 15px;
70 color: #000;
71 font-size: 40px;
72 font-weight: bold;
73 }
74
75 .close:hover,
76 .close:focus {
77 color: red;
78 cursor: pointer;
79 }
80
81
82 .clearfix::after {
83 content: "";
84 clear: both;
85 display: table;
86 }
87
88 </style>
89 </head>
90 <body>
91 <h1>
92 注册表单
93 </h1>
94 <button onclick="document.getElementById(‘mymodel‘).style.display=‘block‘">
95 注册
96 </button>
97 <h1>
98 登录表单
99 </h1>
100 <button onclick="document.getElementById(‘mymodel1‘).style.display=‘block‘">
101 登录
102 </button>
103
104 <div class="modal" id="mymodel">
105 <span onclick="document.getElementById(‘mymodel‘).style.display=‘none‘" class="close" >×</span>
106 <form class="modal-content animate" action="www.baidu.com">
107 <div class="container">
108
109
110 <div>
111 <label for="myemail">邮箱</label>
112 <input type="email" placeholder="请输入邮箱" name="myemail">
113
114 </div>
115 <div>
116 <label for="mypassword">密码</label>
117 <input type="password" placeholder="请输入密码" name="mypassword">
118
119 </div>
120 <div>
121 <label for="repassword">确认密码</label>
122 <input type="password" placeholder="确认密码" name="repassword">
123
124 </div>
125 <div>
126 <input type="checkbox" name="checked"><label for="checked">记住密码</label>
127 </div>
128 <div>
129 <p>
130 请仔细阅读我们的<a href="#">服务条款</a>
131 </p>
132 </div>
133 <div class="clearfix">
134 <button type ="button" onclick="document.getElementById(‘mymodel‘).style.display=‘none‘" class="cancelbtn">
135 取消
136 </button>
137 <button class="signupbtn" type="submit">
138 注册
139 </button>
140 </div>
141 </div>
142 </form>
143 </div>
144 <!--模态框可以作为复用组件-->
145 <div class="modal" id="mymodel1">
146 <span onclick="document.getElementById(‘mymodel1‘).style.display=‘none‘" class="close" >×</span>
147 <form class="modal-content animate" action="www.baidu.com">
148 <div class="container">
149
150
151 <div>
152 <label for="myemail">邮箱</label>
153 <input type="email" placeholder="请输入邮箱" name="myemail">
154
155 </div>
156 <div>
157 <label for="mypassword">密码</label>
158 <input type="password" placeholder="请输入密码" name="mypassword">
159
160 </div>
161 <div>
162 <input type="checkbox" name="checked"><label for="checked">记住密码</label>
163 </div>
164
165 <div class="clearfix">
166 <button type ="button" onclick="document.getElementById(‘mymodel1‘).style.display=‘none‘" class="cancelbtn">
167 取消
168 </button>
169 <button class="signupbtn" type="submit" >
170 登录
171 </button>
172 </div>
173 </div>
174 </form>
175 </div>
176 <script>
177 // 获取模型
178 var modal = document.getElementById(‘mymodel‘);
179
180 // 鼠标点击模型外区域关闭登录框
181 window.onclick = function(event) {
182
183 if (event.target == modal) {
184 modal.style.display = "none";
185 }
186 }
187 </script>
188 </body>
189
190 </html>
主要是CSS美化，每次完成一个小动作时要知道心中有图，知道哪一种属性能实现什么样的效果，可以把它们封装成不同的组件，实现复用，bootstrap就是封装了一个css库。和一些配合js，html的组件，
原文地址：https://www.cnblogs.com/weblife/p/10271802.html
时间： 2024-08-26 00:08:46