老师，看下代码 谢谢
<div class="banner">
<div class="b-image">
<img src="../img/banner3.jpg" alt="">
</div>
<div class="b-zc"></div>
<div class="bfrom">
<form action="">
<input type="text" placeholder="your Name"></br>
<input type="tel" placeholder="your Phone"></br>
<input type="email" placeholder="your Email"></br>
<textarea cols="30" rows="10" placeholder="your Comment"></textarea><br>
<button>SEND MESSAGE</button>
</form>
</div>
</div>
.banner{
position: relative;
height: 600px;
}
.banner img{
width: 100%;
height: 600px;
}
.banner .b-zc{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 600px;
background-color: rgba(0, 0,0, .5);
}
.banner .bfrom{
position: absolute;
width: 560px;
height: 600px;
top: 0px;
left: 50%;
margin-left: -280px;
}
.banner .bfrom form{
position: absolute;
background:none;
width: 560px;
height: 600px;
color: #808080;
top: 100px;
left: 50%;
margin-left: -280px;
text-align: center;
}
.banner .bfrom form input{
display: inline-block;
width: 540px;
height: 40px;
background: none;
border: 1px solid #808080;
margin-bottom: 10px;
margin: 0 auto;
}
.banner .bfrom form textarea{
width: 540px;
height: 110px;
background: none;
margin: 0 auto;
}
.banner .bfrom form button{
width: 200px;
height: 40px;
color: #808080;
border: 1px solid #808080;
background: none;
margin: 0 auto;
}
.banner .bfrom form button:hover{
cursor: pointer;
}
.banner .bfrom form button:active{
position: relative;
top: 2px;
left: 2px;
background-color: #8080807c;
}
正在回答
同学你好，代码中有如下问题：
1、优化建议：
.banner .bfrom form的样式可以简化一下：
2、输入框之间没有间距：
原因是如下两个样式重复了，后面的margin覆盖了前面的margin-bottom，导致margin-bottom变成了0：
调整如下：
3、优化建议：
按钮button是行内块元素，使用margin居中无效（需要使用text-align：center；），如下样式多余，建议删除：
4、优化建议：
点击按钮时，会激活按钮的active状态，此时只需改变背景色就行，其余样式多余，可删除：
祝学习愉快！
-
同学你好，解答如下：
1、banner区的高度是固定的（任何屏幕下，高度都是一样的），因此form表单距离banner顶部固定距离，效果看上去ok就行，不要求垂直居中。
2、同学没有给form设置垂直居中，设置的是水平居中：
它的父元素已经设置过水平居中了，因此没必要再次设置了：
祝学习愉快！
2021-08-28 15:30:08
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星