《html5与css3网页设计教学课件作者库波html5与css5网页设计第七章》由会员分享，可在线阅读，更多相关《html5与css3网页设计教学课件作者库波html5与css5网页设计第七章（22页珍藏版）》请在金锄头文库上搜索。
1、第7章 列表,7.1 有序列表 7.2 无序列表 7.3 定义列表 7.4 列表嵌套 7.5 使用CSS样式表美化列表 7.6 用于导航的行内列表 7.7 设置嵌套列表样式 7.8 综合实例,返回,7.1 有序列表,1.基本语法 列表项一 列表项二 列表项三 在此语法中， 标记表示有序列表的开始和结束，而 标记表示一个列表项的开始和结束。 2.有序列表的起始值start 有序列表的默认起始编号为数字1，通过start属性可以自定义编号的初始值。其语法格式为,下一页,返回,7.1 有序列表, 列表项一 列表项二 列表项三 ,上一页,返回,7.2 无序列表,无序列表没有设置编号，而是在每个列表项前
2、，以项目符号作为分项标识，各个列表项之间没有顺序之分。其定义标记为 ，在默认情况下，无序列表的项目符号是。 无序列表的基本语法如下: 列表项一 列表项二 列表项三 ,返回,7.3 定义列表,在HTML中还有一种列表形式，称为定义列表，其标记为 ，用于解释名词。定义列表的每个列表项都由两部分组成:需要解释的名词及其具体解释。列表项也不再使用标记，而是用标记来指定需要解释的名称，用标记来指定具体的解释。 其基本语法如下: 需要说明的是，定义列表的标记必须成对出现，而和的结束标记，即和是可以省略的。 实例如图7-4所示。,返回,7.4 列表嵌套,列表嵌套是指列表中还有列表，把一个列表看作是一个新列表
3、中的一行列表项，例如无序列表中再嵌入无序列表，或者无序列表中嵌入有序列表等，但无论是哪种嵌套方式，都应遵从HTML代码的使用规则。将一个列表的标记完全放在另一个标记内，这是一种父子级的关系。列表嵌套的形式灵活，常用来表示复杂的导航，应用广泛。,返回,7.5 使用css样式表美化列表,1.列表符号样式list-style-type 列表符号样式默认的是实心圆，如果要定义其他符号效果，可以通过list-style-type属性来设置。这个属性可以定义整个列表的符号样式，也可以针对其中的某个列表项来定义，表7-1为其属性取值。 2.列表图像符号list-style-image 列表图像属性list-
4、style-image用来设置列表符号的图像类型，使列表符号不局限于规定的那些样式，丰富和美化了列表符号。 本属性有两个可选值，如下所述: (1) none:表示不设置列表图像，是默认值。 (2)url:指定图像的名称或者路径。 如果指定的图像路径不正确，系统会按none处理;另外也要注意图像,下一页,返回,7.5 使用css样式表美化列表,的大小，如太大会影响列表的美观(图像是按其原始大小显示的)。 3.列表缩进list-style-position 列表缩进属性用于设置列表项缩进的位置。 本属性同样有两个可选值，如下所述: (1) inside:表示列表符号缩进，即列表项目标记放置在文本以
5、内，且环绕文本根据标记对齐。 (2) outside:表示保持标记位于文本的左侧，即列表标记放置在文本以外，且环绕文本不根据标记对齐，是默认值。 4.复合属性list-style 以上三种属性的组合即复合属性list-style。,上一页,下一页,返回,7.5 使用css样式表美化列表,它的基本语法格式是: list-style : list-style-type list-style -position list-style-image 三个属性间用空格分隔，其默认值为: list-style : disc outside none;,上一页,返回,7.6 用于导航的行内列表,对于一个网站来
6、说，导航菜单是不可缺少的，导航菜单的风格往往也决定了整个网站的风格，所以制作样式各异的导航条是网页设计者非常重要的工作。 首先来看一个网页的效果截图，如图7-10所示是人人影视网站的页眉。 图中框出来的部分就是网页的主导航条。制作这样的导航条，可以通过列表及CSS属性设置来实现，这也是列表最大的用处之一。本节将主要讨论用于导航的行内列表。 创建如图7-10所示的导航条的操作步骤如下: (1)首先建立HTML相关结构，将菜单的各个项用无序列表表示。 (2)然后开始设置CSS样式，首先定义相关属性以及文字的字体，再将项目列表的list-style-type属性设置为none(不显示项目符,下一页,
7、返回,7.6 用于导航的行内列表,号)，将的内边距设置为padding以及将display的属性设置为inline(列表项显示在一行内)，这是实现行内导航非常重要的设置。 设置完成时运行代码，效果如图7-12所示。 (3)最后对超链接标记进行样式设置，包括字体颜色color、下划线等。 完成后的网页导航条效果如图7-13所示。,上一页,返回,7.7 设置嵌套列表样式,在本章7. 4节中我们已经介绍了列表嵌套，即列表里面还有列表。本节主要结合CSS样式表，利用列表嵌套，实现复杂的导航，如图7-14所示。 这张网页包含两个导航栏，即页头部分的主导航以及右侧的侧边栏导航。这个侧导航可以通过列表嵌套制
8、作出来。其步骤如下: (1)首先建立HTML相关结构，通过无序列表的嵌套，搭建出导航条的层次关系。 (2)然后开始设置CSS样式，首先定义外层的相关属性如背景等，再通过.linkl u1选择器将外层无序列表的list-style-image属性设置为指定的小图标，然后定义的相关属性，包括字体颜色、内间距等。,下一页,返回,7.7 设置嵌套列表样式,(3)最后定义内层样式，. link2 u1设置内层无序列表的属性，并定义的相关属性。 完成后的嵌套列表效果如图7-16所示。,上一页,返回,7.8 综合实例,本章主要介绍了各种列表及其在网页中的应用，围绕这个核心，完成如图7-17所示页面的设计，这
9、个网页综合运用了多种列表。 具体操作步骤如下: (1)新建页面，在title标记中输入“葡萄酒庄园”作为页面标题。 (2)观察整个页面的内容，根据语义来选择使用哪个标记。页面最上方的部分使用header和nav，主体文字内容使用artile。 (3)为了方便设置整个页面内容的样式，使用id为content的div将所有元素包裹起来。 (4)各部分内容的代码按照从上到下的顺序书写。 (5)向每个区域中填入内容对应的代码。,返回,图7-4 定义列表示例,返回,图7-10 人人影视网站的页眉,返回,图7-12 行内项目列表,返回,图7-13 行内导航条,返回,图7-14 网页实例,返回,图7-16 最终效果,返回,图7-17 综合实例,返回,表7-1 列表符号样式,返回,
