设计用户登录与注册界面切换的HTML+CSS+JS代码

木觞清

于 2024-08-02 22:30:08 发布

阅读量289

点赞数 8

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_43580271/article/details/140881602

版权

在现代网页设计中，用户登录和注册界面是与用户进行有效互动的关键元素之一。使用HTML和CSS，我们可以轻松地构建具有良好用户体验的界面。

登录界面设计

<body>
    <div class="box">
        <div style="width: 100%; height: 100%;">
            <div style="display: block;" id="myLogin">
                <div class="left">
                    <button class="register" type="submit" onclick="toggleDivRegister()">去注册</button>
                </div>
                <div class="right" style="margin-left: 300px;">
                    <h2>登录</h2>
                    <form action="">
                        <div style="width: 400px;">
                            <div>
                                <input class="content" type="phone" placeholder="手机号">
                                <input class="content" type="password" placeholder="密码">
                            </div>
                            <div style="padding: 10px;">
                                <span style="float: left;">
                                    <input type="checkbox" /><span style="font-size: 15px;">记住密码</span>
                                </span>
                                <span style="float: right; font-size: 15px; color: rgb(74, 159, 244);">忘记密码？</span>
                            </div>
                        </div>
                        <button class="submit" type="submit">登录</button>
                    </form>
                </div>
            </div>

注册界面设计

            <div style="display: none;" id="myRegister">
                <div class="left">
                    <button class="register" type="submit" onclick="toggleDivLogin()">去登录</button>
                </div>
                <div class="right" style="margin-left: 300px;">
                    <h2 style="color: #74b9ff; font-size: 35px; margin-top: 20px;">注册</h2>
                    <form action="">