老师，请帮我看一下
来源：2-10 作业题
拍拍你的头
2019-07-03 15:53:20
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拍拍你的头的作业</title> <link rel="stylesheet" href="C:\Users\光\Desktop\work\css\index.css"> </head> <body> <!-- 顶部 --> <header> <div class="header"> <div class="logo"><a href=""><img src="C:\Users\光\Desktop\work\images\logo.png"></a></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> </header> <!-- banner --> <div class="banner"> <img src="C:\Users\光\Desktop\work\images\banner3.jpg"> </div> <!-- 遮罩层 --> <div class="topLayer"> </div> <div class="topLayer-top"> <form action=""> <table> <tr> <td><input type="text" placeholder="your Name"></td> </tr> <tr> <td><input type="text" placeholder="your Phone"></td> </tr> <tr> <td><input type="text" placeholder="your Email"></td> </tr> <tr> <td><textarea name="" id="" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea></td> </tr> </table> <button>SEND MESSAGE</button> </form> </div> <!-- ABOUT区 --> <div class="about"> <div class="top"> <div class="aboutTitle"> ABOUT </div> <div class="line"> <hr color="#07cbc9" /> </div> <div class="des1"> Lorem Ipsum is simply dummy text of the printing and typesetting<br />industry.Lorem Ipsum has been the industry's standard dummy<br />text ever since the 1500s. </div> </div> <div class="middle clearfix"> <div class="left"> <div class="middleTitle">A WORD<br>ABOUT US</div> <div class="box1"> <div class="des2">Praesent dignissim viverra est,sed<br>bibendum ligula congue non.Sed ac nis<br>let felis gravida commodo?Suspendisse<br>eget ullamcorper ipsum.Suspendisse<br>diam amet.</div> <button>EXPLORE</button> </div> </div> <div class="middlePic"> <img src="C:\Users\光\Desktop\work\images\bb3.jpg"> </div> <div class="right"> <div class="box2"> <div class="box2son"> <div class="number">70000</div> <div class="line2"> <hr color="#07cbc9" /> </div> <div class="word">Students</div> </div> </div> <div class="box3"> <div class="box3son"> <div class="number">600</div> <div class="line3"> <hr color="#07cbc9" /> </div> <div class="word">Faculty</div> </div> </div> </div> </div> <div class="aboutFooter"> <div> <img src="C:\Users\光\Desktop\work\images\b1.jpg"> </div> <div></div> <div> <img src="C:\Users\光\Desktop\work\images\b2.jpg"> </div> <div></div> <div></div> <div> <img src="C:\Users\光\Desktop\work\images\b3.jpg"> </div> <div></div> <div> <img src="C:\Users\光\Desktop\work\images\b4.jpg"> </div> </div> </div> <!-- GALLERY区 --> <!-- 页脚区 --> </body> </html>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 80px;
background: #07cbc9;
}
.logo {
float: left;
padding-top: 16px;
padding-left: 60px;
}
.header .nav {
float: right;
}
.header .nav ul {
padding-right: 60px;
}
.header .nav ul a {
float: left;
list-style: none;
padding-right: 20px;
height: 80px;
line-height: 80px;
text-decoration: none;
font-family: "Microsoft YaHei UI";
font-weight: bolder;
color: #ffffff;
}
.header .nav ul a:hover {
color:#000;
}
.banner {
width: 100%;
height: 800px;
}
.banner img {
width: 100%;
height: 800px;
}
.topLayer {
width: 100%;
height: 800px;
position: absolute;
background: #000;
top: 80px;
left: 0px;
opacity: 0.5;
}
.topLayer-top {
width: 600px;
height: 300px;
position: absolute;
top: 330px;
right: 50%;
margin-right: -300px;
z-index: 2;
}
.topLayer-top input {
width: 505px;
height: 39px;
border: 2px solid #7D7D7D;
color: #7D7D7D;
margin-left: 45.5px;
background-color: rgb(0,0,0,0);
}
.topLayer-top textarea {
width: 505px;
height: 115px;
margin-left: 45.5px;
border: 2px solid #7D7D7D;
background-color: rgb(0,0,0,0);
}
.topLayer-top button {
width: 123px;
height: 43px;
border: 2px solid #7D7D7D;
color: #7D7D7D;
margin-left: 236.5px;
background-color: rgb(0,0,0,0);
}
.topLayer-top input:hover{
border: 2px solid #07cbc9;
}
.topLayer-top textarea:hover{
border: 2px solid #07cbc9;
}
.topLayer-top button:hover{
border: none;
background-color: #07cbc9;
}
.top{
width: 100%;
}
.top .aboutTitle{
text-align: center;
font-size: 50px;
font-weight: bolder;
font-family: "Microsoft YaHei UI";
padding-top: 50px;
}
.top .line{
padding-top: 10px;
}
.top .line hr{
width: 30px;
margin: 0 auto;
}
.top .des1{
text-align: center;
padding-top: 10px;
color: #7D7D7D;
font-size: 20px;
}
.middle{
width: 100%;
background: red;
margin: 0 auto;
}
.middle .left{
width: 370px;
margin-left: 250px;
position:absolute;
z-index: 3;
}
.clearfix:after{
content: ".";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1;
}
.middle .left,.middlePic,.right{
float: left;
}
.middle .left .middleTitle{
width: 130px;
text-align: center;
font-size: 25px;
}
.middle .left .box1{
width: 370px;
height: 246px;
border: 1px solid #7D7D7D;
margin-top: 10px;
background-color: rgb(255,255,255,0.5);
}
.middle .left .box1 .des2{
margin-left: 18px;
margin-top: 25px;
}
.middle .left .box1 button{
width: 102px;
height: 45px;
background-color: #000;
border: none;
color: #FFFFFF;
font-size: 16px;
margin-top: 20px;
margin-left: 18px;
}
.middle .left .box1 button:hover{
background-color: rgb(0,0,0,0);
border: 1px solid #000;
color: #000;
}
.middle .middlePic{
width: 568px;
height: 380px;
position: absolute;
left: 50%;
margin-left: -284px;
}
.middle .middlePic img{
width: 568px;
height: 380px;
}
.middle .right{
width: 238px;
position: absolute;
right: 200px;
}
.middle .right .number{
font-size: 25px;
font-weight: bolder;
text-align: center;
}
.middle .right .line2,.line3{
width: 40px;
margin: 15px auto;
}
.middle .right .word{
font-size: 15px;
text-align: center;
}
.middle .right .box2{
width: 238px;
height: 144px;
position: absolute;
border: 1px solid #07cbc9;
}
.middle .right .box2 .box2son{
position: absolute;
width: 120px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -50px;
}
.middle .right .box3{
position: absolute;
width: 238px;
height: 144px;
top: 170px;
border: 1px solid #07cbc9;
}
.middle .right .box3 .box3son{
position: absolute;
width: 120px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -50px;
}老师，我这个为什么浮动清除不了呢？一定要给middle设置height么？
写回答
2回答
-
好帮手慕慕子
2019-07-03
同学你好
你发现的问题是对的哦， 使用的绝对定位，导致左浮动失效了。 绝对定位引起的父级元素高度塌陷问题， 需要给父级元素设置高度解决哦。
老师这里提供一种另外思路供同学参考一下。
如上图所示，圈起来的部分由于手画，可能不太标准。
（1）设置一个蓝色的大div盒子，设置一个固定的宽度， 然后用margin：0 auto；设置这个盒子居中
（2）里面3个小的绿色div，设置浮动使显示在一行。用margin将三个隔开，
（3）最后在设置一个粉色div容纳遮罩的这部分，并使用绝对定位，可以相对于上面说到的蓝色大div。
3. 看同学粘贴的代码引入css文件和图片使用的都是绝对路径， 建议： 可以使用相对路径引入文件，这样，提交作业的时候，可以不用在修改引入文件的地址了， 直接将文件夹压缩上传即可，
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
拍拍你的头
提问者
2019-07-03
我的floa：left是不是失效了，已经用绝对定位来定位了？像这种情况我要如何去解决我的容器高度坍塌问题呢
0
相似问题