网页设计中的列表类型

  • 2019-05-27 17:02:33
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计中,网站建设布局领域,列表是很有意思的一个方面。列表中的项其实就是块框,不过比起平常稍微多了一点,多出的这部分不属于文档布局,而只是“挂”在一边。对于一个有序列表,额外的这部分包含一系列递增的数字(或字母),这些数字(或字母)由用户代理计算,并且主要由用户代理格式化,而不是由创作人员完成。按文档结构的“指示”,用户代理会生成这些数字并提供基本表示。

这种内容生成在CSS1中是无法描述的,所以CSS1也无法控制,不过CSS2引入了一些特性,可以描述这种列表项编号,因此,现在css允许创作人员定义自己的计数模式和格式,而且可以将这些计数器与任何元素关联,而不只是有序列表。另外,利用这种基本机制还有可能向文档中插入其他类型的内容,包括文本串。属性值,甚至外部资源。所以,完全可以使用css在设计中插入链接图标、编辑符号等,而不必创建额外的标记。

要了解所有这些列表选项在网页设计中如何加以利用,先来讨论基本的列表样式,然后再讨论内容和计数器的生成。

列表

从某种意义上讲,不是描述性文本的任何内容都可以认为是列表。人口普査、太阳系,家谱、餐馆菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于形式如此多样,这使得列表相当重要,所以说,网站建设中列表样式不太丰富确实是一大憾事。

要影响一个列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。例如,在一个无序列表中,列表项的标志(marker)是出现在各列表项旁边的圆点。在有序列表中,标志可能是一个字母、数字或另外某种计数体系中的一个符号。甚至可以将标志替换为图像。所有这些都可以使用不同的列表样式属性完成。

列表类型

要修改用于列表项的标志类型,可以使用属性list-style-type。

list-style-type

CSS2.1 值:

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

CSS2 值:

disc | circle | square | decimal | decimal-leading-zero | upper-alpha Ilower-alpha | upper-roman | lower- roinan | lower-greek | hebrew | armenian | georgian | Gjk-ideographic | hiragana | katakana | hiragana-iroha | none | inherit

初始值:

disc

应用于:

display 值为list-item的元素

继承性:有

计算值:根据指定确定

没错,这里的关键字确实不少,其中一些在CSS2中引入,但是在CSS2.1中已经去除。

list-style-type属性(以及所有其他与列表相关的属性)只能应用于display值为list-item的元素,不过CSS无法区别有序列表项和无序列表项。因此,完全可以设置一个有序列表使用实心圆而非数字作为列表项标志。实际上,list-style-type的默认值就是disc,所以可以得出结论,如果没有显式地声明其他列表类型,所有列表(有序或无序)对各列表项都会使用实心圆作为标志。这是合理的,不过最终要由用户代理来决定。尽管用户代理没有预定的规则,如{list-style-type: decimal;},但它可能会禁止对无序列表使用有序标志,反之亦然。不过不能依赖于此,所以一定要当心。

对于hebrew和georgian等CSS2值,CSS2规范并没有明确地指出这些计数体系如何工作,也没有说明用户代理应当如何处理。这种不确定性导致这些值在网站建设时未能广泛实现。

如果想完全禁止显示标志,只能使用值none。none会导致用户代理在原本放标志的位置上不显示任何内容,不过它不会中断有序列表中的计数。


当前文章标题:网页设计中的列表类型

当前URL:http://www.lyjtt.cn/news/wzzz/3030.html

上一篇:网页设计中的高度和对齐

下一篇:网页设计中的列表设计

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)