资源预览内容
第1页 / 共22页
第2页 / 共22页
第3页 / 共22页
第4页 / 共22页
第5页 / 共22页
第6页 / 共22页
第7页 / 共22页
第8页 / 共22页
第9页 / 共22页
第10页 / 共22页
亲,该文档总共22页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第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 无序列表,无序列表没有设置编号,而是在每个列表项前,以项目符号作为分项标识,各个列表项之间没有顺序之分。其定义标记为 ,在默认情况下,无序列表的项目符号是。 无序列表的基本语法如下: 列表项一 列表项二 列表项三 ,返回,7.3 定义列表,在HTML中还有一种列表形式,称为定义列表,其标记为 ,用于解释名词。定义列表的每个列表项都由两部分组成:需要解释的名词及其具体解释。列表项也不再使用标记,而是用标记来指定需要解释的名称,用标记来指定具体的解释。 其基本语法如下: 需要说明的是,定义列表的标记必须成对出现,而和的结束标记,即和是可以省略的。 实例如图7-4所示。,返回,7.4 列表嵌套,列表嵌套是指列表中还有列表,把一个列表看作是一个新列表中的一行列表项,例如无序列表中再嵌入无序列表,或者无序列表中嵌入有序列表等,但无论是哪种嵌套方式,都应遵从HTML代码的使用规则。将一个列表的标记完全放在另一个标记内,这是一种父子级的关系。列表嵌套的形式灵活,常用来表示复杂的导航,应用广泛。,返回,7.5 使用css样式表美化列表,1.列表符号样式list-style-type 列表符号样式默认的是实心圆,如果要定义其他符号效果,可以通过list-style-type属性来设置。这个属性可以定义整个列表的符号样式,也可以针对其中的某个列表项来定义,表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 : disc outside none;,上一页,返回,7.6 用于导航的行内列表,对于一个网站来说,导航菜单是不可缺少的,导航菜单的风格往往也决定了整个网站的风格,所以制作样式各异的导航条是网页设计者非常重要的工作。 首先来看一个网页的效果截图,如图7-10所示是人人影视网站的页眉。 图中框出来的部分就是网页的主导航条。制作这样的导航条,可以通过列表及CSS属性设置来实现,这也是列表最大的用处之一。本节将主要讨论用于导航的行内列表。 创建如图7-10所示的导航条的操作步骤如下: (1)首先建立HTML相关结构,将菜单的各个项用无序列表表示。 (2)然后开始设置CSS样式,首先定义相关属性以及文字的字体,再将项目列表的list-style-type属性设置为none(不显示项目符,下一页,返回,7.6 用于导航的行内列表,号),将的内边距设置为padding以及将display的属性设置为inline(列表项显示在一行内),这是实现行内导航非常重要的设置。 设置完成时运行代码,效果如图7-12所示。 (3)最后对超链接标记进行样式设置,包括字体颜色color、下划线等。 完成后的网页导航条效果如图7-13所示。,上一页,返回,7.7 设置嵌套列表样式,在本章7. 4节中我们已经介绍了列表嵌套,即列表里面还有列表。本节主要结合CSS样式表,利用列表嵌套,实现复杂的导航,如图7-14所示。 这张网页包含两个导航栏,即页头部分的主导航以及右侧的侧边栏导航。这个侧导航可以通过列表嵌套制作出来。其步骤如下: (1)首先建立HTML相关结构,通过无序列表的嵌套,搭建出导航条的层次关系。 (2)然后开始设置CSS样式,首先定义外层的相关属性如背景等,再通过.linkl u1选择器将外层无序列表的list-style-image属性设置为指定的小图标,然后定义的相关属性,包括字体颜色、内间距等。,下一页,返回,7.7 设置嵌套列表样式,(3)最后定义内层样式,. link2 u1设置内层无序列表的属性,并定义的相关属性。 完成后的嵌套列表效果如图7-16所示。,上一页,返回,7.8 综合实例,本章主要介绍了各种列表及其在网页中的应用,围绕这个核心,完成如图7-17所示页面的设计,这个网页综合运用了多种列表。 具体操作步骤如下: (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 列表符号样式,返回,
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号