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: 600px;
            background-color: #aaa;
            margin: 0 auto;
            padding: 20px;
            overflow: hidden;
        }
        
        .button-xsmall {
            font-size: 70%;
        }
        
        .button-small {
            font-size: 85%;
        }
        
        .button-large {
            font-size: 110%;
        }
        
        .button-xlarge {
            font-size: 125%;
        }
    </style>
</head>

<body>
    <div class="box1">
        <input type="text" name="_csrf">
        <div class="pure-g">
            <div class="pure-u-1-2 pure-u-lg-1-8">
                <img class="pure-img" src="https://i.loli.net/2020/07/03/Qy3XAeBcR7HtDCS.jpg" alt="html5">
            </div>
        </div>
        <div class="pure-g">
            <div class="pure-u-1-4 pure-u-lg-1-8">
                <img class="pure-img" src="https://i.loli.net/2020/07/03/Qy3XAeBcR7HtDCS.jpg" alt="html5">
            </div>
        </div>
    </div>
    <br>
    <hr>
    <div class="pure-g">
        <button class="pure-button  ">A Pure Button</button> &nbsp;&nbsp;
        <button class="pure-button pure-button-disabled">A disabled button</button> &nbsp;&nbsp;
        <button class="pure-button pure-button-active">A active button</button> &nbsp;&nbsp;
        <button class="pure-button pure-button-primary">A primary button</button> &nbsp;&nbsp;
    </div>
    <br>
    <hr>
    <div>

        <button class="button-xsmall pure-button">Extra Small Button</button>
        <button class="button-small pure-button">Small Button</button>
        <button class="pure-button">Regular Button</button>
        <button class="button-large pure-button">Large Button</button>
        <button class="button-xlarge pure-button">Extra Large Button</button>
    </div>

    <br>
    <hr>
    <div class="pure-g">
        <div class="pure-u-1-24">
            <p>1/24</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-2-24">
            <p>2/24</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-3-24">
            <p>3/24</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-4-24">
            <p>4/24</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-1-5">
            <p>1/5</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-2-5">
            <p>2/5</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-3-5">
            <p>3/5</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-4-5">
            <p>4/5</p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-5-5">
            <p>full length</p>
        </div>
    </div>

</body>

</html>