当前位置:  编程技术>WEB前端

CSS重新定义项目符号和编号技巧

    来源: 互联网  发布时间:2014-09-06

    本文导语:  用过Word的人都知道Word 有一个“项目符号和编号”的功能,用起来很方便。Dreamweaver3的属性面板也有一个类似有的“项目符号和编号”的图标按钮,产生自动列表功能, 但它只有两种形式,即方块和阿拉伯数字。不过我们可以...

用过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〉

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


    
 
 

您可能感兴趣的文章:

  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • CSS3转换函数定义 Morf.js
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS定义通用透明效果
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • CSS学习笔记Padding 属性中参数的定义与使用
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • 利用CSS,链接下划线也玩自定义
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background定义及介绍
  • java命名空间javax.swing.text.html类htmleditorkit的类成员方法: default_css定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_color定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_image定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_position定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border_bottom定义及介绍
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font_size定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font_variant定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin_left定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: text_align定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: text_decoration定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: text_indent定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: word_spacing定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_attachment定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_repeat定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border_style定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: letter_spacing定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3