html课题研究学习日记#35

编写联系我们页面 food-contact.html

通过form表单和input组件编写页面

HTML页面

<div class="col-lg-7">

    <form class="form-wrapper">

        <input type="text" class="form-control" placeholder="姓名">

        <input type="text" class="form-control" placeholder="邮箱">

        <input type="text" class="form-control" placeholder="电话">

        <input type="text" class="form-control" placeholder="职业">

        <textarea class="form-control" placeholder="住址"></textarea>

        <button type="submit" class="btn btn-primary">Send <i class="fa fa-envelope-open-o"></i></button>

       </form>

</div>

Form表单css样式

.form-wrapper h4 {

    margin-bottom: 1.5rem;

}

.form-wrapper .form-control {

    background: #fff none repeat scroll 0 0;

    border: 1px dashed #dadada;

    border-radius: 0;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.3px;

    margin-bottom: 1.4rem;

    min-height: 50px;

    text-transform: none;

}

.form-wrapper .btn i {

    padding-left: 0.5rem;

}

.form-wrapper textarea {

    min-height: 120px !important;

    padding-top: 1rem

}

本日学习时间三小时