老师帮我检查一下代码，看看有什么不足，谢谢！
<!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>Carrer Builder</title>
<meta name="Description" content="Carrer Builder- Help you find your own job">
<meta name="Keywords" content="Fast, Accurate, High-paying">
</head>
<body>
<!-- Header区域 -->
<header class="header">
<div class="logo">
<h1><img src="images/logo.png"></h1>
</div>
<nav class="main">
<div>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTECT</li>
</ul>
</div>
</nav>
</header>
<!-- Banner区域 -->
<section class="banner">
<!-- Banner中的图片 -->
<div class="images">
<img src="images/banner3.jpg">
</div>
<!-- Bannner中的遮盖 -->
<div class="cover-layer">banner遮盖层</div>
<!-- Banner中的表单 -->
<div class="form">banner表单</div>
</section>
<!-- About区域 -->
<section class="content">
<!-- About上半区 -->
<div calss="uper-content">
<h2>ABOUT</h2>
<p>分割线</p>
<span>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.</span>
</div>
<!-- About下半区 -->
<div calss="lower-content">
<h3>A WORD<br />ABOUT US</h3>
<span>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
</span>
<span><p>EXPLORE</p></span>
<img src="images/bb3.jpg">
<span>
<h3>70000</h3>
<p>分割线</p>
<p>Students</p>
</span>
<span>
<h3>600</h3>
<p>分割线</p>
<p>Faculty</p>
</span>
</div>
</section>
<!-- 图文混排区域 -->
<main calss="images-text">
<!-- 第一张图片 -->
<div class="image">
<img src="images/b1.jpg">
</div>
<!-- 第一段文字 -->
<span class="text">
<h3>Library</h3>
<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>
<p>EXPLORE</p>
</span>
<!-- 第二张图片 -->
<div class="image"><img src="images/b2.jpg"></div>
<!-- 第二段文字 -->
<span class="text">
<h3>Computer Lab</h3>
<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>
<p>EXPLORE</p>
</span>
<!-- 第三段文字 -->
<span class="text">
<h3>Conference Hall</h3>
<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>
<p>EXPLORE</p>
</span>
<!-- 第三张图片 -->
<div class="image"><img src="images/b3.jpg"></div>
<!-- 第四段文字 -->
<span class="text">
<h3>Play Ground</h3>
<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>
<p>EXPLORE</p>
</span>
<!-- 第四张图片 -->
<div class="image"><img src="images/b4.jpg"></div>
</main>
<!-- gallery区域 -->
<article class="gallery">
<!-- gallery的上半区 -->
<div class="uper-gallery">
<h2>GALLERY</h2>
<p>分割线</p>
<span>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.
</span>
</div>
<!-- gallery的下半区 -->
<div class="lower-gallery">
<dl>
<dt><img src="images/03-01.jpg"></dt>
<dd>Science Lab</dd>
<dt><img src="images/03-02.jpg"></dt>
<dd>Indoor Stadium</dd>
<dt><img src="images/03-03.jpg"></dt>
<dd>Transpotation</dd>
<dt><img src="images/03-04.jpg"></dt>
<dd>Kid Room</dd>
<dt><img src="images/03-05.jpg"></dt>
<dd>Meditation Classes</dd>
<dt><img src="images/03-06.jpg"></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</article>
<!-- footer区域 -->
<footer>
<div>© 2016 imooc.com 京ICP备13046642号</div>
</footer>
</body>
</html>
正在回答
同学你好，代码优化如下：
1、About下半区布局不合理：代码没有清晰地划分左中右结构，而且标签嵌套不规范，即span是行内标签，不可以嵌套块级标签（这些知识后面会学，现在大概了解即可），参考代码如下
2、图文混排区域：标签嵌套不规范，即span是行内标签，不可以嵌套块级标签，如下
3、gallery的下半区：建议使用多个dl-dt-dd标签对划分区域，便于后期使用css进行布局，如下
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星