HTML+CSS做登录注册界面

最新推荐文章于 2024-03-19 07:41:56 发布

风从北方来

最新推荐文章于 2024-03-19 07:41:56 发布

阅读量10w+

点赞数 74

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/beifangdefengchuilai/article/details/80495393

版权

HTML 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

在登录界面点注册会进入注册界面

登录界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
        <div style="width:500px;float: right;margin:0 auto;" >
         <label for="username" style="font-size:18px" >用户名：</label>
         <div style="height:35px;width:400px;position:relative;display:inline" >   <!--相关位置--> <!--此处为相关位置与绝对位置联合使用-->
             <input id="username" type="text" style="height:30px;width:350px;padding-right:50px;">
             <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;"></span>  <!--绝对位置-->
         </div>
         <br/>
         <br/>
         <label for="password1" style="font-size:18px" >&nbsp密码：</label>
         <div style="height:35px;width:400px;position:relative;display:inline" >   <!--相关位置--> <!--此处为相关位置与绝对位置联合使用-->
             <input id="password1" type="text" style="height:30px;width:350px;padding-right:50px;">
             <span style="position:absolute;right:16px;top:2px;background-image:url(p.ico);height:16px;width:16px;display:inline-block;"></span>  <!--绝对位置-->
         </div>
         <br/>
         <br/>
         <label for="verification_code" style="font-size:18px" >验证码：</label>
         <input id="verification_code" type="text" style="height:30px;width:350px;">
         <br/>
         <br/>
         <div style="width:426px;float: right;">
             <input type="radio" name="auto_login" value="1"/> 自动登录
             <a herf="找回密码网址">忘记密码？</a>
             <a href="http://localhost:63342/jichu/day16/注册.html?_ijt=eb8klk8d781ojsf5e8eb7tjf41">注册</a>
         </div>
         <br/>
         <br/>
         <div style="width:426px;float: right;">
             <input type="submit" value="登录" style="height:30px;width:400px;background-color:red;"/>
         </div>
     </div>

</body>
</html>

注册界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            color:red;
            margin-left:20px;
            display:inline-block;
        }
        .c{
            color:red;
            margin-left:4px;
            display:inline-block;
        }
        .l{
            font-size:18px;
        }
        .d{
            height:35px;
            width:300px;
            display:inline;
        }
        .i{
            height:30px;
            width:300px;
        }


    </style>
</head>
<body>
    <div style="height:80px;"></div>
    <form enctype="multipart/form-data">
        <div style="width:500px;float:left;margin:0 20px;">
            <div style="font-size:28px;">注册新用户</div>
            <br/>
            <span class="p">*</span>
            <label for="username" class="l">用户名:</label>
            <div style="height:35px;width:300px;position:relative;display:inline;">
                <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;">
                <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;" ></span>
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="phonenumber" class="l">手机号:</label>
            <div  class="d">
                <input id="phonenumber" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="login_password" class="l">登录密码:</label>
            <div  class="d">
                <input id="login_password" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="confirm_password" class="l">确认密码:</label>
            <div  class="d">
                <input id="confirm_password" type="text" class="i">
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="ver_code" class="l">验证码:</label>
            <div  class="d">
                <input id="ver_code" type="text" class="i">
            </div>
            <br/><br/>
            <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1"/>
            <span style="font-size:10px;">我已阅读并同意《用户注册协议》</span>
            <br/><br/>
            <input type="submit" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;background-color:red;display:inline-block;"/>
        </div>
    </form>

</body>
</html>

登录界面效果：

注册界面效果：

风从北方来

关注

74
点赞
踩
457

收藏

觉得还不错? 一键收藏
8
评论
HTML+CSS做登录注册界面

在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&am
复制链接

扫一扫