SOURCE

<div>-------------------第一题-------------------</div>
<div class="form">
    <form action="" method="">
        <div class="title">会员注册</div>
        <div class="ipt">
            <div class="usn">
                <input type="text" placeholder="用户名" />
            </div>
            <div class="pwd">
                <input type="password" placeholder="密码" id="pwd" />
            </div>
        </div>
        <div class="check">
            <div class="sex">
                <div class="disc">性别</div>
                <label>
                    <input type="radio" name="sex" value="male" />男
                </label>
                <label>
                    <input type="radio" name="sex" value="female" />女
                </label>
            </div>
            <div class="hobby">
                <div class="disc">爱好</div>
                <label>
                    <input type="checkbox" name="hobby" value="eat" />吃饭
                </label>
                <label>
                    <input type="checkbox" name="hobby" value="sleep" />睡觉
                </label>
                <label>
                    <input type="checkbox" name="hobby" value="beatdowdow" />打豆豆
                </label>
            </div>
        </div>
        <div class="btn">
            <input type="submit" />
            <input type="reset" />
        </div>
    </form>
</div>
<br/>
<br/>
<br/>
<div>-------------------第二题-------------------</div>
<div class="second">
    <p>1、生气是拿别人做错的事来惩罚自己。</p>
    <p>2、每天告诉自己一遍I am a good boy!</p>
    <p>3、自己要先看得起自己，别人才会看得起你</p>
    <p>4、在你发怒的时候，要紧闭你的嘴，免得增加你的怒气</p>
</div>

.form {
    display: flex;
    width: 300px;
    margin: 10px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid orange;
    border-radius: 20px;
}
.disc {
    display: inline-block;
    width: 40px;
}
.title {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 21px;
    font-weight: bold;
}
.ipt, .check, .btn {
    width: 100%;
    margin: 20px auto 20px auto;
}
.usn > input, .pwd > input {
    width: 100%;
    height: 28px;
    outline: none;
    border: none;
    border-bottom: 2px solid gainsboro;
    margin-top: 10px;
}
.check {
    margin: 30px auto 20px auto;
}
.sex, .hobby {
    font-size: 15px;
    margin-top: 10px;
}
.btn {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
.btn > input {
    width: 80px;
    height: 30px;
    background-image: linear-gradient(to right bottom, rgba(255, 166, 0, 0.5), rgba(255, 255, 0, 0.5));
    border: none;
    border-radius: 6px;
}


.second > :nth-child(1) {
    color: red;
}
.second > :nth-child(2) {
    color: green;
}
.second > :nth-child(3) {
    color: purple;
}
.second > :nth-child(4) {
    color: rgb(233, 233, 18);
}