怎么去掉表单的周围白色呢？
来源：2-10 作业题
weixin_慕码人9177259
2019-12-04 17:02:02
这是我做出来的效果图代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;
padding: 0;
font-family:"Microsoft YaHei UI";}
.header{
width:100%;
background: #07cbc9;
height: 80px;
margin: 0 auto;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
margin: 0 auto;
text-align: center;
}
.header .logo img{
width:400px;
height:50px;
margin-top:15px;
margin-left: 20px;
}
.header ul{
text-align: center;
/* padding-top:10px; */
padding-right: 50px;/* 拉大与右边的距离 */
}
.header ul li{
width: 80px;
height:80px;
float: left;
list-style: none;
line-height: 80px;
font-family:"Microsoft YaHei UI" ;
color: white;
font-size: 15px;
font-weight: bold;
}
.banner .banner1{
width: 100%;
height: 500px;
}
.banner .banner1 img{
width: 100%;
height: 500px;
}
.banner .opcity{
width: 100%;
height: 500px;
background: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
margin-top: 80px;
}
.banner{
width: 100%;
height: 500px;
margin: 0 auto;
}
.banner .biaodan {
width: 400px;
height: 300px;
position: absolute;
top:0;
left: 50%;
margin-left: -200px;
margin-top:180px ;
background:transparent;
text-align: center;
color: white;
z-index: 2;
}
.banner .biaodan form .form-in{
margin-bottom: 20px;
width:400px;
height:30px;}
.banner .biaodan form .form-in1{
margin-bottom: 20px;}
.clear{
clear: both;
}
</style>
<link rel="stylesheet" type="text/css" href="../2-10css.css"/>
</head>
<body>
<div class="header">
<div class="logo">
<img src="../img1/logo.png" >
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner1">
<img src="../img1/banner3.jpg" >
</div>
<!-- 遮罩 -->
<div class="opcity"></div>
<div class="biaodan">
<form >
<input type="text" placeholder="you Name" class="form-in" /><br>
<input type="text" placeholder="you Phone" class="form-in"/><br>
<input type="text" placeholder="you Email" class="form-in"/><br>
<textarea rows="4" cols="55" placeholder="When Your Comment Here" class="form-in1"></textarea><br>
<input type="submit" value="SEND MESSAGE" style="margin: 0 auto;" >
</form>
</div>
</div>
<div class="clear"></div>
<div class="about"></div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
这是部分代码，一个banner图里的,从最底下到上层依次是背景图片，遮罩层，表单，请问怎么改才能做成如上效果图
2回答
-
同学你好， 因为background属性不具有继承性，也就是说给父元素设置该属性，它的后代元素不会继承，所以，必须给设置背景的元素添加background属性才会生效。
如果帮助到了你，欢迎采纳，祝学习愉快~
1 -
好帮手慕慕子
2019-12-04
同学你好，对于你的问题解答如下：
通过background:tansparent;属性，设置表单背景透明显示。适当调整边框颜色，效果实现会更好
如下图所示，表单元素有边框，实际占据的页面宽度超出父级容器。
建议：调整表单外层盒子的宽度
设置按钮的样式
头部需要固定在顶部显示。 建议修改：
由于顶部固定定位， 导致banner区域上移，部分被顶部覆盖， 建议：给banner区域设置上外边距，给顶部留出空白显示区域。
如果帮助到了你，欢迎采纳，祝学习愉快~
0h019-12-04
相似问题