4-11作业 怎么解决塌陷问题
来源：4-11 自由编程
weixin_慕仙8137723
2022-05-31 11:36:34
*{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
text-decoration:none;
}
body{
font: normal 14px/25px "微软雅黑";
}
/*header*/
header{
height: 80px;
background-color: #07cbc9;
}
header .nav{
width: 1200px;
height: 80px;
margin: 0 auto;
overflow: hidden;
}
header .nav .logo{
height: 48px;
padding-top: 16px;
float: left;
}
header .nav nav{
float: right;
width: 600px;
height: 80px;
position: relative;
}
header .nav nav ul{
width: 500px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -40px;
}
header .nav nav ul li{
float: left;
width: 60px;
text-align: center;
line-height: 80px;
margin-right: 20px;
color:white;
}
header .nav nav ul li a{
display: block;
height: 80px;
width: 75px;
font-size: 16px;
color:white;
}
header .nav nav ul li a:hover{
background-color: orange;
}
/*banner*/
.banner{
width: 100%;
position: relative;
}
.banner .img{
width: 100%;
height: 600px;
position: relative;
}
.banner .img .image{
width: 100%;
height: 600px;
}
.banner .img .cover{
width: 100%;
height: 600px;
position: absolute;
top:0;
left:0;
background-color: rgba(0,0,0,.5);
}
.banner .center{
width: 504px;
height: 350px;
position: absolute;
top: 100px;
left: 50%;
margin-left: -252px;
}
.banner .center input{
width: 502px;
height: 38px;
margin-bottom: 20px;
color: #808080;
background-color: rgba(0,0,0,0);
border: solid #808080;
}
.banner .center textarea{
width: 504px;
height: 110px;
margin-bottom: 20px;
color: #808080;
background-color: rgba(0,0,0,0);
border: solid #808080;
}
.banner .center input:last-child{
width: 198px;
height: 38px;
position: relative;
left: 50%;
margin-left: -100px;
color: #808080;
background-color: rgba(0,0,0,0);
border: solid #808080;
cursor: pointer;
}
/*main*/
main{
margin-top: 30px;
}
main .about{
margin: 0 auto;
width: 650px;
height: 120px;
}
span{
display: block;
font-size: 32px;
text-align: center;
font-weight: bold;
}
.divide{
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
main .text{
height: 100px;
width: 450px;
margin: 0 auto;
}
main .about p{
display: block;
text-align: center;
color: grey;
font-size: 14px;
}
main .awau{
width: 1200px;
height: 470px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
main .awau .left{
float: left;
}
main .awau .left h3{
width: 240px;
line-height: 40px;
font-size: 32px;
margin-top: 30px;
margin-bottom: 36px;
float: left;
font-weight: bold;
}
main .awau .left .explore{
width: 320px;
height: 200px;
background: rgba(255,255,255,0.5);
border: 1px solid grey;
font-size: 18px;
position: absolute;
top:50%;
margin-top: -100px;
padding: 20px;
z-index: 2;
}
main .awau .left .explore p{
font-weight: normal;
width: 300px;
}
main .awau .left .explore button{
margin-top: 20px;
width: 140px;
height: 40px;
background-color: black;
}
main .awau .left .explore button a{
font-size: 18px;
color: white;
}
main .awau .student-img{
float: left;
position: absolute;
height: 435px;
width: 650px;
left:50%;
margin-left: -325px;
margin-top: 30px;
z-index: 1;
}
main .awau .right{
margin-top: 30px;
width: 261px;
float: right;
}
main .awau .right .student{
margin-bottom: 30px;
width: 256px;
border: 2px solid #07cbc9;
}
main .awau .right .faculty{
width: 256px;
border: 2px solid #07cbc9;
}
main .awau .right p{
text-align: center;
margin-bottom: 40px;
}
main .awau .right .num{
text-align: center;
margin-top: 40px;
font-size: 28px;
font-weight: bold;
}
main .library{
width: 100%;
margin-bottom: 30px;
}
main .library img{
display: block;
width: 25%;
height: 380px;
float: left;
}
main .library .t{
width: 25%;
height: 380px;
float: left;
background-color: #07cbc9;
}
main .library .t h4{
font-size: 24px;
margin-top: 20px;
margin-left: 20px;
color: white;
}
main .library .t .t1{
margin-left: 20px;
margin-top: 30px;
font-size: 16px;
color: white;
}
main .library .t .t2{
margin-left: 20px;
font-size: 14px;
color: grey;
margin-top: 20px;
}
main .library .t button{
margin-left: 20px;
margin-top: 30px;
width: 138px;
height: 40px;
background-color: black;
}
main .library .t button a{
font-size: 18px;
color: white;
}
/*gallery*/
main .gallery{
width: 100%;
}
main .gallery p{
display: block;
text-align: center;
color: grey;
font-size: 14px;
}
main .gallery-box{
width: 1200px;
height: 653px;
margin: 0 auto;
}
main .gallery-box .gal{
height: 290px;
width: 1160px;
margin-left: 20px;
margin-bottom: 30px;
}
main .gallery-box .gal:last-child{
margin-bottom: 0;
}
main .gallery-box .gal .box{
float: left;
width: 360px;
height: 290px;
margin-right: 20px;
}
main .gallery-box .gal .box:last-child{
margin-right: 0;
}
main .gallery-box .gal dd img{
display: block;
width: 360px;
height: 240px;
}
main .gallery-box .gal dt{
display: block;
height: 36px;
width: 340px;
background-color: black;
color: white;
padding-left: 20px;
padding-top: 14px;
}
footer{
position: relative;
height: 80px;
width: 100%;
margin-bottom: 0;
background-color: #07cbc9;
}
footer p{
position: absolute;
width: 300px;
height: 20px;
top: 50%;
margin-top: -10px;
left: 50%;
margin-left: -150px;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Career Builder</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <header> <!-- 网页的logo --> <div class="nav"> <div class="logo"> <img src="images/logo.png" alt="logo"> </div> <nav> <ul> <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> </nav> </div> </header> <!--网页的banner--> <div class="banner"> <div class="img"> <img class="image" src="images/banner3.jpg" alt="banner图片"> <div class="cover"></div> </div> <div class="center"> <form> <p> <input type="text" placeholder="your Name"> <input type="text" placeholder="your Phone"> <input type="email" placeholder="your Email"> <textarea col="20" rows="3" placeholder="Write Your Comment Here"></textarea> </p> <p> <input class="submit" type="submit" value="SEND MESSAGE"> </p> </form> </div> </div> <!--网页的主要内容--> <main> <!--about first half--> <article class="about"> <span>ABOUT</span> <div class="divide"></div> <div class="text"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> </article> <article class="awau"> <div class="left"> <h3>A WORD ABOUT US</h3> <div class="explore"> <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet. </p> <button><a href="">EXPLORE</a></button> </div> </div> <img class="student-img" src="images/bb3.jpg" alt="students"> <div class="right"> <div class="student"> <div class="num">70000</div> <div class="divide"></div> <p>Students</p> </div> <div class="faculty"> <div class="num">600</div> <div class="divide"></div> <p>Faculty</p> </div> </div> </article> <div class="library"> <img src="images/b1.jpg"> <div class="t"> <h4>Library</h4> <p class="t1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="t2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button><a href="">EXPLORE</a></button> </div> <img src="images/b2.jpg"> <div class="t"> <h4>Library</h4> <p class="t1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="t2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button><a href="">EXPLORE</a></button> </div> <div class="t"> <h4>Library</h4> <p class="t1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="t2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button><a href="">EXPLORE</a></button> </div> <img src="images/b3.jpg"> <div class="t"> <h4>Library</h4> <p class="t1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="t2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button><a href="">EXPLORE</a></button> </div> <img src="images/b4.jpg"> </div> <!--gallery--> <div class="gallery"> <span>GALLERY</span> <div class="divide"></div> <div class="text"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="gallery-box"> <!--up--> <div class="gal up"> <dl> <div class="box"> <dd><img src="images/03-01.jpg"></dd> <dt>Science Lab</dt></div> <div class="box"> <dd><img src="images/03-02.jpg"></dd> <dt>Indoor Stadium</dt></div> <div class="box"> <dd><img src="images/03-03.jpg"></dd> <dt>Transportation</dt></div> </dl> </div> <!--down--> <div class="gal down"> <dl> <div class="box"> <dd><img src="images/03-04.jpg"></dd> <dt>Kids Room</dt></div> <div class="box"> <dd><img src="images/03-05.jpg"></dd> <dt>Meditation Room</dt></div> <div class="box"> <dd><img src="images/03-06.jpg"></dd> <dt>Kids Play Ground</dt></div> </dl> </div> </div> </div> </main> <!--footer--> <footer> <p>© 2016 imooc.com 京ICP备13046642号</p> </footer> </body> </html>
写回答
2回答
-
同学你好，是指图文混排区域的高度塌陷问题吗？如果是的话，那么可以通过给library添加overflow:hidden;的方式清除浮动带来的影响，解决高度塌陷问题，示例：
如果不是的话，可以详细描述下具体指的是哪里，便于帮助同学准确高效的定位与解决问题。
代码中存在的其他问题，具体参考如下调整：
1、顶部内容距离居中盒子的左右侧间距不同，导致内容整体居中存在误差，如下图所示：
建议优化：去掉nav和ul的固定宽度，让其由内容撑开宽度，去掉ul的绝对定位，正常布局即可，示例：
li和a元素设置固定的宽度，而里面的内容并不一致，英文有长有短，导致选项之间间距不同，如下图所示：
建议修改：去掉固定宽度，让其由内容撑开宽度，通过设置左右paidding值调整间距，示例：
2、textarea元素实际宽度超出了外层盒子，如下图所示：
建议优化：调整元素的宽度
3、按钮有默认的边框样式，效果不美美观，如下图所示：
建议添加border:none去掉
4、按钮没有水平居中显示，如下图所示：
建议修改：
5、内容距离距离居中盒子的左右侧间距不同，如下图所示：
建议参考下图调整
6、页脚内容可以去掉绝对定位，使用text-align和line-height属性实现文字居中效果，简化代码书写，示例：
祝学习愉快~
0 -
好帮手慕小李
2022-05-31
同学你好，问题出在library类名中的元素进行了浮动，而父级library没有清子元素的浮动所造成的对gallery区域的影响，优化建议如下：
优化后结果如下：
可以直接选中该区域了。
同学自己试试，祝学习愉快！
0
相似问题