<div class="banner">

        <!-- 撑满整个web -->

         <img class="A" src="images/dream.jpg">

         <div class="b1"></div>

         <div class="C">

             <input class="b2" type="test"  placeholder="your name">

             <input class="b3" type="tel" width="504px" height="40px" placeholder="your phone">

             <input class="b4" type="email" width="504px" height="40px" placeholder="your email">

             <input class="b5" type="test" width="504px" height="110px" placeholder="write your content here">

             <input class="b5" type="test" width="200px" height="40px" placeholder="send message">

         </div>

    </div>

css.css

/* 开始banner区域 */

.banner{

    width: 100%;

    height: 600px;   

    position: relative; 

}

.banner .A{

    /* 添加图片 */

    width: 100%;

    height: 600px;

}

.banner .b1{

  position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 600px;

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

}

.banner .C{

    position: absolute;

    width: 504px;

    height: 362px;

    top: 50%;

    margin-top: -175px;

    left: 50%;

    margin-left: -252px;

    border:2px solid rgb(179, 248, 18);

}

.banner .C ul li{

    float: left;

    width: 504px;

    height: 40px;

    background-color: tomato;

}

在这里输入代码，可通过选择【代码语言】突出显示