您的位置：首页 > 编程语言

模拟申请账户，两次密码相同，用户名大于6位，密码不能为空判断，（这是一个布局框架，没有里面的运行代码）

2017-10-24 14:17 561 查看

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>表单样式</title>

    <style type="text/css">

        * {

            font-size: 12px;

            margin: 0;

            padding: 0;

        }

        input {

            width: 320px;

            height: 24px;

            border: 1px solid #999;

            border-radius: 4px;

        }

        .formErr {

            border: 1px solid red;

        }

        .form .label {

            display: block;

            float: left;

            width: 128px;

            height: 40px;

            line-height: 40px;

            text-align: end;

        }

        .form .txt {

            display: block;

            float: left;

            width: 340px;

            height: 40px;

            line-height: 40px;

            padding-left: 16px;

        }

        .form button {

            width: 56px;

            height: 24px;

            background-color: green;

            border: 0;

            border-radius: 4px;

            color: white;

        }

        .form .errTips {

            width: 226px;

            background-color: lightpink;

            color: darkred;

            border-radius: 4px;

            margin-left: 144px;

            margin-top: 6px;

            margin-bottom: 4px;

            padding: 16px 48px;

        }

    </style>

</head>

<body>

<div class="form">

    <div>

        <span class="label">用户名</span>

        <span class="txt"><input type="text" placeholder="6-20个字符"/></span>

    </div>

    <div style="clear: both"></div>

    <div>

        <span class="label">密码</span>

        <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>

    </div>

    <div style="clear: both"></div>

    <div>

        <span class="label">重复密码</span>

        <span class="txt"><input type="password" placeholder="再次输入密码"/></span>

    </div>

    <div style="clear: both"></div>

    <div class="errTips">

        <ul>

            <li>密码长度不能小于6个字符！</li>

            <li>密码不能为空！</li>

            <li>两次密码输入不一致！</li>

        </ul>

    </div>

    <div style="clear: both"></div>

    <div>

        <span class="label"></span>

        <span class="txt"><button>提交</button></span>

    </div>

    <div style="clear: both"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航