html用form表单做一个简约漂亮的登录页面

Lk_Lixianqi

已于 2022-04-15 02:02:54 修改

阅读量5.6k

点赞数 4

文章标签： html5 css3 前端 css

于 2022-04-15 02:00:21 首次发布

本文链接：https://blog.csdn.net/Louke_lixianqi/article/details/124185988

版权

本文详细介绍了如何使用HTML和CSS创建一个用户友好的登录界面，包括表单布局、验证规则和响应式设计。重点展示了用户名、密码、确认密码和邮箱等字段的样式及布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="shortcut icon" href="icon.png" type="image/x-icon">
</head>
<body class="container">
    <form action="#" method="post" autocomplete="on">
        <table>
            <tr>
                <td class="login-wrapper"><h1>登录</h1></td>
            </tr>
            <tr>
                <td><label>
                    <input type="text" placeholder="用户名" maxlength="4" required/>
                </label></td>
            </tr>
            <tr>
                <td><label>
                    <input type="password" placeholder="密码" minlength="10" required/>
                </label></td>
            </tr>
            <tr>
                <td><label>
                    <input type="password" placeholder="确认密码" required/>
                </label></td>
            </tr>
            <tr>
                <td><label>
                    <input type="email" placeholder="Email"/>
                </label></td>
            </tr>
            <tr>
                <td><label>
                    <input type="tel" placeholder="手机号码" required/>
                </label></td>
            </tr>
            <tr>
                <td><span class="login"><input type="submit" value="登录"/></span></td>
            </tr>
            <tr>
                <td><span id="post">没有账号？<a href="#">注册</a></span></td>
            </tr>
        </table>
    </form>
</body>
</html>

css部分

* {
    margin: 0;
    padding: 0;
}
/*去掉整个网页空白*/

.container {
    height: 100%;
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
/*设置背景颜色*/
body {
    text-align: center;
}

h1 {
    font-size: 45px;
}
/*设置标题字体大小*/
a:link,
a:visited {
    color: rgba(230, 0, 255, 0.35);
    text-decoration: none;
    /*超链接去下划线*/
}

a:hover {
    color: cyan;
    text-decoration: underline;
    /*鼠标放置超链接显示下划线*/
}

table {
    background-color: white;
    /*表格背景颜色*/
    margin-top: 160px;
    margin-left: 620px;
    /*修改整个表格位置大概居于中间位置*/
    width: 480px;
    height: 600px;
    /*修改整个表格的大小*/
    border-radius: 20px;
    /*整个表格添加边框圆角效果*/
}

.login-wrapper {
    text-align: center;
}
/*文本居中显示*/
input {
    outline: none;
    /*去掉输入框点击后的边框聚焦效果*/
    width: 350px;
    border-bottom: 1px solid #dbdbdb;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    /*让输入框有下划线效果*/
}

.login input {
    font-size: 20px;
    width: 200px;
    height: 40px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    /*“登录”按钮背景色*/
    color: #fff;
    /*“登录”两字颜色*/
    border-radius: 20px;
    /*边框圆角*/
}

::placeholder {
    font-size: 14px;
}