简单的用户登录，注册，与退出

---

前言

HTML，让生活更奇妙🤣

接下来介绍的是简单的用户登录，注册，与退出

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、登录界面

1.HTML部分

<div id="modal" class="c2">
        <form name="myForm" >
            <p class="c3">用户名 :<label>
                <input type="text" autocomplete="current-username" name="username" id="name1">
            </label></p>
            <p class="c3">密  码 :<label>
                <input type="password" autocomplete="current-password" name="password" id="pwd1">
            </label></p>
            <p class="c3">称呼  :<label>
                <input type="radio" name="identity" value="guest" checked="checked" id="guest">用户
                <input type="radio" name="identity" value="merchant" id="merchant">商家
            </label></p>
            <p class="c3">
                <input type="button" value="确认" id="submit1" onclick="toLogin()">
                <input type="button" value="注册" onclick="toRegister()">
                <input type="button" value="退出" onclick="exit()">
            </p>
    </form>
</div>

2.CSS部分

.c2{
   
    background-color: white;
    position: fixed;
    width: 400px;
    height: 300px;
    top: 50%;
    left: 50%;
    z-index: 3;
    margin-top: -150px;
    margin-left: -200px;
    background-image: url("https://img.zcool.cn/community/011c805c47cab9a801203d222422ac.png@1280w_1l_2o_100sh.png");
    font-size: 18px;
    font-family: 微软雅黑, sans-serif;
}

#modal>p{
   
    margin-left: 80px;
}

#modal .c3{
   
    line-height: 80px;
}

#modal>p>input{
   
    margin-left: 40px;
    font-size: 18px;
    background-color: gold;
}

CSS部分需要根据实际情况而定