网页设计与制作第6章列表与框架.ppt

第6章 列表与框架 学习目标： o用CSS设置列表 o灵活使用内联框架 2010网页设计与制作1第6章 6.1 列表 标签标签描述备备注 定义义有序列表。 定义义无序列表。 定义义列表项项。用于与之内 定义义定义义列表。 定义义定义项义项 目。 定义义定义义的描述。 已废废弃。被 代替 已废废弃。被 代替。 2010网页设计与制作2第6章 6.1.1 有、无序列表的基本格式 o有序列表基本格式： 列表项1 列表项2 列表项n o无序列表基本格式： 列表项1 列表项2 列表项n 2010网页设计与制作3第6章 6.1.2有、无序列表的标记属性 属性使用范围围取值值描述 compact与compact 规规定列表呈现现的效果比正常 情况更小巧 start数值值规规定有序列表起始的编编号 type 与1、A、a、I、i规规定有序列表表项项符号 与disc、square、circle 规规定无序列表表项项符号为为 、 2010网页设计与制作4第6章 6.1.3 定义列表 o基本格式： 定义项1 定义描述1 定义项2 定义描述2 定义项n 定义描述n 2010网页设计与制作5第6章 6.1.4 列表的嵌套 o格式举例： 列表项1 列表项1 列表项2 列表项n 列表项n 2010网页设计与制作6第6章 6.1.5 CSS中的列表属性 属性取值值描述 list-styledisc outside none 简简写属性。用于把所有用于列表的属性 设设置于一个声明中。默认认取值值： list-style-imageURL、none将图图象设设置为为列表项标项标志。 list-style-positioninside、outside设设置列表中列表项标项标志的位置。 list-style-type请见请见下页页设设置列表项项符号的类类型。 2010网页设计与制作7第6章 6.1.6 list-style-type属性取值1 值值描述 none无表项项符号。 disc实实心圆圆。 circle空心圆圆。 square实实心方块块。 decimal数字。 decimal-leading-zero0开头头的数字。(01, 02, 03, 等。) lower-roman小写罗马罗马数字(i, ii, iii, iv, v, 等。) upper-roman大写罗马罗马数字(I, II, III, IV, V, 等。) lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek小写希腊字母(alpha, beta, gamma, 等。) lower-latin小写拉丁字母(a, b, c, d, e, 等。) upper-latin大写拉丁字母(A, B, C, D, E, 等。) 2010网页设计与制作8第6章 6.1.6 list-style-type属性取值2 值值描述 hebrew传统传统 的希伯来编编号方式 armenian传统传统 的亚亚美尼亚编亚编 号方式 georgian传统传统 的乔乔治亚编亚编 号方式（an, ban, gan等） cjk-ideographic简单简单 的表意数字 hiragana标记标记 是：a, i, u, e, o, ka, ki, 等。（日文片假名） katakana标记标记 是：A, I, U, E, O, KA, KI, 等。（日文片假名） hiragana-iroha标记标记 是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） katakana-iroha 标记标记 是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名 ） 2010网页设计与制作9第6章 6.2 框架 o通过使用框架，你可以在同一个浏览器窗口中显 示不止一个页面。每份HTML文档称为一个框架 ，并且每个框架都独立于其他的框架。 o框架结构标记 n框架结构标签（）定义如何将窗口分割 为框架 n每个 frameset 定义了一系列行或列 nrows/columns 的值规定了每行或每列占据屏幕的面 积 o框架标签 frame 标签定义了放置在每个框架中的 HTML 文档。 2010网页设计与制作10第6章 6.2.1 框架的一般格式 Your browser does not handle frames! 2010网页设计与制作11第6章 6.2.2 框架结构标记 n框架结构标记：，这是双标记。 nframeset定义如何将窗口分割为框架。 n每个 frameset 定义了一系列行或列。 属性值值描述 cols pixels 定义义框架集中列的数目和尺寸。 % * rows pixels 定义义框架集中行的数目和尺寸。 % * 2010网页设计与制作12第6章 6.2.3 框架标记 o框架标记是单标记。 oframe定义了放置在每个框架中的HTML文档。 属性取值值描述 frameborder0、1规规定是否显显示框架周围围的边边框。 longdescURL规规定一个包含有关框架内容的长长描述的页页面。 marginheightpixels定义义框架的上方和下方的边边距。 marginwidthpixels定义义框架的左侧侧和右侧侧的边边距。 namename规规定框架的名称。 noresizenoresize规规定无法调调整框架的大小。 scrollingyes、no、auto规规定是否在框架中显显示滚动滚动条。 srcURL规规定在框架中显显示的文档的 URL。 2010网页设计与制作13第6章 6.2.4 内联框架标记 o用于创建内联框架（即行内框架）。 属性值值描述 align left、right、top、middle、 bottom 不赞赞成使用。请请使用样样式代替。 规规定如何根据周围围的元素来对齐对齐此框架。 frameborder1、0规规定是否显显示框架周围围的边边框。 heightpixels、%规规定 iframe 的高度。 longdescURL 规规定一个页页面，该页该页面包含了有关 iframe 的较较 长长描述。 marginheightpixels定义义 iframe 的顶顶部和底部的边边距。 marginwidthpixels定义义 iframe 的左侧侧和右侧侧的边边距。 nameframe_name规规定 iframe 的名称。 scrollingyes、no、auto规规定是否在 iframe 中显显示滚动滚动条。 srcURL规规定在 iframe 中显显示的文档的 URL。 widthpixels、%定义义 iframe 的宽宽度。 2010网页设计与制作14第6章 6.2.5 注意事项