用html 和 css 写个简洁的登录框

最新推荐文章于 2023-05-17 09:54:10 发布

Bil!

最新推荐文章于 2023-05-17 09:54:10 发布

阅读量550

点赞数 1

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/weixin_45045689/article/details/106768133

版权

HTML和CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言：

这是作业的一部分，写了挺久的。完成了html 和 css 的部分，因为用到了css3 兼容性可能不是这么好，还可以再改进。

效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        input,
        td,
        table,
        th {
            padding: 0px;
            margin: 0px;
        }

        table {
            width: 425px;
            margin: 100px auto;
            border: 2px solid #9dc45f;
            /* 如果把border-collapse 设为 collapse ，那么就与border-radius 不兼容了 */
            /* 也因为设了separate 导致表格的顶部多了些空格 */
            border-collapse: separate;
            text-align: center;
            font-size: 12px;
            border-radius: 8px;
            /* 盒子阴影 ,用来填充因为border-collapse:spearate 带来的“边框” */
            box-shadow: 0px 64px 1px #9dc45f inset;
        }
        td{
            /* 设每个td的高度都为30px , 及表格的行高为30px */
            height: 30px;
        }
        /* 设置第一个tr 的样式 */
        tr:nth-child(1) {
            height: 68px;
            background-color: #9dc45f;
            font-size: 16px;
            color: white;
        }

        /* 设id为 text 的 td元素 */
        #text {
            position: relative;
            vertical-align: bottom;
        }
        /* 设置复选框的样式 */
        #text input{
            vertical-align: middle;
            margin-top:-2px;
            margin-bottom: 1px;
            width: 12px;
            height: 12px;
            appearance: none;
            -webkit-appearance: none;
            opacity: 0;
            outline: none;
        }
        #text label{
            position: absolute;
            left: 161px;
            top: 15px;
            z-index: -1;
            width: 12px;
            height: 12px;
            border: 1px solid black;
        }
        #text input:checked+label::after{
            content: "";
            position: absolute;
            left: 4px;
            top: -3px;
            width: 5px;
            height: 12px;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            transform: rotate(45deg);
        }
        /* 设置复选框样式结束 */

        /* 设提交按键和重置按键的样式 */
        .btn {
            width: 96px;
            height: 27px;
            background-color: #9dc45f;
            border-width: 0px;
            color: white;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <table cellpadding = "2">
        <tr>
            <th>账号密码登录</th>
        </tr>

        <tr>
            <td>
                <form action="">
                    账号：<input type="text">
                </form>
            </td>
        </tr>

        <tr>
            <td>
                <form action="">
                    密码：<input type="password">
                </form>
            </td>
        </tr>

        <tr>
            <td id="text">
                <input type="checkbox" id = "Select">
                <label for="Select"></label>
                下次请自动登录
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" value="登录" class="btn">
            </td>
        </tr>

        <tr>
            <td>
                <input type="reset" class="btn">
            </td>
        </tr>

    </table>

</body>

</html>

Bil!

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
用html 和 css 写个简洁的登录框

前言：这是作业的一部分，写了挺久的。完成了html 和 css 的部分，因为用到了css3 兼容性可以不是这么好，还可以再改进。效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.
复制链接

扫一扫