老师，审核下这个作业
来源：3-8 自由编程
web前端高级开发工程师
2021-07-28 22:30:52
<!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>FACULITY</li>
<li>HEVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<!-- banner图片 -->
<section class="banner">
<img src="images/banner3.jpg">
</section>
<div>banner遮罩层</div>
<div>banner表单</div>
<!-- ABOUT部分 -->
<section class="ABOUT">
<h2>ABOUT</h2>
<p>分割线</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</section>
<!-- A WORD ABOUT US部分 -->
<section class="A WORD ABOUT US">
<h2><b>A WORD ABOUT US</b></h2>
<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>
</section>
<!-- EXPLORE部分 -->
<div class="EXPLORE">
<img src="images/bb3.jpg">
</div>
<div>
<p>7000</p>
</div>
<div>
<p>分割线</p>
<p>students</p>
</div>
<div>
<p>600</p>
</div>
<div>
<p>分割线</p>
<p>FACULITY</p>
<img src="images/b1.jpg" alt="">
</div>
<div class="Library">
<p><b>Library</b></p>
<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
</p>
<p>EXPLORE</p>
<img src="images/b2.jpg" alt="">
</div>
<div class="Library">
<p><b>Library</b></p>
<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
</p>
<p>EXPLORE</p>
</div>
<div class="Library">
<p><b>Library</b></p>
<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
</p>
<p>EXPLORE</p>
<img src="images/b3.jpg" alt="">
</div>
<div class="Library">
<p><b>Library</b></p>
<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
</p>
<p><b>EXPLORE</b></p>
<img src="images/b4.jpg" alt="">
</div>
<div class="GALLERY">
<p><b>GALLERY</b></p>
<p>分割线</p>
<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>
<img src="images/03-01.jpg">
<p> Science</p>
<img src="images/03-02.jpg">
<p> Indoor Stadium</p>
<img src="images/03-03.jpg">
<p> transportation</p>
<img src="images/03-04.jpg">
<p> Kids Room</p>
<img src="images/03-05.jpg">
<p> Meditation Classes</p>
<img src="images/03-06.jpg">
<p> Kids Play Ground</p>
</div>
<!-- 页脚部分 -->
<footer>
<p>©2016immoc.com京ICP备13046642号</p>
</footer>
</body>
</html>
1回答
-
同学你好，代码没有书写上的错误，只是结构拆的太散了，建议按照页面模块，重新划分一下html结构:
1、banner区有图片、遮罩、表单，所以建议将三者放在一个容器中：
2、about区，分为顶部标题区，底部内容区；而底部内容，又分为左、中、右：
调整如下：
3、两行四列图文混排，可以化分成8块，每块中分别是图片、文字信息：
4、GALLERY区，可以分成上下两部分，上部分是标题区，下部分是6组图文：
由于不知道同学学到了哪里，所以上述优化可能有些超纲，建议同学参考一下，如果不懂，可以往后继续学。
下次提问，建议问题要对应习题所在的章节，这样老师能知道你学到了哪里，以免发生答复超纲内容，同学看不懂的情况。
祝学习愉快！
0
相似问题