请老师帮忙检查有无需要注意的问题和需要修改优化的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>习题</title> <link rel="stylesheet" href="css/index.css"> </head> <body>   <header>   <img src="images/logo.png" alt="">   <nav> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </nav> </header>   <div class="banner">   <img class="banner-images" src="images/banner3.jpg" alt="">   <div class="banner-mask-layer"></div>   <div class="banner-forms"> <form action=""> <input class="common" type="text" placeholder="your Name"> <input class="common" type="text" placeholder="your Phone"> <input class="common" type="email" name="" id="" placeholder="your Email"> <textarea class="ta common" name="" id="" cols="50" rows="5" placeholder="Write Your Comment Here"></textarea> <input class="submit common" type="submit" value="SEND MASSAGE"> </form> </div> </div>   <div class="about">   <div class="about-up"> <h2>ABOUT</h2> <p class="boundary"> <p class="short-depict">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 class="about-down"> <h3>A WORD <br />ABOUT US</h3> <div class="block1"> Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet. EXPLORE </div> <img src="images/bb3.jpg" alt=""> <div class="about-down-right"> <div> 70000 <p class="boundary"> Students </div> <div> 600 <p class="boundary"> Faculty </div> </div> </div> </div>   <div class="images-and-text"> <div class="image-and-text1"> <img src="images/b1.jpg" alt=""> <h3>Library</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry <p

>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.<

br> EXPLORE </div> <div class="image-and-text2"> <img src="images/b2.jpg" alt=""> <h3>Library</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry <p

>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.<

br> EXPLORE </div> <div class="image-and-text3"> <h3>Library</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry <p

>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.<

br> EXPLORE <img src="images/b3.jpg" alt=""> </div> <div class="image-and-text4"> <h3>Library</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry <p

>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.<

br> EXPLORE <img src="images/b4.jpg" alt=""> </div> </div>   <div class="gallery">   <div class="gallery-up"> <h2>GALLERY</h2> <p class="boundary"> 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 class="gallery-down"> <dl> <dt><img src="images/03-01.jpg" alt=""></dt> <dd>Science Lab</dd> <dt><img src="images/03-02.jpg" alt=""></dt> <dd>Indoor Stadium</dd> <dt><img src="images/03-03.jpg" alt=""></dt> <dd>Transportation</dd> <dt><img src="images/03-04.jpg" alt=""></dt> <dd>Kids Room</dd> <dt><img src="images/03-05.jpg" alt=""></dt> <dd>Meditation Classes</dd> <dt><img src="images/03-06.jpg" alt=""></dt> <dd>Kids Play Ground</dd> </dl> </div> </div>   <div class="footer"> © 2016 imooc.com 京ICP备13046642号 </div> </body> </html> 

css

*{  margin: 0;  padding: 0; } ul,ol{  list-style: none; } /* 所有的分割线 */ .boundary{  width: 60px;  height: 3px;  background: #07cbc9;  margin: 10px auto; } header{  width: 100%;  height: 80px;  background-color: #07cbc9; } header .head{  width: 1060px;  margin: 0 auto;  overflow: hidden;  padding: 16px 0; } header img{  float: left;  margin-top: 16px;  margin-left: 20px; } header nav{  float: right; } header nav ul li{  float: left;  font-size: 16px;  color: #fff;  padding:0 10px;  text-align: center;  line-height: 80px; } .banner{  position: relative;  width: 100%;  height: 600px;  overflow: hidden; } .banner .banner-images{  width: 100%;  height: 600px; } .banner .banner-mask-layer{  position: absolute;  top: 0;  left: 0;  height: 600px;  width: 100%;  background:rgba(0, 0, 0, 0.5); } .banner .banner-forms{  position: absolute;  top: 100px;  left: 50%;  margin-left: -252px;  z-index: 1;  width: 504px; } .banner .banner-forms form input{  margin-bottom: 10px; } .banner .banner-forms form .common {  height: 40px;  width: 502px;  border: 1px solid #808080;  background:none; } .banner .banner-forms form .ta{  height: 110px;  margin-bottom: 15px; } .banner .banner-forms form .submit{  width: 200px;  margin: 0 152px;  color: #808080; } .about{  width: 100%;  padding-top: 30px; } .about .about-up h2{  font-size: 32px;  text-align: center; } .about .about-up .short-depict{  text-align: center;  color: gray;  font-size: 14px; } .about .about-down{  width: 1200px;  height: 464px;  margin: 0 auto;  padding-top: 30px;  overflow: hidden;  position: relative; } .about .about-down h3{  font-size: 28px;  width: 150px; } .about .about-down .block1{  position: absolute;  width: 300px;  padding: 20px;  margin-top: 20px;  font-size: 18px;  border: 1px solid gray;  background: rgba(255, 255, 255, 0.5); } .about .about-down .block1 span{  display: inline-block;  width: 140px;  height: 40px;  background: black;  color: white;  text-align: center;  line-height: 40px;  margin-top: 20px; } .about .about-down img{  float: left;  margin-left: 269px;  margin-top: -78px;  width: 650px;  height: 435px; } .about .about-down .about-down-right{  float: right;  margin-top: -78px; } .about .about-down .about-down-right div{  width: 260px;  text-align: center;  border: 1px solid #07cbc9;  margin-bottom: 30px;  padding: 40px 0; } .about .about-down .about-down-right div p:first-child{  font-size: 28px;  font-weight: bold; } 

扶耳摩兔 2021-01-10

源自：浮动与定位 4-8 自由编程

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2021-01-10 14:07:14

同学你好，代码效果实现是对的。

建议优化：可以给h3标题设置左浮动，让所有内容在一排显示

调整图片的margin-left属性值，然后，去掉图片和about-down-right的margin-top属性值，让内容顶部对齐显示了。这样就不需要计算向上移动多少距离了

由于标题设置的左浮动，脱离文档流，影响了遮罩层的位置，可以给遮罩层添加top属性值，调整遮罩层的位置

祝学习愉快~

收起回答

扶耳摩兔提问者 #1

老师，调整之后这样了，感觉并不美观

2021-01-10 19:14:54
好帮手慕慕子回复提问者扶耳摩兔 #2

同学你好，有没有调整图片的margin-left属性值呢？如下图所示：
代码实现是很灵活的，同学代码中的实现的方式是可以的，老师给同学推荐的优化方法，主要是为了减少计算图片和右侧内容需要向上移动多少距离，实现内容顶部对齐的效果。
如果还有问题，可以将你修改后的代码粘贴过来，老师帮助同学测试
祝学习愉快~

2021-01-11 09:36:20
扶耳摩兔提问者回复好帮手慕慕子 #3

啊啊，没有设置，可能看漏了，现在好了，谢谢老师

2021-01-11 12:19:54