html中用fieldset实现用户登录界面

18-07-23 来源：[db:作者]

收藏我要投稿

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>

输出：

点击复制链接与好友分享!回本站首页