请老师检查，谢谢。
来源：3-8 自由编程
跳很高的猫
2021-08-12 20:48:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" contion="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-27自由编程</title>
</head>
<body>
<!-- 头部 -->
<header>
<!-- logo -->
<div class="logo">
<img src="img/logo.png" alt="">
</div>
<!-- 导航 -->
<nav class="main_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>
</header>
<!-- banner区 -->
<section class="banner">
<!-- banner图片 -->
<div class="banner_img">
<img src="img/banner3.jpg" alt="">
</div>
<!-- 表单区 -->
<div class="form">banner表单</div>
<!-- 遮罩层 -->
<div class="mask">banner遮罩层</div>
</section>
<!-- about区 -->
<section class="about">
<h2>ABOUT</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy </p>
<p>text ever since the 1500s.</p>
<div class="about_left">
<h3>A WORD </h3>
<h3>ABOUT US</h3>
<p>Praesent dignissim viverra est, sed</p>
<p>bibendum ligula congue non. Sed</p>
<p>ac nisl et felis gravida commodo?</p>
<p>Suspendisse eget ullamcorper </p>
<p>ipsum. Suspendisse diam amet.</p>
</div>
<!-- 背景 -->
<div class="about_back">
<img src="img/bb3.jpg" alt="">
</div>
<!-- 右边 -->
<div class="about_right">
<div class="about_right-top">
<span></span><b>70000</b></span>
<span></span>
<p>Students</p>
</div>
<div class="about_right-bottom">
<span><b>600</b></span>
<span></span>
<p>Faculty</p>
</div>
</div>
</section>
<!-- 图文混合区 -->
<section class="exhibition">
<div class="exhibition_1"><img src="img/b1.jpg" alt=""></div>
<div class="exhibition_2">
<h4>Library</h4>
<p><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry</em></p>
<p>Lorem Ipsum has been the industry's standard dummy text ever</p>
<p>since the 1500s, when an unknown printer took a galley of type</p>
<p> and scrambled it to make a type specimen book.</p>
</div>
<div class="exhibition_3"><img src="img/b2.jpg" alt=""></div>
<div class="exhibition_4">
<h4>Library</h4>
<p><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry</em></p>
<p>Lorem Ipsum has been the industry's standard dummy text ever</p>
<p>since the 1500s, when an unknown printer took a galley of type</p>
<p> and scrambled it to make a type specimen book.</p>
</div>
<div class="exhibition_5"><img src="img/b3.jpg" alt=""></div>
<div class="exhibition_6">
<h4>Library</h4>
<p><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry</em></p>
<p>Lorem Ipsum has been the industry's standard dummy text ever</p>
<p>since the 1500s, when an unknown printer took a galley of type</p>
<p> and scrambled it to make a type specimen book.</p>
</div>
<div class="exhibition_7"><img src="img/b4.jpg" alt=""></div>
<div class="exhibition_8">
<h4>Library</h4>
<p><em>Lorem Ipsum is simply dummy text of the printing and typesetting industry</em></p>
<p>Lorem Ipsum has been the industry's standard dummy text ever</p>
<p>since the 1500s, when an unknown printer took a galley of type</p>
<p> and scrambled it to make a type specimen book.</p>
</div>
</section>
<!-- gallery -->
<section class="gallery">
<!-- gallery上部 -->
<div class="gallery_top">
<h2>GALLERY</h2>
<span></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p> text ever since the 1500s.</p>
</div>
<!-- gallery下部 -->
<div class="gallery_bottom">
<dl>
<dt><img src="img/03-01.jpg" alt=""></dt>
<dd>Science Lad</dd>
</dl>
<dl>
<dt><img src="img/03-02.jpg" alt=""></dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt><img src="img/03-03.jpg" alt=""></dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt><img src="img/03-04.jpg" alt=""></dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt><img src="img/03-05.jpg" alt=""></dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt><img src="img/03-06.jpg" alt=""></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</section>
<!-- 页脚区 -->
<footer>
<p>© 2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
1回答
-
好帮手慕久久
2021-08-13
同学你好，代码中有如下问题：
1、优化建议：
about区的标题和标题下的描述，可以放在一个盒子中，这样结构更清晰。文字描述，可以使用br标签换行处理：
文字都在一个p标签中，看上去结构更清晰；其中br标签可以当做扩展内容，会用即可。
同理，about_left中的描述，也可以做如下调整：
其他结构中类似的布局，比如图文混合区......，同学也可以这样调整。
2、优化建议：
about_left、about_back、about_right可以包裹在一个div中，这样整体结构更清晰：
3、about_right中，多写了一个span闭合标签，结构不对，要去除：
祝学习愉快！
0
相似问题