html几种列表介绍,<ol>,<ul>,<dl>,<nl>

1.dl:definition lists,自定义列表

   列表中每个元素的标题使用<dt>(definition term)定义,后面跟随<dd>(definition description)用于描述列表中元素的内容.

2.ul:unordered lists,无序列表

   每一列使用<li>(list item)标签定义,"列表项"的意思

3.ol:ordered lists,有序列表

   每一列使用<li>标签(与无序列表相同)定义,每列使用数字或字母开头.

4.nl:navigation lists,导航列表

  使用nl导航的内容,可以使用label对内容说明


几种标签的style说明:

1.list-style-type -- 定义列表样式

  取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha |             upper-alpha | none | inherit
        disc: 点
        circle: 圆圈
        square: 正方形
        decimal: 数字
        decimal-leading-zero: 十进制数,不足两位的补齐前导0,例如: 01, 02, 03, ..., 98, 99
        lower-roman: 小写罗马文字,例如: i, ii, iii, iv, v, ...
        upper-roman: 大写罗马文字,例如: I, II, III, IV, V, ...
        lower-greek: 小写希腊字母,例如: α(alpha), β(beta), γ(gamma), ...
        lower-latin: 小写拉丁文,例如: a, b, c, ... z
        upper-latin: 大写拉丁文,例如: A, B, C, ... Z
        armenian: 亚美尼亚数字
        georgian: 乔治亚数字,例如: an, ban, gan, ..., he, tan, in, in-an, ...
        lower-alpha: 小写拉丁文,例如: a, b, c, ... z
        upper-alpha: 大写拉丁文,例如: A, B, C, ... Z
        none: 无(取消所有的list样式)
        inherit:继承
    初始值: disc

2.list-style-image -- 定义列表样式图片

    取值:<uri> | none | inherit
        <uri>:URI(一般是一个图片的网址)
        none:无
        inherit:继承
    初始值: none
    继承性: 是
    适用于: 所有属于list的元素
    list:列表,style:样式,image:图片.
    示例:
   ul
   {
     list-style-image:url("/images/list-orange.png");
   }

3.list-style-position -- 定义列表样式的位置

    取值: inside | outside | inherit
        inside: 内部
        outside: 外部
        inherit: 继承
    初始值: outside
    继承性: 是
    适用于: 所有属于list的元素
    list: 列表,style: 样式,position: 位置.
    示例:
   ul#inside
   {
     list-style-position:inside;
     list-style-image:url("/images/list-orange.png");
    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值