html中fieldset用户登录 类等方法装饰控件

fieldset做用户登录界面

输入:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名:</label>
        <input id="username" type="text" name="user" />
        <br />
        <label for="pwd">密码:</label>
        <input id="pwd" type="text" name="user" />
    </fieldset>
</body>
</html>

输出:

类装饰控件

输入:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
        #i2{
            background-color: #2459a2;
            height: 48px;
        }
        #i3{
            background-color: #2459a2;
            height: 48px;
        }
        .c1{
            background-color: #2459a2;
            height: 10px;
        }
        */
        /*#c2{
            background-color: black;
            color: white;
        }

        .c1 div{
            background-color: black;
            color: white;
        }*/
        .i1,.i2,.i3{
             background-color: black;
            color: white;
        }
        .c1[n='alex']{ width:100px; height:200px; }
    </style>
</head>
<body>
    <div class="i1">ff</div>
    <div class="i2">ff</div>
    <div class="i3">2</div>
    <input class="c1" type="text" n="hcl">
    <input class="c1" type="password">
</body>
</html>

输出:

猜你喜欢

转载自blog.csdn.net/zhuisaozhang1292/article/details/81106824