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

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

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

赞 (0)

相关推荐

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

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

    用过Word的人都知道Word 有一个"项目符号和编号"的功能,用起来很方便.Dreamweaver3的属性面板也有一个类似有的"项目符号和编号"的图标按钮,产生自动列表功能, 但它只有两种形式,即方块和阿拉伯数字.不过我们可以利用Dreamweaver3的CSS定义功能去重新定义"列表符号的格式".下面以定义一个"大写 罗马数字项目列表符号"为例来说明其使用方法: 1.按F7(或点击快速启动栏里那个象"八卦图&qu

  • 分离vue文件中css、js代码的简单技巧

    目录 场景 方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码 拓展 代码 总结 场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目 方法 挺简单的,就是利用下ES6的import和export 例如mockData

  • idea gradle项目复制依赖小技巧(推荐)

    1 IDEA从pom文件复制依赖到gradle小技巧 如果在gradle工程项目复制pom项目的各种依赖,可以不用考虑一点点粘贴groupId artifactid以及version字段,直接复制整个dependency,idea会自动识别相关 xml转换成gradle依赖形式,具体使用如下所示: > 点击粘贴可以直接看到内容格式发生转换,如下所示: 注意:这里有一个小提醒,复制的pom依赖必须包含version字段,否则也会复制格式转化不生效的问题! 到此这篇关于idea gradle项目复制

  • css实现兼容各个浏览器的技巧的代码

    在编写css样式表的时候常常会碰到一写浏览器兼容的问题,象是不同内核的浏览器显示就不一定相同,不同版本的的浏览器也会产生上下兼容的问题,如何解决这些问题成了我们苦恼的问题,如果你对css hack技术很了解的话,那这就是太简单不过了,不过对于那些不怎么解的人来说可真成了他们所苦恼的事.在这就从 赵磊官方博客 引来一篇文章来介绍兼容各个浏览器的技巧.但是你也不要认为只要是浏览器显示出现差错就事浏览器的问题,也很可能是你的结构不好,建议你好好去学习一下语义结构,毕竟盖房子要先搭钢筋的. 1,盒解释器

  • 利用Node.js获取项目根目录的小技巧

    利用Node.js获取项目根目录的小技巧

    假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中. 实现功能 如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件. 实现方法 在node.js只提供了一个 dirname全局变量.通过 dirname可以获得"C:\wwwroot\yidata\server".这时需要用到path. 首先 import path from 'path'; (ES6)或var path = require (

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • 项目实践之javascript技巧

    JS设置控件enabled为可交互document.getElementById("控件ID").disabled ="";JS设置控件enabled为不可交互document.getElementById("控件ID").disabled ="none";js给dropdownlist赋值document.getElementById("控件ID").options.add(new Option(&quo

  • 中文排版CSS心得

    数月来学习web标准,并遵循标准设计和制作web页面.一直想写点什么,整理一下自己的心得体会.写这篇文章,主要是针对中文排版设计,英文排版因为很少做,所以不涉及. 先介绍如何设定字体.颜色.大小.段落空白等比较简单的应用,后面再介绍下比如首字下沉.首行缩进.最后讲一些常用的web页面中文排版,比如中文字的截断.固定宽度词内折行(word-wrap和word-break)等等.因为只是写一些应用方面的心得,如果需要完整的CSS属性介绍,请参考CSS手册. 1.如何设定文字字体.颜色.大小 -- 使

  • 整理关于Bootstrap排版的慕课笔记

    整理关于Bootstrap排版的慕课笔记

    整理自慕课笔记 GitHub上这样介绍 bootstrap: 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. 自定义JQuery插件,完整的类库,基于Less等. 标题 主标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,

  • Bootstrap入门书籍之（一）排版

    Bootstrap入门书籍之（一）排版

    推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 1. 标题 在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共

随机推荐