列表标签
来源：2-16 小慕医生项目开发
慕勒2497449
2022-03-03 18:06:55
任务: (步骤)
1、使用无序列表，实现Header区域导航栏的内容
2、使用定义列表，实现Gallery区域详细信息区的内容。详细信息区中的每一项使用dl标签，其中图片使用dt包裹，文字使用dd包裹。
<!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>
<style>
</style>
</head>
<body>
<!-- 网页的头部区域 -->
<div class="header">
<p>Header区域分为左右两个部分，Logo和导航。</p>
<!-- logo -->
<div class="logo"></div>
<!-- 导航区域 -->
<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">
<p>Banner区域分为三个部分，图片、遮罩层和表单。</p>
<!-- banner图片 -->
<div class="banner_image"></div>
<!-- banner遮罩层 -->
<div class="banner_mask"></div>
<!-- banner表单 -->
<div class="banner_form"></div>
</div>
<!-- about区域 -->
<div class="about">
<p>about区域分为上下两部分，上部分是标题和简短描述区域，下部分是详细描述区。</p>
<!-- about上半部分 -->
<div class="about_up"></div>
<!-- about下半部分 -->
<div class="about_down"></div>
</div>
<!-- 图文混排区域 -->
<div class="content">
<p>图文混排区域分为8个部分，由图片和文字组成的混合排列。</p>
<!-- 图片1 -->
<div class="img_1"></div>
<!-- 文字2 -->
<div class="text_2"></div>
<!-- 图片3 -->
<div class="img_3"></div>
<!-- 文字4 -->
<div class="text_4"></div>
<!-- 文字5 -->
<div class="text_5"></div>
<!-- 图片6 -->
<div class="img_6"></div>
<!-- 文字7 -->
<div class="text_7"></div>
<!-- 图片8 -->
<div class="img_8"></div>
</div>
<!-- Gallery区域 -->
<div class="gallery">
<p>Gallery区域分为上下两个部分，上部分是标题和简短描述区域、下部分是gallery详细信息区。</p>
<!-- gallery上半部分 -->
<div class="gallery_up">
<dl>
<dt>图片</dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
<!-- gallery下半部分 -->
<div class="gallery_down"></div>
</div>
<!-- 网页的页脚 -->
<div class="footer">
<p>
©2016 imooc.com 京ICP备13046642号
</p>
</div>
</body>
</html>
请老师检查
1回答
-
好帮手慕星星
2022-03-03
同学你好，建议将这种标签提示文字去掉，可以换为注释，不影响结构
布局结构是可以的，祝学习愉快！
0
相似问题