$$demo <div class="box"> <div class="title">登录页面</div>

<div class="row">
    <label for="username" class="label">用户名</label
    ><input
        id="username"
        class="username"
        type="text"
        placeholder="请输入用户名"
    />
</div>

<div class="row">
    <label for="password" class="label">密码</label
    ><input
        id="password"
        class="password"
        type="password"
        placeholder="请输入密码"
    />
</div>

<button class="login-btn">登录</button>

</div> <style> :root { box-sizing: border-box; }

*,
*::before,
*::after {
    box-sizing: inherit;
}

body{padding: 1px;} .box { margin: 100px auto;

    text-align: center;

    width: 400px;

    border-radius: 16px;

    background-color: pink;

    border: 3px #65336e solid;

    overflow: hidden;
}

.title {
    font-size: 34px;
    font-weight: bold;

    color: white;

    padding: 20px 0;
    margin-bottom: 20px;

    background-color: teal;
}

.label {
    background: #eee;

    width: 70px;
    height: 40px;

    display: inline-block;
    border-radius: 3px 0 0 3px;
    line-height: 40px;
    vertical-align: middle;
    font-size: 14px;

    color: white;

    background-color: teal;
    font-weight: bold;
}

.username,
.password {
    height: 40px;

    border: none;

    padding: 0;

    vertical-align: middle;

    border-radius: 0 3px 3px 0;

    padding: 0 10px;
}

.row,
.login-btn {
    margin-bottom: 20px;
}

.login-btn {
    cursor: pointer;
    padding: 5px 30px;

    border: 3px #65336e solid;
    border-radius: 4px;

    background-color: #ffdb8a;

    color: #65336e;
    font-weight: bold;

    font-size: 22px;
}

.login-btn:hover {
    background-color: #fff0ce;
}

.login-btn:active {
    background-color: #fdcc59;
}

.username:focus,
.password:focus {
    outline: 2px dashed teal;
}

</style> $$

$$answer

<div class="box">
    <div class="title">登录页面</div>

    <div class="row">
        <label for="username" class="label">用户名</label
        ><input
            id="username"
            class="username"
            type="text"
            placeholder="请输入用户名"
        />
    </div>

    <div class="row">
        <label for="password" class="label">密码</label
        ><input
            id="password"
            class="password"
            type="password"
            placeholder="请输入密码"
        />
    </div>

    <button class="login-btn">登录</button>
</div>
<style>
    :root {
        box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
        box-sizing: inherit;
    }

    .box {
        margin: 100px auto;

        text-align: center;

        width: 400px;

        border-radius: 16px;

        background-color: pink;

        border: 3px #65336e solid;

        overflow: hidden;
    }

    .title {
        font-size: 34px;
        font-weight: bold;

        color: white;

        padding: 20px 0;
        margin-bottom: 20px;

        background-color: teal;
    }

    .label {
        background: #eee;

        width: 70px;
        height: 40px;

        display: inline-block;
        border-radius: 3px 0 0 3px;
        line-height: 40px;
        vertical-align: middle;
        font-size: 14px;

        color: white;

        background-color: teal;
        font-weight: bold;
    }

    .username,
    .password {
        height: 40px;

        border: none;

        padding: 0;

        vertical-align: middle;

        border-radius: 0 3px 3px 0;

        padding: 0 10px;
    }

    .row,
    .login-btn {
        margin-bottom: 20px;
    }

    .login-btn {
        cursor: pointer;
        padding: 5px 30px;

        border: 3px #65336e solid;
        border-radius: 4px;

        background-color: #ffdb8a;

        color: #65336e;
        font-weight: bold;

        font-size: 22px;
    }

    .login-btn:hover {
        background-color: #fff0ce;
    }

    .login-btn:active {
        background-color: #fdcc59;
    }

    .username:focus,
    .password:focus {
        outline: 2px dashed teal;
    }
</style>

$$