网页设计与制作基础（HTML5+CSS3）课件 第5章 列表应用.pptx

第5章

列表应用

目录无序列表定义和使用01有序列表定义和使用02自定义列表的定义和使用03列表综合案例04

无序列表是网页中使用最多的列表形式。使用ul/ul标记，其中的每个列表项目使用li/li标记。无序列表也称为项目列表，各个项目li之间属于并列关系，没有先后顺序之分，它们之间使用项目符号来显示。例如下面的例子使用列表来呈现笔记本的品牌：ulli联想笔记本/lili惠普笔记本/lili戴尔笔记本/lili苹果笔记本/li/ul5.1无序列表

小圆点为默认的项目符号，可以设置ul的样式，利用liststyle来更改显示的项目符号，例如设置为空心圆：ul{list-style:circle;}，设置效果如图所示：5.1无序列表

常见的项目符号有：disc实心圆（默认值）circle空心圆square实心方块none无列表除了使用项目符号，还可以自定义项目符号，只需设置ul样式，将样式设置为图片：ul{list-style-image:url(images/ico1.png); }一个列表如果同时设置了项目符号和自定义项目图片，自定义项目图片将覆盖默认的项目符号。 5.1无序列表

下面的例子使用HTML5的nav和无序列表，实现了导航栏菜单制作。效果如图所示。bodyh3web前端开发/h3navulliahref=#HTML5/a/liliahref=#CSS3/a/liliahref=#JavaScript/a/li/ul/navh3web后端开发/h3navulliahref=#Servlet/a/liliahref=#JSP/a/liliahref=#MySql/a/li/ul/nav/body5.1无序列表

列表可以嵌套使用，即一个列表中还可以包含多个层次的列表。ulli联想笔记本ulliThinkPadX1/liliThinkPadT14/liliideapad14S/li/ul/lili惠普笔记本ulli星14Pro/lili星15青春/liliENVY13X360度轻薄翻转/li/ul/lili戴尔笔记本/lili苹果笔记本/li/ul5.1无序列表

有序列表使用ol/ol标记，其中的每个列表项目是有先后顺序的。h1最受欢迎的五大花茶：/h1olli桂花茶/lili菊花茶/lili百合花茶/lili玫瑰花茶/lili金银花茶/li/ol5.2有序列表

5.2有序列表可以使用ol的liststyle来设置编号的样式，例如设置编号样式为小写字母：ol{list-style:lower-alpha;}。常见的有序列表编号有：decimal:数字，默认值lower-alpha:小写英文字母upper-alpha:大写英文字母lower-roman:小写罗马数字upper-roman:大写罗马数字none:无编号

有序列表的编号一般从1,a,A，或者i开始编号，如果要更改起始的编号，可以使用start属性修改。例如：olstart=3li桂花茶/lili菊花茶/lili百合花茶/li /ol如果设置了ol{list-style:lower-alpha;}那么从小写字母的第3个，开始编号。5.2有序列表

dl/dl标记来生成自定义列表dl标签里面包含dt和dd标签，dt是自定义列表标题，dd是自定义列表的内容。h1成语词条天天记/h1dldt白云苍狗/dtdd比喻世事变幻无常。/dddt分庭抗礼/dtdd原指宾客和主人分别站在庭院两边,以平等的礼节相见。后用以比喻互相对立,地位相当。/dddt守株待兔/dtdd比喻死守经验，不知变通。亦用以讽刺妄想不劳而获的侥幸心理。/dd/dl5.3自定义列表

5.4.1使用列表设计垂直导航菜单1.首先使用ul建立列表菜单，并为li的每一项插入超链接，做成目录。ulid=menuliahref=#花茶种类/a/liliahref=#花茶功效/a/liliahref=#花茶泡法/a/liliahref=#花茶采购/a/liliahref=#/a/li/ul2.设置列表样式：设置列表不显示项目符号，并设置列表总体宽度为160px。#menu{list-style-type:none;/*不显示项目符号*/margin:0;padding:0;widt