HTML写一个简单的登录注册界面

最新推荐文章于 2024-06-05 13:34:25 发布

□_□□_□

最新推荐文章于 2024-06-05 13:34:25 发布

阅读量7.2k

点赞数 9

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_62854251/article/details/127606468

版权

页面样式

HTML代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<div class="box">
    <div class="login_box">
        <form action="#" method="post" class="from_box">
            <h1>Login</h1>
            <div class="box">
                <p><input class="login_account" type="email" name="Account" placeholder="Account"></p>
                <p><input class="login_account" type="email" name="Password" placeholder="Password"></p>
                <p>
                    <input class="login_login" type="submit" value="登录">
                    <input class="login_login" type="submit" value="注册">
                </p>
                <p class="login_login_p">---版权信息---</p>
            </div>
        </form>
    </div>
</div>
</body>
</html>

CSS代码

<style type="text/css">
        .login_box {
            border-radius: 10px;/*设置盒子的圆角*/
            margin: 0 auto;/*设置盒子居中*/
            text-align: center;/*内容居中*/
            width: 400px;
            height: 600px;
            background-color: lightblue;
        }
        h1 {
            caret-color: transparent;/*不显示光标*/
            width: 400px;
            height: 60px;
            background-color: darkorange;
            border-radius: 10px 10px 0 0;
        }
        .login_login {
            width: 180px;
            height: 40px;
            border-radius: 5px;/*设置盒子的圆角*/
            background-color: lightpink;
            border: 0;
        }
        .login_login:hover {
            background-color: pink;
        }
        .box {
            margin-top: 70px;/*盒子距离顶部的距离，以像素为单位*/
            border-radius: 10px;/*设置盒子的圆角*/
        }
        .login_account {
            width: 360px;
            height: 40px;
            border-radius: 5px;/*设置盒子的圆角*/
            border: 0;
        }
        .login_login_p {
            width: 110px;
            margin: 0 auto;/*设置盒子居中*/
        }
        .from_box {
            height: 600px;
            border-radius: 10px;/*设置盒子的圆角*/
        }
    </style>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style type="text/css">
        .login_box {
            border-radius: 10px;/*设置盒子的圆角*/
            margin: 0 auto;/*设置盒子居中*/
            text-align: center;/*内容居中*/
            width: 400px;
            height: 600px;
            background-color: lightblue;
        }
        h1 {
            caret-color: transparent;/*不显示光标*/
            width: 400px;
            height: 60px;
            background-color: darkorange;
            border-radius: 10px 10px 0 0;
        }
        .login_login {
            width: 180px;
            height: 40px;
            border-radius: 5px;/*设置盒子的圆角*/
            background-color: lightpink;
            border: 0;
        }
        .login_login:hover {
            background-color: pink;
        }
        .box {
            margin-top: 70px;/*盒子距离顶部的距离，以像素为单位*/
            border-radius: 10px;/*设置盒子的圆角*/
        }
        .login_account {
            width: 360px;
            height: 40px;
            border-radius: 5px;/*设置盒子的圆角*/
            border: 0;
        }
        .login_login_p {
            width: 110px;
            margin: 0 auto;/*设置盒子居中*/
        }
        .from_box {
            height: 600px;
            border-radius: 10px;/*设置盒子的圆角*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="login_box">
        <form action="#" method="post" class="from_box">
            <h1>Login</h1>
            <div class="box">
                <p><input class="login_account" type="email" name="Account" placeholder="Account"></p>
                <p><input class="login_account" type="email" name="Password" placeholder="Password"></p>
                <p>
                    <input class="login_login" type="submit" value="登录">
                    <input class="login_login" type="submit" value="注册">
                </p>
                <p class="login_login_p">---版权信息---</p>
            </div>
        </form>
    </div>
</div>
</body>
</html>

希望对你们有所帮助，再此感谢各位读者的支持，再次感谢！！！

□_□□_□

关注

9
点赞
踩
79

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML写一个简单的登录注册界面

HTML5登录注册页面简单且详细的教程，内附源码。
复制链接

扫一扫

HTML写一个简单的登录注册界面

页面样式

HTML代码

CSS代码

完整代码

“相关推荐”对你有帮助么？