老师我的思路对吗您帮忙看下谢谢
来源：4-6 自由编程
菜鸟瑞
2021-03-12 22:21:40
1通过（绝对定位）让遮罩层在背景图上面，在遮罩层上添加表单元素并且每行增加换行<br>
2设置整个表单（from）
border: 1px solid #808080;
margin-top：100px；上边距100
left: 50%; margin-left: -252px; 设置水平居中
3设置button left: 50%;margin-left: -100px;水平居中
（html区域）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css.css">
</head>
<body>
<div class="banner">
<img src="/banner3.jpg" alt="">
<div class="zz">
<form action="#">
<input type="text" placeholder="your name">
<br>
<input type="text" placeholder="your phone">
<br>
<input type="text" placeholder="your e-mail">
<br>
<textarea name="" id="" cols="30" rows="10" placeholder="write your comnent here"></textarea>
<br>
<button type="submit" aria-placeholder="submit">submit</button>
</form>
</div>
</div>
</body>
</html>
(css.css区域)
*{
margin: 0;
padding: 0;
}
.banner{
width: 100%;
position: relative;
}
img{
width: 100%;
height: 600px;
}
.banner .zz{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
background:rgba(0, 0, 0, 0.5);
}
.banner .zz form{
position: absolute;
/* /* top: 50%; */
left: 50%;
margin-left: -252px;
margin-top: 100px;
/* margin-left: -252px; */
}
.banner .zz form input{
/* position: absolute; */
width: 504px;
height: 40px;
border: 1px solid #808080;
background: none;
/* margin-bottom: 10px; */
}
.banner .zz form textarea{
width: 504px;
height: 110px;
border: 1px solid #808080;
background: none;
}
.banner .zz form button{
position: absolute;
width: 200px;
height: 40px;
text-align: center;
left: 50%;
margin-left: -100px;
}
input,button,textarea{
margin-bottom: 10px;
background: none;
color: #808080;
border: 1px solid #808080;
}
1回答
-
同学你好，代码思路是可以的，但是还可以优化：
1、input框设置宽度为504px，设置了1px边框，那么总体宽度为506px，所以设置表单margin-left值的时候，应该是-253px
2、输入框可以不用br换行隔开，建议将输入框以及按钮设置为块元素，按钮中去掉定位，用margin:0 auto;实现居中
祝学习愉快！
0
相似问题