注册+登录二合一页面模板
<p>没啥好讲的很简单复制粘贴用就是了,至于默认颜色css里有注释,自己去取色器选好想要的颜色进行修改,取色器百度一大堆</p>
<p>html部分</p>
<pre><code class="language-html">&lt;!-- 页面背景图,可自己去网上寻找,也可直接删除这个img --&gt;
&lt;img src=&quot;https://i.loli.net/2021/08/09/gN4wO9zHkiZTWos.jpg&quot; id=&quot;bodybox&quot;&gt;
&lt;div id=&quot;login&quot;&gt;
&lt;form action=&quot;/login_register/&quot; method=&quot;GET&quot; &gt;
&lt;input type=&quot;hidden&quot; name=&quot;login&quot; value=&quot;login&quot;&gt;&lt;!--隐藏,用于区分注册还是登陆提交--&gt;
&lt;p class=&quot;small&quot;&gt;账号&lt;/p&gt;&lt;input name=&quot;username&quot; class=&quot;sr&quot;&gt;&lt;br/&gt;
&lt;p class=&quot;small&quot;&gt;密码&lt;/p&gt;&lt;input name=&quot;password&quot; class=&quot;sr&quot; type=&quot;password&quot;&gt;&lt;br/&gt;
&lt;input name=&quot;submit&quot; type=&quot;submit&quot; title=&quot;确定登陆&quot; value=&quot;登陆&quot; class=&quot;btn&quot;/&gt;
&lt;/form&gt;
&lt;a onclick=&quot;tab()&quot; class=&quot;tab&quot;&gt;没有账号?去注册→&lt;/a&gt;
&lt;/div&gt;
&lt;div id=&quot;reg&quot;&gt;
&lt;form action=&quot;/login_register/&quot; method=&quot;GET&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;register&quot; value=&quot;register&quot;&gt;&lt;!--隐藏,用于区分注册还是登陆提交--&gt;
&lt;p class=&quot;small&quot;&gt;账号&lt;/p&gt;&lt;input name=&quot;username_1&quot; class=&quot;sr&quot;&gt;&lt;br/&gt;
&lt;p class=&quot;small&quot;&gt;密码&lt;/p&gt;&lt;input name=&quot;password_1&quot; class=&quot;sr&quot; type=&quot;password&quot;&gt;&lt;br/&gt;
&lt;p class=&quot;small&quot;&gt;确认密码&lt;/p&gt;&lt;input name=&quot;password_2&quot; class=&quot;sr&quot; type=&quot;password&quot;&gt;&lt;br/&gt;
&lt;p class=&quot;small&quot;&gt;手机号&lt;/p&gt;&lt;input name=&quot;number_1&quot; class=&quot;sr&quot;&gt;&lt;br/&gt;
&lt;p class=&quot;small&quot;&gt;安全码(用于找回密码等,切勿遗忘)&lt;/p&gt;&lt;input name=&quot;security_1&quot; class=&quot;sr&quot;&gt;&lt;br/&gt;
&lt;input name=&quot;submit&quot; type=&quot;submit&quot; title=&quot;确定注册&quot; value=&quot;确定注册&quot; class=&quot;btn&quot;/&gt;&lt;br/&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;a href=&quot;/index/&quot; class=&quot;returnMain&quot;&gt;返回首页&lt;/a&gt;
&lt;!-- 为了生态不用管 欺骗浏览器的代码 --&gt;
&lt;input type=&quot;text&quot; style=&quot;display: none;&quot;&gt;
&lt;input type=&quot;password&quot; style=&quot;display: none;&quot;&gt;
&lt;!-- 为了生态不用管 欺骗浏览器的代码 --&gt;</code></pre>
<p>css部分</p>
<pre><code class="language-css">*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
form{
width: 100%;
}
.sr{
margin-top: 5px;
text-indent: 2px;
outline:none;
font-size: 20px;
background-color: #b9eee6f2; /*输入框的背景颜色*/
border:5px solid #42e6ce; /*输入框的左侧边框颜色,前面那个5px是宽度,根据自己需求来定*/
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style:solid;
width: 90%;
color: #ffffff; /*在输入框里输入的内容颜色*/
}
.small{
font-weight: bold;
font-size: 15px;
color: #42e6ce;
}
.btn{
display: inline-block;
border-radius: 2px;
color: white; /* 按钮的字体颜色 */
background-color: #42E6CE; /* 按钮的背景颜色 */
width: 60px;
height: 30px;
border: none;
margin-top: 10px;
}
.tab{
position: absolute;
right: 4px;
bottom: 4px;
font-size: 14px;
color: dodgerblue; /* 登录框右下角的字体颜色 */
}
.returnMain{
/* 页面左上角那个返回首页的样式 */
font-size: 14px;
display: inline-block;
padding: 0 4px 0 4px;
width: auto;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
color: white; /* 字体颜色 */
background-color: dodgerblue; /* 背景颜色 */
border-radius: 0 0 10px 0; /* 边框圆角不需要可删除 */
}
#bodybox{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color:#121415;
object-fit:cover;
}
#login{
background-color: white; /* 登录框的背景颜色 */
box-shadow: 1px 1px 5px black;
border-radius: 4px;
position: absolute;
width: 80%;
height: 200px;
left: 10%;
top: 30%;
text-align: center;
display: flex;
align-items: center;
}
#reg{
background-color: white; /* 注册框的背景颜色 */
box-shadow: 1px 1px 5px black;
border-radius: 4px;
position: absolute;
width: 80%;
height: 300px;
left: 10%;
top: 30%;
text-align: center;
display: none;
align-items: center;
}
@media screen and (min-width: 700px) {
#login{
width: 46%;
left: 27%;
height: 250px;
}
}</code></pre>
<p>script(JavaScript)部分</p>
<pre><code class="language-js">var tab = function(){
if(document.getElementById(&quot;reg&quot;).style.display == &quot;&quot;){
document.getElementById(&quot;login&quot;).style.display=&quot;none&quot;;
document.getElementById(&quot;reg&quot;).style.display=&quot;flex&quot;;
}
}</code></pre>