老师麻烦批改一下作业！谢谢～
来源：3-8 自由编程
兔子的小金毛
2022-04-20 13:30:42
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 页头 --> <header> <!-- logo区域 --> <div> <img src = "images/logo.png"> </div> <!-- 导航条 --> <nav> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </nav> <!-- 遮罩层 --> <div class="banner"> <img src="images/banner3.jpg" alt=""> <span>banner表单</span> </div> <!-- 表单 --> <span>banner表单</span> </header> <!-- 网页核心部分 --> <main> <!-- ABOUT --> <section class = "ABOUT"> <!-- ABOUT CONTACT --> <div class="ABOUT TITLE"> <h3>ABOUT</h3> <span>分割线</span> <!-- ABOUT DESCRIPTION --> <p>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.</p> </div> <!-- A WOED ABOUT US --> <div class="AWAU"></div> <h4> A WORD <br /> ABOUT US </h4> <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> </div> <!-- EXPLORE --> <div class="EXPLORE"> <span>EXPLORE <br></span> <img src="images/bb3.jpg" alt=""> <p>70000</p> </div> <!-- STUDENTS --> <div class="STUDENTS"> <span> 分割线<br /> Students </span> <p>600</p> </div> <!-- FACULTY --> <div class="FACULTY"> <span> 分割线<br /> Faculty<br /></span> <img src="images/b1.jpg" alt=""> </div> </section> <!-- Library区域 --> <section class = "LIBRARY"> <!-- Library1 --> <div class="Library1"> <h4>Library</h4> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <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. </p> <span>EXPLORE <br></span> <img src="images/b2.jpg" alt=""> </div> <!-- Library2 --> <div class="Library2"> <h4>Library</h4> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <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. </p> <span>EXPLORE <br></span> </div> <!-- Library3 --> <div class="Library3"> <h4>Library</h4> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <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. </p> <span>EXPLORE <br></span> <img src="images/b3.jpg" alt=""> </div> <!-- Library4 --> <div class="Library4"> <h4>Library</h4> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <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. </p> <span>EXPLORE <br></span> <img src="images/b4.jpg" alt=""> </div> </section> <!-- GALLERY区域 --> <section class = "GALLERY"> <div> <h4>GALLERY</h4> <p>分割线</p> <p>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.</p> </div> <!-- SCIENCE LAB --> <div class = "SCIENCE LAB"> <img src="images/03-01.jpg" alt=""> <span> <br> Science Lab</span> </div> <!-- INDOOR STADIUM --> <div class = "INDOOR STADIUM"> <img src="images/03-02.jpg" alt=""> <span> <br> Indoor Stadium</span> </div> <!-- TRANDPORTATION --> <div class = "TRANDPORTATION"> <img src="images/03-03.jpg" alt=""> <span> <br> Transportation</span> </div> <!-- KIDS ROOM --> <div class = " KIDS ROOM"> <img src="images/03-04.jpg" alt=""> <span> <br> Kids Room</span> </div> <!-- MEDITATION CLASSES --> <div class = "MEDITATION CLASSES"> <img src="images/03-05.jpg" alt=""> <span> <br> Meditation Classes</span> </div> <!-- KIDS PLAY GROUND --> <div class = " KIDS PLAY GROUND"> <img src="images/03-06.jpg" alt=""> <span> <br> Kids Play Ground</span> </div> </section> </main> <!-- 页脚 --> <footer> <p>© 2016 imooc.com 京ICP备13046642号</p> </footer> </body> </html>
提问：
虽然整体看起来是没有问题的，但编写代码时总感觉结构很乱。
请问老师关于结构问题上有什么要注意的点吗？
比如注释，或者分类？
谢谢老师：）
写回答
1回答
-
同学你好，img标签的使用是对的。about区域多了一个div闭合标签，导致结构有问题，需要调整：
问题解答如下：
1、编写代码感觉很乱，是因为同学对页面结构的划分不清晰。该页面效果在如下习题：
https://class.imooc.com/lesson/1936#mid=45739
习题中，先帮大家划分了页面结构，比如：
那我们写代码的时候，就要一块一块写，比如头部和banner区可做如下修改：
代码如下：
<!-- 页头 --> <header> <!-- logo区域 --> <div> <img src="images/logo.png"> </div> <!-- 导航条 --> <nav> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </nav> </header> <!-- banner区 --> <div class="banner"> <!-- 背景图 --> <img src="images/banner3.jpg" alt=""> <!-- 表单 --> <span>banner表单</span> <!-- 还有一个黑色透明遮罩(覆盖在图片上) --> <div>遮罩</div> </div>
先划分页面结构（分成一块一块），然后把“一块区域”中的内容写在一起，比如放到一个div中；再细化该div，看看该div中的内容怎么划分，这样就会清晰些。
2、每一块对应页面哪里，建议写上注释，这样便于管理代码。
3、暂时不要着急，后面还会做大量练习，同学也可以看看相关习题问答区中别人的写法，多对比练习，一点点就不乱了。
祝学习愉快！
0
相似问题