<!-- 网页的横幅 -->

    <div class="banner">

        <!-- banner图片 -->

        <img class="banner-img" src="images/banner3.jpg" alt="">

        <!-- banner遮罩层 -->

        <div class="banner-mask-layer"></div>

        <!-- banner表单 -->

        <form action="" method="POST">

            <input class="name btn" type="text" placeholder="your Name">

            <input class="Phone btn" type="text" placeholder="your Phone">

            <input class="email btn"type="email" placeholder="your Email">

            <textarea class="textarea btn" cols="50" rows="5" placeholder="Write Your Comment Here"></textarea><br>

            <input class="submit btn" type="submit" value="SEND MESSAGE">

        </form>

    </div>

* {

    margin: 0;

    padding: 0;

}

/* banner设置相对定位 */

.banner {

    position: relative;

}

/* 图片设置大小 */

.banner .banner-img {

    width: 100%;

    height: 600px;

}

/* 遮罩层 */

.banner .banner-mask-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 600px;

    background-color: rgba(0, 0, 0, 0.5);

}

/* 表单 */

.banner form {

    position: absolute;

    top: 100px;

    width: 504px;

    left: 50%;

    margin-left:-252px ;

    text-align: center;

}

/* 表单元素共性 */

.banner form .btn {

    background: none;

    color: #808080;

    border: 1px solid #808080;

    margin-bottom: 20px;

}

/* name,Phone,email表单边框设置*/

.banner form .name,.Phone,.email {

    width: 504px;

    height: 40px;

}

/* textarea表单边框设置 */

.banner form .textarea {

    width: 504px;

    height: 110px;

}

/* 提交按钮边框设置 */

.banner form .submit {

    width: 200px;

    height: 40px;

    margin-bottom: 0;

}