老师，看看整体结构和标签的用法是否正确？
来源：3-8 自由编程
weixin_慕雪4394317
2022-11-28 23:22:46
<!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>项目练手</title>
</head>
<body>
<!-- Header头部 -->
<header>
<!-- logo部分 -->
<div class="logo">
<a href="">
<img src="./image/logo.png" alt="">
</a>
</div>
<!-- 导航区域 -->
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<!-- banner部分 -->
<div class="banner">
<!-- banner图片部分 -->
<div class="pic">
<a href="">
<img src="./image/banner3.jpg" alt="">
</a>
</div>
<!-- banner遮罩层部分 -->
<div class="zhezhao">
<p>banner遮罩层</p>
</div>
<!-- banner表单部分 -->
<div class="table">
<p>banner表单</p>
</div>
</div>
<!-- 主体部分 -->
<main>
<!-- About区域 -->
<div class="about">
<!-- About上半部分 -->
<div class="AboutTop">
<h2>ABOUT</h2>
<span>分割线</span>
<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>
<!-- About下半部分 -->
<div class="AboutBottem">
<!-- about下半部分-左侧 -->
<div>
<h2>A WORD <br> ABOUT US</h2>
<div class="about-left-part">
<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>
<strong>EXPLORE</strong>
</div>
</div>
<!-- about下半部-图片部分 -->
<div class="picture">
<a href="">
<img src="./image/bb3.jpg" alt="">
</a>
</div>
<!-- about下半部分-右侧 -->
<div class="number">
<!-- about下部分-右上 -->
<div class="seven">
<p>70000</p>
<span>分割线</span>
<p>student</p>
</div>
<!-- about下部分-右下 -->
<div class="six">
<p>600</p>
<span>分割线</span>
<p>faculty</p>
</div>
</div>
</div>
</div>
<!-- 图文并排区域 -->
<div class="pic-and-text">
<!-- 上半部分图文并排区域 -->
<div class="Top-pic-and-text">
<!-- 上半部分-pic-01 -->
<div>
<a href="">
<img src="./image/b1.jpg" alt="">
</a>
</div>
<!-- 上半部分-text-01 -->
<div>
<h2>Library</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, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>EXPLORE</p>
</div>
<!-- 上半部分-pic-02 -->
<div>
<a href="">
<img src="./image/b2.jpg" alt="">
</a>
</div>
<!-- 上半部分-text-02 -->
<div>
<h2>Library</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, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>EXPLORE</p>
</div>
</div>
<!-- 下半部分文图并排区域 -->
<div class="Bottom-text-and-pic">
<!-- 下半部分-text-01 -->
<div>
<h2>Library</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, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>EXPLORE</p>
</div>
<!-- 下半部分-pic-01 -->
<div>
<a href="">
<img src="./image/b3.jpg" alt="">
</a>
</div>
<!-- 下半部分-text-02 -->
<div>
<h2>Library</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, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>EXPLORE</p>
</div>
<!-- 图文并茂-下半部分-pic-02 -->
<div>
<a href="">
<img src="./image/b4.jpg" alt="">
</a>
</div>
</div>
</div>
<!-- Gallery区域 -->
<div class="Gallery">
<!-- gallery-Top区域 -->
<div class="gallery-top">
<h2>GALLERY</h2>
<span>分割线</span>
<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>
<!-- gallery-Bottom区域 -->
<div class="gallery-bottom">
<dl>
<dt><a href=""><img src="./image/03-01.jpg" alt=""></a></dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt><a href=""><img src="./image/03-02.jpg" alt=""></a></dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt><a href=""><img src="./image/03-03.jpg" alt=""></a></dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt><a href=""><img src="./image/03-04.jpg" alt=""></a></dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt><a href=""><img src="./image/03-05.jpg" alt=""></a></dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt><a href=""><img src="./image/03-06.jpg" alt=""></a></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
</main>
<!-- footer部分 -->
<footer>
<p>©2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
1回答
-
好帮手慕久久
2022-11-29
同学你好，标签用的没有问题，图片的引用也没有问题，很棒！
祝学习愉快！
0
相似问题
回答 1
回答 1