dom+css

头部

<header class="header-nar">
    <div class="header-left back">
        <a href="#">
            <img src="images/asd_02.png" />
        </a>
    </div>
    <div class="header-titile">
        <h3>闲置二手</h3>
    </div>
</header>

.header-nar{
    width: 100%;
    position: relative;
    height: 90px;
    padding: 0;
    background-color: #c60c1b;
}
.header-left{
    position: absolute;
    left:20px;
    top: 50%;
    transform: translate(0,-50%);
}
.header-left a{
    display: inline-block;
    vertical-align: middle;
}
.header-left a img{
    display: block;
}
.header-titile{
    width: 100%;
    color: #fff;
    height: 100%;
    text-align: center;
    line-height: 90px;
}

表单

.info_wrap{
    padding: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #DDd;
}
.info_wrap .item{
    color: rgb(96,96,96);
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
}
.info_wrap label{
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    margin-right: 20px;
    width: 20%;
    color: rgb(96,96,96);

}
.check_code{
    color: #c60c1b;
    padding: 10px 20px;
    border: 1px solid #c60c1b;
    border-radius: 5px;
    font-size: 28px;
}

<form enctype="application/x-www-form-urlencoded" action="" method="get">
    <div class="info_wrap">
        <label>手机电话</label><input type="number" name="phone" value="" class="item" placeholder="联系电话"/>
    </div>
    <div class="info_wrap">
        <label>验证码</label><input type="number" name="code" value="" class="item" placeholder="验证码"/><span class="check_code">发送验证码</span>
    </div>
    <div class="info_wrap">
        <label>密码</label><input type="password" name="password" value="" class="item" placeholder="密码"/>
    </div>
    <div class="info_wrap">
        <label>确认密码</label><input type="again_pass" name="again_pass" value="" class="item" placeholder="确认密码"/>
    </div>
    <label></label><input type="submit" class="submit" value="确认修改"/>
</form>