缥缈引擎相关

缥缈引擎开发的相关东西开源在这里


注册+登录二合一页面模板

<p>没啥好讲的很简单复制粘贴用就是了,至于默认颜色css里有注释,自己去取色器选好想要的颜色进行修改,取色器百度一大堆</p> <p>html部分</p> <pre><code class="language-html">&amp;lt;!-- 页面背景图,可自己去网上寻找,也可直接删除这个img --&amp;gt; &amp;lt;img src=&amp;quot;https://i.loli.net/2021/08/09/gN4wO9zHkiZTWos.jpg&amp;quot; id=&amp;quot;bodybox&amp;quot;&amp;gt; &amp;lt;div id=&amp;quot;login&amp;quot;&amp;gt; &amp;lt;form action=&amp;quot;/login_register/&amp;quot; method=&amp;quot;GET&amp;quot; &amp;gt; &amp;lt;input type=&amp;quot;hidden&amp;quot; name=&amp;quot;login&amp;quot; value=&amp;quot;login&amp;quot;&amp;gt;&amp;lt;!--隐藏,用于区分注册还是登陆提交--&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;账号&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;username&amp;quot; class=&amp;quot;sr&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;密码&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;password&amp;quot; class=&amp;quot;sr&amp;quot; type=&amp;quot;password&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;input name=&amp;quot;submit&amp;quot; type=&amp;quot;submit&amp;quot; title=&amp;quot;确定登陆&amp;quot; value=&amp;quot;登陆&amp;quot; class=&amp;quot;btn&amp;quot;/&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;a onclick=&amp;quot;tab()&amp;quot; class=&amp;quot;tab&amp;quot;&amp;gt;没有账号?去注册→&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div id=&amp;quot;reg&amp;quot;&amp;gt; &amp;lt;form action=&amp;quot;/login_register/&amp;quot; method=&amp;quot;GET&amp;quot;&amp;gt; &amp;lt;input type=&amp;quot;hidden&amp;quot; name=&amp;quot;register&amp;quot; value=&amp;quot;register&amp;quot;&amp;gt;&amp;lt;!--隐藏,用于区分注册还是登陆提交--&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;账号&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;username_1&amp;quot; class=&amp;quot;sr&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;密码&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;password_1&amp;quot; class=&amp;quot;sr&amp;quot; type=&amp;quot;password&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;确认密码&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;password_2&amp;quot; class=&amp;quot;sr&amp;quot; type=&amp;quot;password&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;手机号&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;number_1&amp;quot; class=&amp;quot;sr&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;p class=&amp;quot;small&amp;quot;&amp;gt;安全码(用于找回密码等,切勿遗忘)&amp;lt;/p&amp;gt;&amp;lt;input name=&amp;quot;security_1&amp;quot; class=&amp;quot;sr&amp;quot;&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;input name=&amp;quot;submit&amp;quot; type=&amp;quot;submit&amp;quot; title=&amp;quot;确定注册&amp;quot; value=&amp;quot;确定注册&amp;quot; class=&amp;quot;btn&amp;quot;/&amp;gt;&amp;lt;br/&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;a href=&amp;quot;/index/&amp;quot; class=&amp;quot;returnMain&amp;quot;&amp;gt;返回首页&amp;lt;/a&amp;gt; &amp;lt;!-- 为了生态不用管 欺骗浏览器的代码 --&amp;gt; &amp;lt;input type=&amp;quot;text&amp;quot; style=&amp;quot;display: none;&amp;quot;&amp;gt; &amp;lt;input type=&amp;quot;password&amp;quot; style=&amp;quot;display: none;&amp;quot;&amp;gt; &amp;lt;!-- 为了生态不用管 欺骗浏览器的代码 --&amp;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(&amp;quot;reg&amp;quot;).style.display == &amp;quot;&amp;quot;){ document.getElementById(&amp;quot;login&amp;quot;).style.display=&amp;quot;none&amp;quot;; document.getElementById(&amp;quot;reg&amp;quot;).style.display=&amp;quot;flex&amp;quot;; } }</code></pre>

页面列表

ITEM_HTML