网页设计中的列表类型

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

这种内容生成在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会导致用户代理在原本放标志的位置上不显示任何内容，不过它不会中断有序列表中的计数。

当前题目：网页设计中的列表类型
文章转载：https://www.cdcxhl.com/news14/171514.html

成都网站建设公司_创新互联，为您提供响应式网站、全网营销推广、静态网站、用户体验、网站排名、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联