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

《2015年网页美化与布局电子教案04单元4　网页列表与表格的美化与布局.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元4　网页列表与表格的美化与布局单元4　网页列表与表格的美化与布局列表标签能够实现网页结构化列表，对于需要排列显示的标题列表、导航菜单、新闻信息等，使用列表标签有明显的优势。表格在显示数据方面非常灵活，设计网页时应充分发挥表格的数据组织功能。表格与定义列表一样，一般由三个标签配合使用，表格由table标签来定义，行由tr标签来定义，每行中的单元格由td标签来定义，td标签必须包含在tr标签内。【知识预览】1．HTML5的列表标签（1）

、
• 和
  标签
  标签用于定义无序列表，
  标签用于定义有序列表，
  1. 标签用于定义列表项目。①项目列表项目

     2、列表以项目符号开头，在列表项之间没有先后次序时使用，所以又称为无序列表。项目列表的列表项使用圆点、圆圈等符号表示，项目列表用ul标签表示，每个列表项用li标签表示，一般网页中都使用项目列表。②有序列表有序列表的列表项使用1、2、3或a、b、c等表示顺序，有序列表用ol标签表示，每个列表项用li标签表示。（2）

     、

     和

     标签

     标签用于设置定义列表（definitionlist），

     在定义列表中用于定义条目的定义部分，

     标签定义了定义列表中的项目（即术语部分）。

     标签用于结合

     （定义列表中的项目）和

     （描述列表中的项目）

     3、。dt是definitionterm（定义术语）的缩写，表示定义列表的标题；dd是definitioninadefinitionlist（定义列表中的定义）的缩写，表示对术语的解释，即定义列表项。（3）

     标签标签用于定义菜单列表。当希望列出表单控件时使用该标签。（4）标签标签用于定义命令按钮，例如单选按钮、复选框或按钮。只有当标签位于标签内时，该元素才是可见的。2．CSS列表属性（List）CSS列表的属性包括列表类型、列表符号图像和位置。（1）list-style-type属性li

     4、st-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）list-style-image属性11单元4　网页列表与表格的

     5、美化与布局list-style-image属性用于定义列表项符号的图像，默认情况下不指定列表项符号的图像。list-style-image属性的取值有none（不指定图像）和url（指定图像地址）。（3）list-style-position属性CSS可以确定标志出现在列表项内容之外还是内容内部，这是利用list-style-position属性完成的。该属性用于定义列表项符号的显示位置，默认为outside（外）。list-style-position属性的取值有outside（列表项符号或图像位于文本以外）和inside（列表项符号或图像位于文本以内）。（4）lis

     6、t-style属性为简单起见，可以将以上3个列表样式属性合并为一个方便的属性：list-style，示例代码如下：li{list-style:url(example.gif)squareinside}list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。3．表格元素及标签table、tr和td标签被用来实现表格化数据显示，它们有着明确的语义，各个标签的语义如下：（1）tabletable标签主要用来定义数据表格的整体样式，数据表中的数据显示通过td标签来实现。（2）trtr是arowinatable的缩写，表示表格中

     7、的一行，其内部还需要包含单元格td。（3）tdtd是adiamondsinatable的缩写，表示表格中的一个单元格，td标签是表格中最小的容器元素。（4）thth用于定义表格的标题，具有预定义格式，可以使单元格内的数据居中并加粗显示。（5）captioncaption标签用于定义表格的标题，对表格进行简单的描述，该元素是内联元素，其他表格元素是块状元素。4．CSS表格属性（Table）设置CSS表格属性可以改善表格的外观。（1）表格边框属性（border）表格及单元格边框的默认宽度为2px，使用border属性可以灵活设置表格及单元格的