简易登入界面2020/9/17

最新推荐文章于 2024-07-05 14:58:38 发布

川十三

最新推荐文章于 2024-07-05 14:58:38 发布

阅读量130

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44873026/article/details/108654504

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cls {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 30px;
        }

        .cls div {
            background-color: aqua;
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-right: 1px solid #ccc;
        }

        .cls div:last-child {
            border: none;
        }

        .cls div:hover {
            cursor: pointer
        }


        .contaner {
            width: 500px;
            height: 240px;
            margin: auto;
            position: absolute;
            left: 0;
            bottom: 0;
            top: 0;
            right: 0;
        }
        .userLogin{
            text-align: center;;
            padding: 10px;
            color: #333;
            font-weight: bolder;
            font-size: 24px;
        }
        .FormTab {
            border: 2px solid #e1e1e1;
            border-top: 2px solid #1c5de7;
            box-shadow: 0 0 3px 1px #e1e1e1;
        }
        .FormTab form .inpt{
            width: 90%;
            margin: auto;
        }
        input{
            width: 83%;
            height: 30px;
            margin-top: 30px;
        }
        input[type="password"]{
            width: 83%;
            margin-left: 15px;
        }
        .btns {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
 
        button{
            height: 35px;
            width: 80px;
            margin: 30px 15px 15px 15px;
            cursor: pointer;
        }
        button,input{
            border: 1px solid #ccc;
            border-radius: 5px;
            
        }
    </style>
</head>

<body>
    <!-- <div class="cls">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div> -->
    <div class="contaner">
        <div class="userLogin">用户登入</div>
        <div class="FormTab">
            <form action="">
                <div class="inpt">用户名: <input type="text"></div>
                <div class="inpt">  密码: <input type="password"></div>
                <div class="btns inpt">
                    <div><button>登入</button></div>
                    <div><button>重置</button></div>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

川十三

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易登入界面2020/9/17

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cls {
复制链接

扫一扫