HTML实现登录注册界面

编程语言 2023-06-11 22:25:43 阅读次数: 0 
登录：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ATM自动提款机登录</title>
    <style>
        body {
            background: url("屏幕截图2.png")no-repeat;
            /*no-repaet控制背景图不会出现重复的现象*/
            background-size: 100% 130%;
        }

        #bigbox {
            width: 20%;
            /*宽度*/
            height: 400px;
            /*高度*/
            background-color: #c1979791;
            /*背景颜色*/
            margin: auto;
            /*外边距*/
            margin-top: 5%;
            /*上边距*/
            text-align: center;
            /*位置*/
            border-radius: 10px;
            /*圆角边框*/
            padding: 50px;
            /*内边距*/
        }

        h1 {
            color: #231e1ea3;
            margin-top: 5%;
        }

        #title {
            color: #000000;
            margin-top: 5%;
        }

        .Box {
            margin-top: 20%;
        }

        input {
            border: 0;
            /*为了单独设置下边框*/
            width: 70%;
            font-size: 15px;
            color: #fff;
            background: transparent;
            /*背景属性*/
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            outline: none;
            /*轮廓，突出元素*/
            margin-top: 10px;
            font-family: 楷体;
        }

        .allbutton {
            margin-top: 30px;
            /* margin-left: 20px; */
        }

        #button {
            margin-top: 20px;
            /* margin-left: 15px;
            margin-right: 15px; */
            height: 20%;
            size: 20px;
            width: 20%;
            font-size: 15px;
            font-family: 楷体;
            text-align: center;
        }

        #zhuce {
            width: 10px;
            font-size: 3px;
            width: 60px;
            height: 40px;
            margin-left: 20px;
            position: relative ;
            color: #000000;
            background-color: #6a686827;
            /* margin-top: 30px; */
            /* padding-top: 40px; */
        }

        #zhuce:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        #zhuce:active {
            background-color: #ffffff;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }

        #add {
            /* margin-left: 60px; */
            width: 60px;
            height: 40px;
            color: #000000;
            background-color: #6a686827;

        }

        #add:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        #add:active {
            background-color: #ffffff;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
</head>

<body>
    <div id="bigbox">
        <h1>登录</h1>
        <div id="title">
            <h2>欢迎来到</h2>
            <h3>ATM自动提款机登录页面</h3>
        </div>
        <div class="Box">
            <div id="first_box">
                <input type="text" placeholder="请输入账户名称">
            </div>
            <div id="second_box">
                <input type="password" id="pwd" placeholder="请输入账户密码">
            </div>
        </div>
        <div class="allbutton">
            <!-- <a href="https://tantanapp.com/" border="2px">
            <button style="background-color: #5350500f;" >登录</button>
        </a> -->
            <!-- window为当前电脑窗口(可删除)location为本地(不能删除) -->
            <!-- 登录按钮 -->
            <button onclick="window.location.href='https://tantanapp.com/'" type="button" id="add" target="_blank">登录</button>
            <!-- 注册按钮 -->
            <button onclick="window.location.href='http://127.0.0.1:5500/register.html'" type="button" id="zhuce" target="_blank">注册</button>
        </div>



        <!-- 一个弊端 无法单独控制按钮的css样式,但是可以实现按钮跳转 -->
        <!-- <form action="https://tantanapp.com/">
                 <input type="submit" value="登录">
             </form> -->
        <script>
            //通过获取id=pwd付给变量psd,通过if判断psd的形式来实现改变现实和隐藏
            var psd = document.getElementById("pwd");
            //隐藏text block，显示password block
            function hideShowPsw() {
                if (psd.type == "password") {
                    psd.type = "text";
                } else {
                    psd.type = "password";
                }
            }
        </script>
</body>

</html>


注册：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body {
            background: url("IMG_6169.PNG")no-repeat;
            /*no-repaet控制背景图不会出现重复的现象*/
            /* background-size: 100% 150%; */
        }

        .headbox {
            width: 900px;
            height: 500px;
            border: 5px solid #EEEEEE;
            background-color: rgba(255, 255, 255, 0.618);
            margin: auto;
            margin-top: 100px;
            border-image: linear-gradient(to right, #0d59e6, #FF0033) 1 10;
            /*linear-gradient() 用于创建一个表示两种或多种颜色线性渐变的图片。*/
        }

        .headbox>p {
            color: #FFD026;
            font-size: 30px;
            margin-left: 20px;
            margin-top: 30px;
            
        }

        h1 {
            color: rgba(132, 148, 128, 0.919);
            margin-left: 20px;
        }   

        .hd_center {
            /*border: 1px solid red;*/
            float: right;
            width: 600px;
            padding: auto;
            /*margin: 15px;*/
        }
        .td_left {
            line-height:20px;
            width: 100px;
            font-family: 楷体;
            font-size: large;
            text-align: left;
        }
        .tb_right {
            float: right;
            margin-right: 15px;
            /*圆角边框*/
            border-radius: 40px;
            
        }
        #female{
            margin-left: 20px;
        }
        .hd_form{
            line-height: 25px;
        }

        #submit {
            width: 150px;
            height: 40px;
            margin-top: 30px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }

        #submit:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        #submit:active {
            background-color: #ffffff;
            /* margin-top: 20px; */
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
        p{
            margin-right: 20px;
        }
        tr{
            width: 20px;
            /* height: 20px; */
        }
    </style>
</head>

<body>
    <div class="headbox">
        <p style="font-family: 华文新魏";>
            新用户注册
        </p>
        <h1>
            USER REGISTER
        </h1>
        <div class="hd_center">
            <div class="hd_form">
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left">用户名：</td>
                            <td class="td_right"><input type="text" name="username" id="username"
                                    placeholder="请输入注册用户名"></td>
                        </tr>
                        <tr>
                            <td class="td_left">密码：</td>
                            <td class="td_right"><input type="password" name="userpassword" id="pass"
                                    placeholder="请输入注册密码"></td>
                        </tr>
                        <tr>
                            <td class="td_left">电子邮箱:</td>
                            <td class="td_right"><input type="email" name="useremail" id="email" placeholder="请输入电子邮箱">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">姓名:</td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入您的真实姓名"></td>
                        </tr>
                        <tr>
                            <td class="td_left">手机号:</td>
                            <td class="td_right"><input type="text" name="phonenumber" id="tel" placeholder="请输入您的手机号">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">性别:</td>
                            <td class="td_right">
                                <label><input type="radio" id="male" name="gender" style="margin-left:10px">男</label>
                                    <label><input type="radio" id="female" name="gender" style="margin-left:30px">女</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">出生日期:</td>
                            <td class="td_right"><select>
                                    <option value="2000">2000</option>
                                    <option value="2001">2001</option>
                                    <option value="2002">2002</option>
                                    <option value="2003">2003</option>
                                    <option value="2004">2004</option>
                                    <option value="2005">2005</option>
                                    <option value="2006">2006</option>
                                    <option value="2007">2007</option>
                                    <option value="2008">2008</option>
                                    <option value="2009">2009</option>
                                    <option value="2010">2010</option>
                                    <option value="2011">2011</option>
                                    <option value="2012">2012</option>
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option selected="selected">-----请选择年份------</option>
                                </select>
                                <select>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option selected="selected">-----请选择月份------</option>
                                </select>
                                <select>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                    <option selected="selected">-----请选择日期------</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">验证码</td>
                            <td class="td_right"><input type="text" name="checknumber" placeholder="请输入验证码"></td>
                            <img src="" alt="">
                        </tr>
                        <tr>
                            <td></td>
                            <td colspan="2" align="left"><input type="submit" id="submit" value="注册" target="_blank"></td>
                        </tr>
                </form>
            </div>
        </div>
        </table>
        <div class="right">
            <!-- target="_blank"  在新窗口打开链接 -->
            <p style="text-align: right;">已有账号?<a href="http://127.0.0.1:5500/ATM.html" target="_blank">立即登录</a></p>
        </div>
    </div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/m0_74135466/article/details/127581187
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022