老师 帮我看一下banner区的样式，为什么表单不显示在图片上，还有这么居中显示
来源：4-3 项目作业
谢永畅
2019-09-19 22:23:27
html：
<!DOCTYPE htm>
<html>
<head>
<title>商场</title>
<link rel="stylesheet"type="text/css"href="index.css">
</head>
<body>
<div class="top">
<div class="top-logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="top-navigation">
<ul>
<li class="bian"><div class="one"><a href="#">HOME</a>
</div>
</li>
<li class="bian"><a href="#">ABOUT</a></li>
<li class="bian"><a href="#">GALLERY</a></li>
<li class="bian"><a href="#">FACULTY</a></li>
<li class="bian"><a href="#">EVENTS</a></li>
<li class="bian"><a href="#">CONCACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner3.jpg" class="banner-img">
<form class="banner-form">
<input type="text"name="" placeholder="your Name" id="lie"><br>
<input type="text"name="" placeholder="your Name" id="lie"><br>
<input type="text"name="" placeholder="your Name" id="lie"><br>
<textarea cols="30"rows="5" id="lie1" placeholder="Write Your Comment Here"></textarea><br>
<input type="submit" name="" placeholder="SEND MESSAGE" id="lie2"><br>
</form>
</div>
</body>
</html>
css样式：
*{
margin:0px;
padding:0px;
}
/*字体设置*/
body{
font-family:Microsoft YaHei UI;
}
/*顶部*/
.top{
width:100%;
height:68px;
background-color:#07cbc9;
line-height:68px;
overflow:hidden;
}
/*logo设置*/
.top .top-logo{
float:left;
margin-left:180px;
margin-right:480px;
margin-top:7px;
}
/*导航栏设置*/
.top .top-navigation ul li{
float:left;
list-style:none;
margin-right:20px;
}
/*导航栏设置离右边距离*/
.top .top-mavigation ul{
margin-right:40px;
height:68;
}
/*导航栏设置去掉下划线*/
.top .top-navigation ul a{
text-decoration:none;
color:white;
}
/*伪类设置鼠标移动到导航栏背景变色*/
.top .top-navigation ul a:hover{
background-color:#000;
display:block;
}
/*banner区*/
/*背景图片设置项*/
.banner{
width:100%;
height:600px;
overflow:hidden;
}
/*背景图片*/
.banner .banner-img{
width:100%;
height:600px;
margin-top:0px;
display:none;
float:left;
opacity:0.9;
}
.banner .banner-form{
width:550px;
postion:absolute;
text-align:center;
height:380px;
line-height:70px;
left:50%;
margin:100px auto;
float:left;
}
/*input标签*/
#lie{
width:400px;
height:30px;
line-height:30px;
background-color:transparent;
color:white;
}
/*多行输入框*/
#lie1{
width:400px;
height:70px;
line-height:30px;
border:1px solid white;
background-color:transparent;
color:white;
}
/*提交按钮*/
#lie2{
width:110px;
height:30px;
line-height:30px;
border:1px solid white;
background-color:transparent;
color:white;
}
/*表单设置*/
.banner .banner-form form{
margin:70px 650px;
line-height:60px;
height:60px;
}
/*伪类设置*/
#lie:hover{
border:1px solid #07cbc9;
}
#lie1:hover{
border:1px solid #07cbc9;
}
#lie2:hover{
background-color: #07cbc9;
border:none;
}
1回答
-
好帮手慕小班
2019-09-20
同学你好：复制运行贴出代码，有如下问题和建议：
1、在banner-form的css样式中position单词写错：
2、根据题目要求：图片上要有半透明的遮罩，而不是直接设置图片的透明度，所以这里建议添加一个div，用来设置图片上方的遮罩层
3、建议将一个img使用div包起来，便于设置它的样式
对应这两个div的属性设置：
.banner .pic .banner-img{ width: 100%; height: 600px; margin-top:0px; } .topLayer{ /*遮罩层样式*/ background-color: #000; opacity: 0.4;/*设置透明度*/ z-index: 1; /*设置层叠顺序，遮罩层在图片的上面*/ position: absolute; /*使用定位，定位在*/ top: 70px; width: 100%; height: 600px; }4、将banner-form的内容同样使用定位，与topLayer定位在一起，并使用z-index，将banner-form放在topLayer的上面。
运行如上css样式后，效果如下：
在banner-form与topLayer的定位中，同学可以根据自己的效果来调整定位的距离呐。
5、注意在top中添加如下两个属性，将top的内容固定展示在页面上
position: fixed; z-index: 100;
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
0
相似问题