console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="topbar">
            <img class="logo" src="https://pic3.zhimg.com/v2-5168466fe646e947f633ff7a9667c56e_b.png" >
            <span class="suggestion"><img src="https://pic4.zhimg.com/v2-be1b83d92162afbf285d4e647cf8ccb3_b.png">登录页面"改进建议</span>
        </div>
        <div class="box-main">
            <div class="box-login">
                <p class="icon-qrcode"><img src="https://pic2.zhimg.com/v2-cee140ecc0943cd44cc4fd073962ef1d_b.png"></p>
                <p class="tip-qrcode">扫码登陆更安全</p>
                <div class="form-login">
                    <p class="login-series1">密码登录 短信登录</p>
                    <p class="login-account"><img src="https://pic4.zhimg.com/v2-d100125baea56389efa92144b2495863_b.png"><input placeholder="会员名/邮箱/手机号"></p>
                    <p class="login-password"><img src="https://pic1.zhimg.com/v2-d7b381b7e2e146b114e2804e0470a0bc_b.png"><input placeholder="请输入登录密码"></p>
                    <p><button>登录</button></p>
                    <p class="login-series2"><img src="https://pic4.zhimg.com/v2-dc8e0755b8bb07282d88194dafdbe30f_b.png">微博登录 <img src="https://pic3.zhimg.com/v2-a740935645f24acd132b6749afd0bf02_b.png">支付宝登录</p>
                    <p class="forget-series">忘记密码 忘记用户名 免费注册</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>阿里巴巴集团 阿里巴巴国际站</p>
            <p>阿里巴巴集团 阿里巴巴国际站</p>
            <p>阿里巴巴集团 阿里巴巴国际站</p>
            <p>阿里巴巴集团 阿里巴巴国际站</p>
            <p>阿里巴巴集团 阿里巴巴国际站</p>
            <p>阿里巴巴集团 阿里巴巴国际站</p>
        </div>
    </body>
</html>

body {
    /*background: #e9e9f2;*/
    background: #fff; /* 给整个网页价格白色的背景底色 */
}
input {
    width: 300px;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid #f1eeee;
}
button {
    width: 300px;
    height: 43px;
    background: #ff4700;
    border: 0;
    color: #fff;
}
.forget-series {
    text-align: right;
}
.box-login {
    background: #e9e9f2;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 790px;
    top: 120px;
    padding-top: 25px;
}
.form-login {
    width: 300px;
    margin: auto;
}
.box-main {
    width: 1200px;
    height: 600px;
    background: #1f1e7b;
    position: relative;
    margin: auto;
}
.topbar {
    width: 1200px;
    height: 88px;
    position: relative;
    margin: auto;
    background: #fff; /* 给topbar加背景色 */
}
.footer {
    width: 1200px;
    margin: auto;
    background: #fff; /* 给footer加背景色 */
}

.logo {
    width: 110px;
    height: 54px;
    position: absolute;
    top: 12px;
    left: 0;
}
.suggestion {
    position: absolute;
    right: 0;
    top: 36px;
    font-size: 12px;
    /* 让“改进建议”的图标和文字对齐 */
    display: flex;
    align-items: center;
    /* /让“改进建议”的图标和文字对齐 */
}
.login-series2 {
    /* 让“改进建议”的图标和文字对齐 */
    display: flex;
    align-items: center;
    /* /让“改进建议”的图标和文字对齐 */
}
/* 让小图标和文字之间留一点间距 */
.suggestion img,
.login-series2 img {
    margin-right: 6px;
}
.login-series2 img:nth-child(2) {
    margin-left: 6px;
    /* 给.login-series2，
    也就是微博登录，
    支付宝登录那一行的支付宝的图标
    (
    支付宝图标是他的父元素里面
    左起数第二个的元素
    因此写的是nth-child(2)
    )
    前面加一点间距 */
}
/* 给输入框加左边的装饰图标 */
.login-account,
.login-password {
    display: flex;
}
.login-account img,
.login-password img {
    width: 40px;
    height: 40px;
}
/* /给输入框加左边的装饰图标 */
/* 输入框里面的文字加一点和边框的间距 */
.login-account input,
.login-password input {
    padding: 0 6px;
}
/* /输入框里面的文字加一点和边框的间距 */

/* 二维码 */
.box-login {
    position: relative;
}
.icon-qrcode {
    width: 53px;
    height: 53px;
    /* 三角形的二维码的绝对定位 */
    position: absolute;
    right: 5px;
    top: 2px;
    /* /三角形的二维码的绝对定位 */
    margin: 0; /* 去除p标签默认的上下间距 */
}
.tip-qrcode {
    /* 二维码提示语的绝对定位 */
    position: absolute;
    right: 58px;
    top: 5px;
    /* 二维码提示语的绝对定位 */
    width: 112px;
    height: 28px;
    /* 设置提示语垂直居中 */
    display: flex;
    align-items: center;
    /* /设置提示语垂直居中 */
    color: #ff9000;
    font-size: 12px;
    padding: 0 12px;
    box-sizing: border-box;
    background: url(https://pic2.zhimg.com/v2-2743c1f2643881df651db374086c76f1_b.png) no-repeat 0 0;/* 设置提示语的背景 */
    margin: 0; /* 去除p标签默认的上下间距 */
}
/* /二维码 */