2015年网页美化与布局电子教案04单元4　网页列表与表格的美化与布局.docVIP

HTML5+CSS3网页美化与布局 单元4　网页列表与表格的美化与布局 PAGE 12 PAGE 11 单元4　网页列表与表格的美化与布局 列表标签能够实现网页结构化列表，对于需要排列显示的标题列表、导航菜单、新闻信息等，使用列表标签有明显的优势。 表格在显示数据方面非常灵活，设计网页时应充分发挥表格的数据组织功能。表格与定义列表一样，一般由三个标签配合使用，表格由table标签来定义，行由tr标签来定义，每行中的单元格由td标签来定义，td标签必须包含在tr标签内。 【知识预览】 1．HTML5的列表标签 （1）ul、li和ol标签 ul标签用于定义无序列表，ol标签用于定义有序列表，li标签用于定义列表项目。 ① 项目列表 项目列表以项目符号开头，在列表项之间没有先后次序时使用，所以又称为无序列表。项目列表的列表项使用圆点、圆圈等符号表示，项目列表用ul标签表示，每个列表项用li标签表示，一般网页中都使用项目列表。 ② 有序列表 有序列表的列表项使用1、2、3或a、b、c等表示顺序，有序列表用ol标签表示，每个列表项用li标签表示。 （2）dl、dt和dd标签 dl标签用于设置定义列表（definition list），dd在定义列表中用于定义条目的定义部分，dt标签定义了定义列表中的项目（即术语部分）。dl标签用于结合 \o HTML dt 标签 dt（定义列表中的项目）和 \o HTML dd 标签 dd（描述列表中的项目）。dt是definition term（定义术语）的缩写，表示定义列表的标题；dd是definition in a definition list（定义列表中的定义）的缩写，表示对术语的解释，即定义列表项。 （3）menu标签 menu标签用于定义菜单列表。当希望列出表单控件时使用该标签。 （4）command标签 command标签用于定义命令按钮，例如单选按钮、复选框或按钮。只有当command标签位于menu标签内时，该元素才是可见的。 2．CSS列表属性（List） CSS列表的属性包括列表类型、列表符号图像和位置。 （1）list-style-type属性 list-style-type属性用于定义列表符号样式，默认为实心圆点disc。当list-style-image属性已定义为有效值时，list-style-type属性则无效。list-style-type属性的取值有以下类型：disc（实心圆点）、circle（圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写字母）、upper-alpha（大写字母）、none（不使用项目符号）。 （2） \o CSS list-style 属性 list-style-image属性 list-style-image属性用于定义列表项符号的图像，默认情况下不指定列表项符号的图像。list-style-image属性的取值有none（不指定图像）和url（指定图像地址）。 （3）list-style-position属性 CSS可以确定标志出现在列表项内容之外还是内容内部，这是利用 \o CSS list-style-position 属性 list-style-position属性完成的。该属性用于定义列表项符号的显示位置，默认为outside（外）。list-style-position属性的取值有outside（列表项符号或图像位于文本以外）和inside（列表项符号或图像位于文本以内）。 （4）list-style属性 为简单起见，可以将以上3个列表样式属性合并为一个方便的属性： \o CSS list-style 属性 list-style，示例代码如下：li {list-style : url(example.gif) square inside} list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。 3．表格元素及标签 table、tr和td标签被用来实现表格化数据显示，它们有着明确的语义，各个标签的语义如下： （1）table table标签主要用来定义数据表格的整体样式，数据表中的数据显示通过td标签来实现。 （2）tr tr是a row in a table的缩写，表示表格中的一行，其内部还需要包含单元格td。 （3）td td是a diamonds in a table的缩写，表示表格中的一个单元格，td标签是表格中最小的容器元素。 （4）th th用于定义表格的标题，具有预定义格式，可以使单元格内的数据居中并加粗显示。 （5）captio