项目一任务五 制作首页

非遗文化长廊制作首页CONTENTS目录有序列表第一部分无序列表第二部分定义列表第三部分CONTENTS目录列表嵌套第四部分列表样式第五部分制作“首页”为了有效的组织和呈现网页中的信息，使网页中内容排列有序、条理清晰，就会用到列表标签。有序列表无序列表定义列表有序列表第一部分有序列表有序列表，顾名思义是有顺序的列表，每一个列表项有前后顺序之分，呈先后排列关系。有序列表1.语法有序列表是按数字顺序、字母顺序或罗马数字顺序排列的列表，每个项目前面都有编号或字母前缀。通常适用于需要明确顺序的步骤或项目，比如任务清单、热度排行榜、试卷、调查问卷等。有序列表1.语法<oltype="排序类型"start="起始位置">

<li>第一项</li>

<li>第二项</li><!--更多列表项-->...

</ol>在有序列表中，主要使用<ol>和<li>两个标签以及type、start两个属性。具体语法格式如下：<oltype="排序类型"start="起始位置">

<li>第一项</li>

<li>第二项</li><!--更多列表项-->...

</ol>有序列表1.语法<ol>标签用来定义有序列表<li>用来定义具体的列表项，每个<ol>标签中至少包含一个<li>标签。有序列表1.语法<ol>标签中常用type和start两个属性，其中start为起始位置，属性值为具体的数字，默认值是“1”。type为排序类型，属性值如表1-5-1所示。type属性值属性值描述1列表项目符号显示为数字“1.”“2.”“3.”...a列表项目符号显示为小写字母“a.”“b.”“c.”...A列表项目符号显示为大写字母“A.”“B.”“C.”...i列表项目符号显示为小写罗马数字“i.”“ii.”“iii.”“iv.”...I列表项目符号显示为大写罗马数字“I.”“II.”“III.”“IV.”...表1-5-1

有序列表中type的属性值有序列表2.示例<h3>图书畅销榜</h3><olstart="3"><li>国之脊梁</li><li>走遍中国</li><li>平凡的世界</li><li>人间词话</li><li>劳动是光荣的</li></ol>列表符号的起始值为3有序列表2.示例列表符号的起始值为3，逆序排序如果希望列表项符号逆向排序，可以在<ol>标签中添加reversed属性。<olstart="3"reversed><!--列表符号的起始位置变为3,列表逆向排序-->有序列表2.示例“平凡的世界”列表项为8，其后列表项逆序排序。如果想从某个列表项开始逆向排序，可以在这个列表项中添加属性value,属性值为开始逆向排序的起始数字。<livalue="8">平凡的世界</li><!--从该列表项开始逆向排序，起始数字为8-->有序列表3.小贴士（1）<ol>标签里只能嵌套<li>标签，不能嵌套除<li>标签之外的任何内容，<li>标签里可以嵌套其他HTML标签。（2）<ol>标签中添加多个<li>标签，可以使用快捷方式，在<ol>标签中输入li*5,然后按Enter键，可以快速生成5个列表项。无序列表第二部分无序列表无序列表是网页设计中常用的列表类型之一，其特点是各个列表之间没有顺序级别之分，为并列关系。无序列表无序列表的应用场景非常广泛，适用于展示不需要按顺序排列的项目或事项，如导航菜单、新闻列表、分类列表等。例如，在一个网站的侧边栏中，可以使用无序列表来罗列不同的类别；在商品页面上，可以使用无序列表来展示产品的特点和优势。<ul>

<li>第一项</li>

<li>第二项</li><!--更多列表项-->...

</ul>无序列表1.语法无序列表语法格式如下：<ul>标签用来定义无序列表<li>用来定义具体的列表项，每个<ul>标签中至少包含一个<li>标签。无序列表1.语法默认情况下，无序列表的列表项符号是圆点“·”，但可以通过type属性来改变其样式，type属性值不同，列表项目符号也不同。需要注意的是，<ul>标签和<li>标签都有type属性，用于指定列表的项目符号。表1-5-2显示了无序列表中的type属性值及对应的项目符号。type属性值列表项目符号disc（默认值）列表项目符号显示为实心圆“●”circle列表项目符号显示为空心圆“”square列表项目符号显示为实心方块“”表1-5-2

无序列表中type的属性值无序列表，默认显示为圆点“·”无序列表2.示例<ul><li>文学艺术</li><li>文化社会</li><li>政治历史</li><li>经济管理</li><li>医药卫生</li><li>教育科技</li><li>军事法律</li>

<li>人物传记</li>

<li>人文地理</li></ul>无序列表2.示例列表项目符号显示为方形如果需要修改所有的列表项符号，需要在<ul>标签中添加type属性，代码如下：<ultype="square"><!--修改所有列表项目符号-->无序列表2.示例指定的列表项目符号显示为圆点如果只需要修改某个列表项的列表项目符号，修改对应的<li>标签即可，代码如下：<litype="circle">教育科技</li><!--修改该列表项的列表项目符号-->无序列表3.小贴士（1）在HTML5中，不建议直接使用<ul>标签的type属性。（2）同有序列表类似，<ul>标签中只能嵌套<li>标签，不建议在<ul>标签中直接输入文本内容。（3）<li>标签中,不只是可以存放文字，还可以嵌套其他的网页元素，如图片、链接、段落、其他列表等。定义列表第三部分定义列表定义列表主要用于对术语或概念进行解释和说明，也经常用于制作网页的底部导航或图文混排效果。<dl>

<dt>名词1</dt>

<dd>名词解释1</dd>

<dd>名词解释2</dd>...

<dt>名词2</dt>

<dd>名词解释1</dd>

<dd>名词解释2</dd>...

</dl>定义列表1.语法定义列表语法格式如下：<dl>标签用来定义定义列表<dt>标签用于定义名词<dd>标签用于用于定义名词的解释或者描述定义列表1.语法一个<dt>标签可以对应多个<dd>标签，即一个名词可以有多个解释。一个<dl>标签中也可以嵌套多个<dt>标签，即一个定义列表中可以包含多个名词。当定义列表用于图文混排时，<dt>标签常用于存放图片，<dd>标签存放对图片解释说明的文字。定义列表2.示例通过“纸鸢的发展史”案例，演示定义列表的使用方法。定义列表2.示例运行效果如图。定义列表3.小贴士（1）<dl>标签中只能嵌套<dt>、<dd>标签，不允许出现其他标签，且这3种标签是组合出现的。（2）<dl>标签必须与<dt>标签相邻，一个<dt>标签可以对应多个<dd>标签。列表嵌套第四部分列表嵌套在购物类网站中浏览商品时，经常可以看到商品被分成若干类别，每种商品类别还包含若干子类别，如图所示。通过列表嵌套，可以实现左图效果。列表嵌套导航菜单或者侧边导航菜单不是一个单一的列表，而是一个级联的多级列表，这要通过列表标签的嵌套才能实现。列表嵌套2.示例通过“中国非物质文化遗产”案例，演示列表嵌套使用方法。该案例中先定义了一个包含11个列表项的有序列表，然后在第2个列表项“传统美术”中嵌套一个无序列表（第6-9行代码），在第4个列表项“传统戏剧”中嵌套一个无序列表（第13-19行代码）。列表嵌套2.示例运行效果如图。列表嵌套列表嵌套列表嵌套3.小贴士（1）嵌套的位置在列表项中。（2）虽然技术上可以无限嵌套列表，但过度嵌套会使内容难以阅读和理解，列表嵌套的前提是保证列表的层级和组织结构清晰。列表样式第五部分列表样式网页中漂亮的导航、整齐规范的新闻列表和图片列表等等，都离不开列表的样式修饰。无序列表和有序列表，虽然可以通过标签的属性改变列表的样式，但是这种方式不符合结构与表现分离的网页设计原则，所以不建议直接使用列表标签的属性，通常使用相应的CSS样式代码。CSS提供了一系列的列表样式属性，下面将对这些列表属性进行详细的讲解。列表样式1.list-style-type属性在CSS中，list-style-type属性用来设置列表项项目符号的类型，可用于修饰有序列表和无序列表，list-style-type属性的取值和值说明如下表1-5-3、1-5-4所示。属性值说明none不使用列表项目符号disc默认值，实心圆“●”circle空心圆“”square实心正方形“”表1-5-3

list-style-type属性在无序列表的常用取值列表样式1.list-style-type属性属性值说明none不使用列表项目符号decimal默认值，显示数字1、2、3...lower-alpha显示小写字母a、b、c...upper-alpha显示大写字母A、B、C...lower-roman显示小写罗马数字i、ii、iii、iv...upper-roman显示大写罗马数字I、II、III、IV...表1-5-4

list-style-type属性在有序列表的常用取值列表样式1.list-style-type属性下面通过一个“网站开发技术”案例，演示list-style-type属性的用法。列表样式1.list-style-type属性运行效果如图。列表样式2.list-style-image属性在CSS中，我们可以使用list-style-image属性来自定义列表项符号，实际项目符号是一张图像，其属性值为图像的URL。语法格式如下：list-style-image:url(图像路径);其中，图像路径可以是相对地址，也可以是绝对地址。列表样式2.list-style-image属性通过中国“古诗词中的韵味”案例，演示list-style-image属性的用法。列表样式3.list-style-position属性在CSS中，list-style-position属性用于设置列表项目符号的位置，其属性值分为inside和outside，具体介绍如下：inside：列表项目符号位于列表文本内。outside：默认值，列表项目符号位于文本外。列表样式3.list-style-position属性通过中国“传统记忆与传统美术”案例，演示list-style-position属性的用法。列表样式3.list-style-position属性运行效果如图。列表样式4.list-style属性在列表CSS样式中，可以将列表相关的样式综合在一个复合属性list-style中去设置。list-style属性的语法格式如下。list-style：列表