老师请看一下3-8自由编程的作业
来源：3-8 自由编程
慕运维8578094
2022-03-25 10:38:16
<!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>
<nav>
<img src="images/logo.png" alt="">
</nav>
<div>
<dl>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</dl>
</div>
</header>
<!-- 网页的banner -->
<banner>
<img src="images/banner3.jpg" alt="">
banner遮罩层
banner表单
</banner>
<main>
<p>分割线</p>
<section>
<h3>ABOUT</h3>
<div>
<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>
<P><h3>A WORD</h3></P>
<P><h3>ABOUT US</h3></P>
<div>
<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>
<div>
<p>EXPLORE</p>
<img src="images/bb3.jpg" alt="">
</div>
<div>
<p>70000</p>
分割线
<p>Students</p>
<p>600</p>
</div>
分割线
<div>
<p>Faculty</p>
<img src=""alt="">
</div>
<h3>Library</h3>
<div>
<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>
<img src="images/b1.jpg" alt="">
</div>
<div>
<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>
<img src="images/b1.jpg" alt="">
</div>
<div>
<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>
<img src="images/b3.jpg" alt="">
</div>
<div>
<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>
<img src="images/b4.jpg" alt="">
</div>
<h3>GALLERY</h3>
</section>
</main>
<footer>
分割线
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>industry. Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
<div>
<img src="images/03-01.jpg" alt="">
<p>Science Lab</p>
</div>
<div>
<img src="images/03-02.jpg" alt="">
<p>Indoor Stadium</p>
</div>
<div>
<img src="images/03-03.jpg" alt="">
<p>Transportation</p>
</div>
<div>
<img src="images/03-04.jpg" alt="">
<p>Kids Room</p>
</div>
<div>
<img src="images/03-05.jpg" alt="">
<p>Meditation Classes</p>
</div>
<div>
<img src="images/03-06.jpg" alt="">
<p>Kids Play Ground/p>
</div>
<p>©2016 imooc.com京ICP备13046642号</p>
</footer>
</body>
</html>
1回答
-
好帮手慕久久
2022-03-25
同学你好，代码有如下问题：
1、dl标签中，不能直接嵌套li标签：
建议将dl换成ul：
2、p标签不要包裹h标签；p标签最好用来直接包裹文字：
另外，标签名不要大写，统一小写更规范。
3、如下位置，p标签没有闭合：
修改如下：
4、整体结构划分比较乱，为了防止同学后面没法继续完成相关习题，老师提供一个html结构，供同学参考：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- header --> <div class="header"> <!-- logo --> <div class="logo"> <img src="./images/logo.png" alt=""> </div> <!-- nav --> <div class="nav"> <ul> <li>HOME</li> <li>ABOUT</li> <li>GALLERY</li> <li>FACULTY</li> <li>EVENTS</li> <li>CONTACT</li> </ul> </div> </div> <!-- banner --> <div class="banner"> <!-- 图片 --> <div class="img"> <img src="./images/banner3.jpg" alt=""> </div> <!-- 遮罩层 --> <div class="layer">banner遮罩层</div> <!-- 表单 --> <div class="form"> banner表单 </div> </div> <!-- about --> <div class="about"> <!-- 上半部分 --> <div class="about-top"> <h3>ABOUT</h3> <div class="line">分割线</div> <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> <!-- 下半部分 --> <div class="about-bottom"> <!-- 左侧内容 --> <div class="left"> <h4> A WORD <br />ABOUT US</h4> <div> <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> </div> </div> <!-- 中间图片 --> <img src="./images/bb3.jpg" alt=""> <!-- 右侧内容 --> <div class="right"> <div> <p>70000</p> <div class="line">分割线</div> <div>Students</div> </div> <div> <p>600</p> <div class="line">分割线</div> <div>Faculty</div> </div> </div> </div> </div> <!-- 图文混排 --> <div class="pic-word"> <div> <img src="./images/b1.jpg" alt=""></div> <!-- 文字区 --> <div> <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> <div>EXPLORE</div> </div> <!-- 图片区 --> <div> <img src="./images/b2.jpg" alt=""></div> <!-- 文字区 --> <div> <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> <div>EXPLORE</div> </div> <!-- 文字区 --> <div> <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> <div>EXPLORE</div> </div> <!-- 图片区 --> <div> <img src="./images/b3.jpg" alt=""></div> <!-- 文字区 --> <div> <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> <div>EXPLORE</div> </div> <!-- 图片区 --> <div> <img src="./images/b4.jpg" alt=""></div> </div> <!-- gallery --> <div class="gallery"> <!-- 上半部分 --> <div> <h3>GALLERY</h3> <div class="line">分割线</div> <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> <!-- 下半部分 --> <div> <dl> <dt><img src="./images/03-01.jpg" alt=""></dt> <dd>Science Lab</dd> </dl> <dl> <dt><img src="./images/03-02.jpg" alt=""></dt> <dd>Indoor Stadium</dd> </dl> <dl> <dt><img src="./images/03-03.jpg" alt=""></dt> <dd>Transportation</dd> </dl> <dl> <dt><img src="./images/03-04.jpg" alt=""></dt> <dd>Kids Room</dd> </dl> <dl> <dt><img src="./images/03-05.jpg" alt=""></dt> <dd>Meditation Classes</dd> </dl> <dl> <dt><img src="./images/03-06.jpg" alt=""></dt> <dd>Kids Play Ground</dd> </dl> </div> </div> <!-- footer --> <div class="footer"> <p>© 2016 imooc.com 京ICP备13046642号</p> </div> </body> </html>
效果图，参考如下链接（注意结构划分）：
https://class.imooc.com/lesson/1936#mid=45739
如果有看不懂的，不要急，可以往后继续学习。
祝学习愉快！
0
相似问题