css如何显示项目符号为数字

html-css07

css如何显示项目符号为数字,第1张

用过Word的人都知道Word有一个“项目符号和编号”的功能,用起来很方便。Dreamweaver3的属性面板也有一个类似有的“项目符号和编号”的图标按钮,产生自动列表功能,但它只有两种形式,即方块和阿拉伯数字。不过我们可以利用Dreamweaver3的CSS定义功能去重新定义“列表符号的格式”。下面以定义一个“大写罗马数字项目列表符号”为例来说明其使用方法:

1、按F7(或点击快速启动栏里那个象“八卦图”似的图标),调出CSS面板,选择“none”,再点击面板下部的编辑图标,在弹出的“Edit Style Sheet”对话框上按“New”按钮,在弹出的“New Style”对话框中选择“Redifine HTML TAG(重定义HTML标记)”后,在下面的“Tag”选择框中选择“ol”,按OK,立即弹出“Style Definition for ol”对话框,

在“Style Definition for ol”对话框左边的选择窗口中选择“list”,在右边的面板上我们只要定义“Type”就行了,点一下右边那个三角形按钮,

2、我来解释一下上图中这个列表中各项的含义:

disc:实心圆;

circle:空心圆;

square:实心方块;

decimal:十进制数字;

lower-roman:小写罗马数字;

upper-roman:大写罗马数字;

lower-alpha:小写英文字母;

upper-alpha:大写英文字母;

none:不显示项目符号和编号。

很显然,在本例中要选择“upper-roman”,然后按OK返回(要注意“Bullet”属性现在不要选,否则有可能就不是预期的结果了)。在“Edit Style Sheet”对话框上按“Done”按钮结束。在网页源代码的〈head〉与〈/head〉之间见到的CSS代码是这样的:

以下为引用的内容:

〈style type="text/css"〉

〈!--

ol { list-style-type: upper-romancircle}

--〉

〈/style〉

对于不是使用Dreamweaver3的网友,直接把上述代码复制在〈head〉与〈/head〉之间,产生的效果相同。

3、这样当我们在设计网页时,在属性面板上点击项目编号图标,就能获得大写罗马数字的列表了,但在编辑时看到的还是十进制编号,只有在浏览时才显示其本来面目。若需要其它格式的编号,只要在第二步中选择列表中的其它样式就行了。

若是要使按下图标后,项目符号前面那个图形(默认的是实心方块)也改变为数字编号,只要在第一步中选择“Tag”标记时不要选“ol”而改为选“ul”,其它操作完全相同。如要把它改成用大写罗马数字项目符号,则得到的CSS代码是这样的:

以下为引用的内容:

〈style type="text/css"〉

〈!--

ul { list-style-type: upper-romancircle}

--〉

〈/style〉

从这里可以看,这两个图标所起的作用基本相同,只是标记不同而已。

真是喜闻见乐。

那为什么现在的icon-open 为什么会显示出一个图标,哈哈。

也就是所说的“数字变成小图标”

用到的是Icon Fonts技术,简单说就是你看到的图标实际上是字,现在很常用在Web上面,“\e661”是unicode编码。

用图片,字都可以变成这样,然后直接使用。

这个叫列表项标志,有三种标识方法:

1、list-style-type 值对应的描述:

none    无标记。    

disc    默认。标记是实心圆。    

circle    标记是空心圆。    

square    标记是实心方块。    

decimal    标记是数字。    

decimal-leading-zero    0开头的数字标记。(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, 等。)    

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, 等。(日文片假名)

2、list-style-image语法格式:

 li {list-style-image : url(xxx.gif)}

3、list-style 简写列表样式:

//语法规则:

li {list-style : url(example.gif) square inside}

//值-》参数

list-style-type    设置列表项标记的类型。    

list-style-position    设置在何处放置列表项标记。

list-style-image    使用图像来替换列表项的标记。

inherit    规定应该从父元素继承 list-style 属性的值。