<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS布局</title> <style type="text/css">*{margin: 0;padding: 0; border: 0;}body{margin: 0;padding: 0; border: 0;}a{text-decoration: none;}a:link{color:white;text-decoration:none;} a:visited{color:white;text-decoration:none;} a:hover{color:white;text-decoration:none;} a:active{color:white;text-decoration:none;} .header{width: 1275px; height:64px; background-color: #07cbc9; margin: 0 auto;}.logo{padding-top: 6px; padding-bottom: 6px; padding-left: 60px; float: left; }.menu{width: 450px; height:60px; float: right; text-align: center; padding-right: 40px; }.menu li{display: inline; list-style: none; font-size:12px; color: #ffffff; line-height:60px; padding: 25px 8px;} .menu li:hover{background: #000; } .banner{ width: 1275; position: relative; height: auto;}.banner img{display: block; width: 1275px; height: 600px; margin: 0 auto;} .layer{width: 1275px; height: 600px; margin: 0 auto; background: black; opacity: 0.5; z-index: 1; position: relative; top: -600px; left:0px;}.form {width: 380px; height: auto; margin: 0 auto; position: absolute; top: 200px; left: 38%; color: #ddd; z-index: 2; } .form input,textarea{display: block; width: 350px; height: auto; z-index: 2; padding: 10px; margin-top: 15px; border: 1px solid gray; background: transparent; color: #ddd; } body{overflow: hidde}.form textarea{height: 50px;}.form .sb{width: 110px; text-align: center; margin-left: 120px; } .form input:hover{border: solid 1px #07cbc9;} .form textarea:hover{border: solid 1px #07cbc9;} .form .sb:hover{background:#07cbc9; cursor: pointer; }.about{width: 700px; height: 100% margin:0 auto;} </style></head><body><div class="header"> <div class="logo"><img src="images/logo.png"></div> <div> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FACULTY</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div></div><div class="banner"><img src="images/banner3.jpg"></div><div class="layer"></div><div class="form"> <input type="text" name="name" placeholder="your Name"/> <input type="tel" name="phone" placeholder="your Phone"/> <input type="email" name="email" placeholder="your Email"/> <textarea placeholder="Write Your Comment Here"></textarea> <input type="sumbit" value="SEND MESSAGE" class="sb"/> </div><div class="about"> <div class="top-about">ABOUT</div> <div class="line">-</div> <div class="bottom-about">Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum is simply dummy<br>text ever since the 1500s.</div><div class="gallery"></div></div><div class="footer"></div></body></html>
1 回答
香香的串串
TA贡献1条经验 获得超0个赞
你的 .layer 是相对定位 是针对页面自身位置进行定位 你把.layer 下的
top: -600px;
去掉，问题就能看出来了， relative 定位不会使元素脱离文档流 那个白色是.layer在文档流的位置
- 1 回答
- 0 关注
- 1441 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消