《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第七章.pptVIP

第7章列表7.1有序列表7.2无序列表7.3定义列表7.4列表嵌套7.5使用CSS样式表美化列表7.6用于导航的行内列表7.7设置嵌套列表样式7.8综合实例返回7.1有序列表1.基本语法olli列表项一/lili列表项二/lili列表项三/li/ol在此语法中，ol/ol标记表示有序列表的开始和结束，而li/li标记表示一个列表项的开始和结束。2.有序列表的起始值start有序列表的默认起始编号为数字1，通过start属性可以自定义编号的初始值。其语法格式为下一页返回7.1有序列表olstart=”起始数值”li列表项一/lili列表项二/lili列表项三/li/ol上一页返回7.2无序列表无序列表没有设置编号，而是在每个列表项前，以项目符号作为分项标识，各个列表项之间没有顺序之分。其定义标记为ul/ul，在默认情况下，无序列表的项目符号是●。无序列表的基本语法如下:ulli列表项一/lili列表项二/lili列表项三/li/ul返回7.3定义列表在HTML中还有一种列表形式，称为定义列表，其标记为dl/dl，用于解释名词。定义列表的每个列表项都由两部分组成:需要解释的名词及其具体解释。列表项也不再使用li标记，而是用dt标记来指定需要解释的名称，用dd标记来指定具体的解释。其基本语法如下:需要说明的是，定义列表的dl标记必须成对出现，而dt和dd的结束标记，即/dt和/dd是可以省略的。实例如图7-4所示。返回7.4列表嵌套列表嵌套是指列表中还有列表，把一个列表看作是一个新列表中的一行列表项，例如无序列表中再嵌入无序列表，或者无序列表中嵌入有序列表等，但无论是哪种嵌套方式，都应遵从HTML代码的使用规则。将一个列表的标记完全放在另一个标记内，这是一种父子级的关系。列表嵌套的形式灵活，常用来表示复杂的导航，应用广泛。返回7.5使用css样式表美化列表1.列表符号样式list-style-type列表符号样式默认的是实心圆，如果要定义其他符号效果，可以通过list-style-type属性来设置。这个属性可以定义整个列表的符号样式，也可以针对其中的某个列表项li来定义，表7-1为其属性取值。2.列表图像符号list-style-image列表图像属性list-style-image用来设置列表符号的图像类型，使列表符号不局限于规定的那些样式，丰富和美化了列表符号。本属性有两个可选值，如下所述:(1)none:表示不设置列表图像，是默认值。(2)url:指定图像的名称或者路径。如果指定的图像路径不正确，系统会按none处理;另外也要注意图像下一页返回7.5使用css样式表美化列表的大小，如太大会影响列表的美观(图像是按其原始大小显示的)。3.列表缩进list-style-position列表缩进属性用于设置列表项缩进的位置。本属性同样有两个可选值，如下所述:(1)inside:表示列表符号缩进，即列表项目标记放置在文本以内，且环绕文本根据标记对齐。(2)outside:表示保持标记位于文本的左侧，即列表标记放置在文本以外，且环绕文本不根据标记对齐，是默认值。4.复合属性list-style以上三种属性的组合即复合属性list-style。上一页下一页返回7.5使用css样式表美化列表它的基本语法格式是:list-style:list-style-type‖list-style-position‖list-style-image三个属性间用空格分隔，其默认值为:list-style:discoutsidenone;上一页返回7.6用于导航的行内列表对于一个网站来说，导航菜单是不可缺少的，导航菜单的风格往往也决定了整个网站的风格，所以制作样式各异的导航条是网页设计者非常重要的工作。首先来看一个网页的效果截图，如图7-10所示是人人影视网站的页眉。图中框出来的部分就是网页的主导航条。制作这样的导航条，可以通过列表及CSS属性设置来实现，这也是列表最大的用处之一。本节将主要讨论用于导航的行内列表。创建如图7-10所示的导航条的操作步骤如下:(1)首先建立HTML相关结构，将菜单的各个项用无序列表u1表示。(2)然后开始设置CSS样式，首先定义nav相关属性以及文字的字体，再将项目列表ul的list-style-type属性设置为none(不显示项目符下一页返回7.6