简单登录界面V1.1

爱编程的锤子

已于 2023-08-16 14:11:05 修改

阅读量1.1k

点赞数

文章标签： css html 前端

于 2021-07-11 15:07:25 首次发布

本文链接：https://blog.csdn.net/delphi_7710/article/details/118654545

版权

对上个作品进行了增添，加上了：记住密码和自动登录的复选框，还有找回密码。

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        body {
            background: url("../../photo(all)/background(sky).jpg");
            margin: 250px;
        }


        .accountf {
            padding: 20px 0px 20px 20px;color: #bbbbbb;font-size: 20px;
        }

        .passcode {
            padding: 20px 0px 20px 20px;color: #bbbbbb;font-size: 20px;
        }

        .backpass {
            text-decoration: none;
            color: #bbbbbb;
        }

        .autoin {
            color: #bbbbbb;
        }

        .remembercode {
            color: #bbbbbb;
        }
    </style>
    <link rel="short icon" href="../../photo(all)/titlepicture(banshou).jpeg">
</head>
<body>
<center>
    <table border="0">


        <tr>
            <td class="accountf">
                <b>账号:</b>
            </td>
            <td colspan="2">
                <input type="text" name="account" style="width:200px;height: 20px">
            </td>

        </tr>
        <tr>
            <td class="passcode">
               <b>密码:</b>
            </td>
            <td colspan="2">
                <input type="password" style="width:200px;height: 20px">
            </td>

        </tr>
        <tr>


            <td>
                <input type="checkbox" value="自动登录" class="autoin">自动登录

            <td style="text-align: center">
                <input type="checkbox" value="记住密码" class="remembercode">记住密码
            </td>
            <td>
                <a href="https://www.baidu.com" target="_blank" class="backpass">找回密码</a>
            </td>

        </tr>
        <tr>
            <td colspan="4">
                <input type="submit" value="登录"
                       style="margin: 50px;margin-top:0px;margin-left:10px;width: 300px;height: 50px;font-size: larger;background-color: #bbbbbb;border-radius: 15px;">
            </td>

        </tr>
    </table>
</center>
</body>
</html>

这份是运用表格布局的，比较灵活。