基于HTML+CSS的登录和注册界面分享-蒲公英云

基于HTML+CSS的登录和注册界面分享

Bertha 。 2023-10-11 19:51 104阅读 0赞

点击获取；基于HTML+CSS的登录和注册界面分享

源码编号：F-W10

主要技术：HTML、JS、CSS等技术

网页简介：本网页属于前端网页设计，适合于web课设参考，有登录和注册界面。

用户注册

用户登录

管理员登录

部分核心代码以下是登录部分的ima，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
    </head>
    <body>
        <div id="loginBox_wrap">
            <div id="loginBox">
                <img src="img/02.jpg" />
                <form action="" method="post">
                    <p>
                        <label>用户名</label>
                    <input type="text" name="account" 
                        id="account" placeholder="用户名" />
                    </p>
                    <p>
                        <label>密码</label>
                    <input type="password" name="psw" 
                        id="psw" placeholder="密 码" />
                    </p>
                    <p><input type="submit" value="登录"/></p>
                    <p>
                        <span>
                            <a href="zc.html">新人注册</a>
                            <a href="#">忘记密码</a>
                        </span>
                    </p>
                    <p>
                        <input type="checkbox" name="agree"
                            id="agree" />
                            注册即代表同意并愿意遵守《<a href="#">用户守则</a>》
                    </p>
                    <p>
                        <span>
                            <a href="#">微信登录</a>
                        </span>
                        <span>
                            <a href="#">QQ登录</a>
                        </span>
                        <span>
                            <a href="#">微博登录</a>
                        </span>
                    </p>
                </form>
            </div>
        </div>
    </body>
</html>

以下是注册的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <link rel="stylesheet" type="text/css" href="css/zc.css"/>
    </head>
    <body>
        <div id="zcBox_wrap">
            <div id="zcBox">
                <img src="img/02.jpg" />
                <form action="" method="post">
                    <p>
                        <label>用户名</label>
                    <input type="text" name="account" 
                        id="account" placeholder="请输入您的用户名" />
                    </p>
                    <p>
                        <label>设置密码</label>
                    <input type="password" name="psw" 
                        id="psw" placeholder="建议至少使用两种字符结合" />
                    </p>
                    <p>
                        <label>手机号</label>
                        <input type="text" name="sjh"
                            id="sjh" placeholder="建议填写您常用的手机号" />
                    </p>
                    <p>
                        <label>邮箱</label>
                        <input type="email" name="email"
                            id="email" placeholder="请输入邮箱" />
                    </p>
                    <p><input type="submit" value="注册"/></p>
                    <p>
                        <span>
                            <a href="login.html">我已有账号，马上去登录</a>
                        </span>
                    </p>
                    <p>
                        <input type="checkbox" name="agree"
                            id="agree" />
                            注册即代表同意并愿意遵守《<a href="#">用户守则</a>》
                    </p>
                </form>
            </div>
        </div>
    </body>
</html>