老师，请检查代码是否正确，哪里需要调整
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.banner{
width: 100%;
height: 600px;
position: relative;
}
.banner img{
width: 100%;
height: 600px;
position: absolute;
}
.banner .content{
width: 100%;
height: 600px;
background: rgba(0, 0, 0, .5);
position: absolute;
}
.banner .content form{
width: 520px;
height: 400px;
position: absolute;
top: 100px;
left: 50%;
margin-left: -200px;
background: none;
}
.banner .content form p{
margin-bottom: 20px;
text-align: center;
}
.banner .content form input{
width: 504px;
height: 40px;
background: none;
border: 1px solid #888;
}
.banner .content form input.submit{
width: 200px;
}
.banner .content form textarea{
width: 504px;
height: 110px;
background: none;
border: 1px solid #888;
}
</style>
</head>
<body>
<div class="banner">
<img src="images/banner3.jpg" alt="">
<!-- banner遮罩层 -->
<div class="content">
<!-- banner表单 -->
<form action="">
<p><input type="text" placeholder="YourName"></p>
<p><input type="password" placeholder="YourPhone"></p>
<p><input type="email" placeholder="YourEmial"></p>
<p><textarea name="" id="" cols="40" rows="6" placeholder="YourComment"></textarea></p>
<p> <input class="submit" type="submit" value="SEND MESSAGE"></p>
</form>
</div>
</div>
</body>
</html>
正在回答
同学你好，代码中有几处需要调整一下
1、body有默认的margin值，建议：清除body的默认margin值，效果会更美观。代码参考：
2、表单整体没有实现水平居中的效果，左右间距不一样，如下：
建议：form标签的宽度为520px，left值设置为50%，margin-left应该设置为form宽度的一半（负值），代码参考：
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星