为什么我的表单定位了还是会把图片挤掉
*{margin:0;padding:0;}
body{margin:0 auto;font:bold 12px Microsoft YaHei UI;color:#FFF }
.head{background:#07cbc9;width:100%;height:60px;
}
/*logo*/
.logo{float:left;margin-top:5px;margin-left:50px}
/*导航区*/
.nav{float:right;margin-right:40px}
.nav ul li{float:left;margin-right:30px;list-style:none;line-height:60px;z-index:999;height:60px;}
.nav ul a:link{color:#fff}
.nav ul li:hover{background:#000}
/*.banner{position:relative}*/
/*banner区*/
.banner{width:100%;height:400px;}
.banner .picture img{width:100%;height:400px;/*position:relative;top:-300px;left:0;*/}
/*banner遮盖层*/
.banner .cover{position:absolute;top:70px;left:0;width:100%;height:400px;background:#000;opacity:0.5;z-index:1;}
/*banner表单区*/
.banner-form{width:500px;height:300px;position:absolute;top:120px;left:50%;margin-left:-250px;top:120px;z-index:34;border:1px solid red;}
/*.banner-form .form{width:500px;height: 300px;position: absolute;top:0;left:0;}
.banner-form .form .input{width: 450px;height: 30px;border: 1px solid #fff;margin: 5px 24px; background-color: transparent;}*/
.banner-form .form{width:500px;height: 300px;position: absolute;top:0;left:0;font-family:Microsoft YaHei UI; }
.banner-form .form .input{width: 450px;height: 30px;border: 1px solid gray;margin: 5px 24px; background-color: transparent;}
.banner-form .form .textarea{width: 450px;border: 1px solid gray;margin: 5px 24px;padding-top: 5px; background-color: transparent;}
.banner-form .form .button{width:120px;height: 30px;border: 1px solid gray;color:gray;margin: 5px 189px; background-color: transparent;}
<body>
<div class="head">
<div class="logo"><img src="images/logo.png"/></div>
<div class="nav">
<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>CONTACT</li></a>
</ul>
</div>
</div>
<div class="banner">
<div class="picture"><img src="images/banner3.jpg"/></div>
<div class="cover"></div> <!--遮盖层-->
</div>
<div class="banner-form">
<form class="form">
<input type="text" name="" placeholder="your Name" class="input">
<input type="text" name="" placeholder="your Phone" class="input">
<input type="text" name="" placeholder="your Email" class="input">
<textarea placeholder="Write Your Comment Here"rows="6" cols="30" class="textarea"></textarea>
<button class="button">SEND MESSAGE</button>
</form>
</div>
</body>
正在回答
你好同学 ,老师使用多个浏览器测试都没有出现同学截图的情况 , 可能同样的问题在不同浏览器呈现的错误是不一样的 . 老师建议同学能够按照上个的回复先调整一下代码 , 如果调整之后还是出现此类问题 . 然后把调整过后的代码粘贴一下 ,并把自己使用的浏览器以及版本详细描述一下 .以便老师准确的定位问题 .
(推荐同学在练习时或者看视频都使用谷歌浏览器)
祝学习愉快 !
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星