SOURCE

console 命令行工具 X clear

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
    <style>
        html,
        button,
        input,
        select,
        textarea,
        .pure-g [class *="pure-u"] {
            /* 字体栈写在这: */
            font-family: Georgia, Times, "Times New Roman", serif;
        }
        
        .pure-g {
            background-color: #fff
        }
        
        .pure-g div {
            margin: 2px 2px;
            background-color: #aaa;
        }
        
        .box1 {
            width: 600px;
            height: 300px;
            background-color: #aaa;
            margin: 0 auto;
            padding: 20px;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div class="box1">
        <form class="pure-form">
            <fieldset>
                <legend>一个简单的单行表单</legend>
            </fieldset>
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">

            <label for="remember">
            <input type="checkbox" id="remember">记住我
        </label>

            <button type="submit" class="pure-button pure-button-primary">登录</button>
        </form>
    </div>
    <br>
    <br>

    <div class="box1">
        <form action="#" class="pure-form pure-form-stacked">
            <fieldset>
                <legend>堆叠式菜单</legend>
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Email">

                <label for="state">State</label>
                <select id="state">
               <option>AL</option>
               <option>CA</option>
               <option>IL</option>
           </select>

                <label for="remember" class="pure-checkbox">
               <input id="remember" type="checkbox"> Remember me
           </label>

                <button type="submit" class="pure-button pure-button-primary">Sign in</button>

            </fieldset>
        </form>
    </div>
    <br>
    <br>
    <br>
    <div class="box1">
        <form class="pure-form pure-form-aligned">
            <fieldset>
                <legend>对齐式菜单</legend>
                <div class="pure-control-group">
                    <label for="name">Username</label>
                    <input id="name" type="text" placeholder="Username">
                </div>

                <div class="pure-control-group">
                    <label for="password">Password</label>
                    <input id="password" type="password" placeholder="Password">
                </div>

                <div class="pure-control-group">
                    <label for="email">Email Address</label>
                    <input id="email" type="email" placeholder="Email Address">
                </div>

                <div class="pure-control-group">
                    <label for="foo">Supercalifragilistic Label</label>
                    <input id="foo" type="text" placeholder="Enter something here...">
                </div>

                <div class="pure-controls">
                    <label for="cb" class="pure-checkbox">
                        <input id="cb" type="checkbox"> I've read the terms and conditions
                    </label>

                    <button type="submit" class="pure-button pure-button-primary">Submit</button>
                </div>
            </fieldset>
        </form>
    </div>

    <br>
    <br>
    <br>
    <div class="box1">
        <form class="pure-form">
            <input type="text" class="pure-input-rounded">
            <button type="submit" class="pure-button">Search</button>
        </form>
    </div>

</body>

</html>