老师提问一下？
*{
padding:0;
margin:0;
}
.clear{
clear:both;
}
.header{
background: #07cbc9;
width:100%;
height:80px;
}
.logo{
float:left;
padding-left:80px;
padding-top:20px;
}
.nav{
float:right;
padding-right:50px;
padding-top:0;
line-height:80px;
height:80px;
}
.nav ul li{
display:block;
padding-right:20px;
float:right;
color:white;
}
.banner .bgcolor{
background:black;
width:100%;
height:800px;
position: absolute;
opacity: 0.5;
}
.banner img{
width:100%;
height:800px;
padding-top:0;
}
.banner{
width:100%;
padding-top: 0;
}
.banner input{
width:500px;
height:50px;
border:2px solid #ccc;
margin:10px;
}
.banner textarea{
width:500px;
height:115px;
border:2px solid #ccc;
margin:10px;
}
.banner .text{
padding-top: 0;
}
.divtext{
padding-top: 0;
height:800px;
width:100%;
text-align: center;
}
.container{
padding-top: 0;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="header"> <div class="logo"> <img src="./images/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="clear"></div> <div class="container"> <div class="banner"> <div class="bgcolor"></div> <img src="./images/banner3.jpg"> <div class="divtext"> <form> <input type="text" name="name" placeholder="your Name"/> <br> <input type="text" name="name" placeholder="your Phone"/> <br> <input type="text" name="name" placeholder="your Email"/> <br> <textarea name="write" placeholder="Wirte Your Comment Here"></textarea> </form> </div> </div> </div> </div> </body> </html>
老师问下问题1：为什么文本域的内容移动不上去banner图片区域，上面的图片区域的代码很奇怪我把banner区域的所有padding-top：0；去掉了以后，遮罩和图片依然可以重叠？问题2：文本域怎么都移动不上去图片banner区域这是什么原因？
4
收起
正在回答 回答被采纳积分+1
3回答
陈立天
2019-11-26 15:55:41
问下为什么about区域的图片用text-align：center居中之后我想左边移动图片宽度的一般让其居中。为什么移动不了？ 因为container设置的宽度是100%，不能用具体尺寸给页面居中，只能用这个方法了，可是为啥不能向左边移动284px？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="header"> <div class="logo"> <img src="./images/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="clear"></div> <!-- Container区域 --> <div class="container"> <!-- bannert区域 --> <div class="banner"> <div class="bgcolor"></div> <img src="./images/banner3.jpg"> <div class="divtext"> <form> <input type="text" name="name" placeholder="your Name"/> <br> <input type="text" name="name" placeholder="your Phone"/> <br> <input type="text" name="name" placeholder="your Email"/> <br> <textarea name="write" placeholder="Wirte Your Comment Here"></textarea> <br> <input type="submit" name="button" value=" SEND MESSAGE"/> </form> </div> </div> <div class="clear"></div> <!-- about区域 --> <div class="about"> <img src="./images/bb3.jpg"> </div> </div> </div> </body> </html>
*{
padding:0;
margin:0;
}
.clear{
clear:both;
}
.header{
background: #07cbc9;
width:100%;
height:80px;
position: fixed;
top:0;
z-index:2;
}
.logo{
float:left;
padding-left:80px;
padding-top:20px;
}
.nav{
float:right;
padding-right:50px;
padding-top:0;
line-height:80px;
height:80px;
}
.nav ul li{
display:block;
padding-right:20px;
float:right;
color:white;
}
.banner .bgcolor{
background:black;
width:100%;
height:800px;
position: absolute;
opacity: 0.5;
}
.banner img{
width:100%;
height:800px;
padding-top:0;
}
.banner{
width:100%;
padding-top: 0;
}
.banner input{
width:500px;
height:50px;
border:2px solid #ccc;
margin:10px;
}
.banner textarea{
width:500px;
height:115px;
border:2px solid #ccc;
margin:10px;
}
.banner .text{
padding-top: 0;
}
.divtext{
position: absolute;
height:800px;
width:100%;
text-align: center;
top:241px;
}
.container{
padding-top: 80px;
}
input,textarea{
background: transparent;
color: gray;
font-size: 14px;
}
.about{
width:100%;
height:800px;
text-align: center;
}
.about img{
width:568px;
height:380px;
position: absolute;
top:1090px;
padding-left:-284px;
}
好帮手慕粉
2019-11-26 10:34:16
同学你好，关于同学的问题解答如下：
1、图片和遮罩重叠：首先元素默认的padding就为0，所以同学设不设padding-top：0都是没有影响的，都为0，去掉也就不会有什么改变。
2、文本域是通过定位定到banner图片上的，图片是标准流占着位置，所以文本域移动不上去。建议同学给文本域加绝对定位，再给banner加相对定位，让文本域相对于banner定位：
这样文本域就定位到了banner上。
3、同学的网页头部效果与作业要求有出入。网页头部整体应该是固定在顶部的，建议同学给头部设置固定定位fixed并设置top：0定位到顶部，另外鼠标移过右侧的导航项时，导航项的背景色应该发生变化，同学再补充实现一下。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星