网页设计与制作项目教程单元5 包含Flash元素和超级链接的网页制作.pptx

网页设计与制作项目教程（微课版）;单元5 包含Flash元素和超级链接的网页制作;5.1 列表 5.1.1 认识列表 为什么要应用列表？ 为了使网页更易读，我们经常需要将网页信息以列表的形式呈现。 例如，图5-1所示的淘宝商城首页的商品服务分类，就应用了列表的形式。; 为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表，下面将对这3种列表进行详细地讲解。 5.1.2 无序列表（ul） 无序列表是网页中最常用的列表，之所以称为“??序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。;图5-1 淘宝商城首页的商品服务分类截图;一、无序列表的语法 定义无序列表的基本语法格式如下： ul li列表项1/li li列表项2/li li列表项3/li …… /ul ; 在上面的语法中，ul/ul标记用于定义无序列表，li/li标记嵌套在ul/ul标记中，用于描述具体的列表项，每对ul/ul中至少应包含一对li/li。 ;二、无序列表的type属性值 ul和li都拥有type属性，用于指定列表项目符号。在无序列表中type属性的常用值有3个，它们呈现的效果如下： ·disc（默认样式）：显示“●” ·circle：显示“○” ·square：显示“■” ; 接下来，我们通过案例演示无序列表的创建方法，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head …… title无序列表的type属性值/title style type=text/css /style /head body ;h2机械工程系/h2 ul type=circle !--对ul应用type=circle-- li模拟电子技术/li li数字电子技术/li li电路CAD /li li单片机原理及应用/li /ul ;h2计算机科学系/h2 ul li网页平面/li !--不定义type属性-- li type=squareJava/li !--对li应用type=square-- li type=discPHP/li !--对li应用type=disc-- /ul /body /html; 运行完整的案例代码，效果如图5-2所示。 【注意】 实际应用中通常不赞成使用无序列表的type属性，一般通过CSS样式属性替代。;5.1.3 有序列表（ol） 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列。 一、有序列表的语法 定义有序列表的基本语法格式如下： ol li列表项1/li li列表项2/li li列表项3/li …… /ol; 在上面的语法中，ol/ol标记用于定义有序列表，li/li为具体的列表项，和无序列表类似，每对ol/ol中也至少应包含一对li/li。;二、有序列表的相关属性 在有序列表中，除了type属性之外，我们还可以为ol定义start属性、为li定义value属性，它们决定有序列表的项目符号的初始值。其取值和含义如下。 1．type属性取值 ·1（默认属性值）：项目符号显示为数字1 2 3… ·a或A：项目符号显示为英文字母a b c d…或A B C… ·i或I：项目符号显示为罗马数字i ii iii…或I II III… ;2．start属性取值 ·数字：规定项目符号的起始值。 3．value属性取值 ·数字：规定项目符号的数字。 ;5.1.4 定义列表（dl） 定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。 一、定义列表的语法 定义列表的基本语法格式如下： dl dt名词1/dt dd名词1解释1/dd dd名词1解释2/dd …… ; dt名词2/dt