老师您好,麻烦看下有什么需要改进的
来源:4-6 自由编程
慕仔3411021
2020-11-09 21:56:29
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="banner">
<!-- 图片 -->
<img class="banner-img" src="image/banner3.jpg">
<!-- 遮罩层 -->
<div class="banner-shade">
<!-- 表单 -->
<form class="form">
<input type="text" class="text-input input" placeholder="your Name">
<input type="text" class="text-input input" placeholder="your Phone">
<input type="text" class="text-input input" placeholder="your Email">
<textarea class="comment input" placeholder="write Your Comment Here"></textarea>
<input type="submit" class="submit input" value="SEED MESSAGE">
</form>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.banner{
width: 100%;
height: 600px;
background-color: orange;
position: relative;
}
/* 图片 */
.banner .banner-img{
width: 100%;
height: 600px;
}
/* 遮罩层 */
.banner .banner-shade{
width: 100%;
height: 600px;
background:rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}
/* 表单 */
.banner .banner-shade .form{
position: absolute;
width: 504px;
height: 360px;
left: 50%;
margin-left: -252px;
top: 100px;
text-align: center;
}
/* 表单所有元素共性 */
.banner .banner-shade .form .input{
border: 1px solid #808080;
color: #808080;
background: none;
margin-bottom: 20px;
}
.banner .banner-shade .form .input:last-child{
margin-bottom: 0;
}
/* 前三个元素 */
.banner .banner-shade .form .text-input{
width: 502px;
height: 38px;
}
/* 文本域 */
.banner .banner-shade .form .comment{
width: 502px;
height: 108px;
}
/* 提交按钮 */
.banner .banner-shade .form .submit{
width: 198px;
height: 38px;
}
在这里输入代码,可通过选择【代码语言】突出显示
1回答
同学你好,代码效果实现了哦,非常棒,继续加油!
祝学习愉快!
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1