麻烦老师看下代码是否正确 效果实现是否准确 以及有没有需要优化的地方 谢谢
来源：3-8 自由编程
夜的解忧铺
2021-06-08 00:15:27
1 在底下的dl部分是否需要创建一个div来包裹每个dl 如不需要是为什么
2 在所有的div中是否存在多余的盒子来包裹内容
3 代码的逻辑和语法是否有问题
<!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>Gareer Bulider </title>
<meta name="Description" content="Gareer Bulider是培养小孩的优秀场所--可靠,设备齐全,资源丰富">
<meta name="Keywords" content="运动,展览,交友">
</head>
<body>
<!-- 页面头部 -->
<header>
<!-- logo -->
<div class="logo">
<img src="images/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">
<!-- 图片 -->
<div class="imgs">
<a href=""><img src="images/banner3.jpg" alt=""></a>
</div>
<!-- 遮罩层 -->
<div class="hidden">banner遮罩层</div>
<!-- 表单 -->
<div class="lists">banner表单</div>
</section>
<!-- about区域 -->
<section class="about">
<div class="main-about">
<!-- 标题和简要描述-->
<div class="easy-des">
<h2><u>ABOUT</u></h2>
<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>
</div>
<!-- 详细描述 -->
<div class=complex-des">
<h2>A WORD ABOUT US</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>
<a href=""><span>EXPLORE</span></a>
</div>
<!-- 放置图片 -->
<div class="img">
<a href=""><img src="images/bb3.jpg" alt=""></a>
</div>
<!-- 学生和天赋 -->
<div class="students">
<p><u>70000</u></p>
<p>Students</p>
</div>
<div class="faculty">
<p><u>600</u></p>
<p>Faculty</p>
</div>
</div>
</section>
<!-- 图文混排区域 -->
<section class="content">
<div class="lib01">
<a href=""><img src="images/b1.jpg" alt=""></a>
<div class="word01">
<p>Library</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href=""><p>EXPLORE</p></a>
</div>
</div>
<div class="lib02">
<a href=""><img src="images/b2.jpg" alt=""></a>
<div class="word02">
<p>Library</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href=""><p>EXPLORE</p></a>
</div>
</div>
<div class="lib03">
<div class="word03">
<p>Library</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href=""><p>EXPLORE</p></a>
</div>
<a href=""><img src="images/b3.jpg" alt=""></a>
</div>
<div class="lib04">
<div class="word04">
<p>Library</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href=""><p>EXPLORE</p></a>
</div>
<a href=""><img src="images/b4.jpg" alt=""></a>
</div>
</section>
<!-- gallery区域 -->
<div class="gallery">
<h2><u>Gallery</u></h2>
<!-- 标题和简要描述 -->
<div class="simple">
<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>
</div>
<div class="complex">
<dl>
<!-- 放置图片 -->
<dt><a href=""><img src="images/03-01.jpg" alt=""></a></dt>
<dd><a href="">cience Lab</a></dd>
</dl>
<dl>
<!-- 放置图片 -->
<dt><a href=""><img src="images/03-02.jpg" alt=""></a></dt>
<dd><a href="">Indoor Stadium</a></dd>
</dl>
<dl>
<!-- 放置图片 -->
<dt><a href=""><img src="images/03-03.jpg" alt=""></a></dt>
<dd><a href="">Transportation</a></dd>
</dl>
<dl>
<!-- 放置图片 -->
<dt><a href=""><img src="images/03-04.jpg" alt=""></a></dt>
<dd><a href="">Kids Room</a></dd>
</dl>
<dl>
<!-- 放置图片 -->
<dt><a href=""><img src="images/03-05.jpg" alt=""></a></dt>
<dd><a href="">Meditation Classes</a></dd>
</dl>
<dl>
<!-- 放置图片 -->
<dt><a href=""><img src="images/03-06.jpg" alt=""></a></dt>
<dd><a href="">Kids Play Ground</a></dd>
</dl>
</div>
</div>
<!-- 页脚 -->
<footer>
<p>©2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
1回答
-
好帮手慕言
2021-06-08
同学你好，解答如下：
1、gallery区域的dl可以不用div再嵌套了，因为结构已经很完整了，不过再用div嵌套一层也是没有问题的。
2、有下划线的地方，建议不用u标签嵌套。虽然使用u标签嵌套之后有下划线了，但是后期再调整样式不太好调，建议：可以使用div实现，后期通过css调整样式。
3、about区域可以再调整一下结构，整体分为上下两部分，下部分又分为左中右三部分，如下：
代码：
图文混排区域的布局不是很合理，建议：可以使用8个div嵌套，如下：一个红框就是一个div
如下位置少了一个引号：
祝学习愉快~
0
相似问题