CSS中<li>列表样式汇总大全,全实例展示

2020年5月26日前端开发评论135,341字数 1060阅读3分32秒阅读模式

CSS中<li>列表样式li {list-style-type:符号名称}
css中用list-style-type指定列表(lists)前面符号,如下:
li {list-style-type:符号名称}

符号名称可用的值为:

disc:CSS1 实心圆

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

circle:CSS1 空心圆

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

square:CSS1 实心方块

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

decimal:CSS1 阿拉伯数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

lower-roman:CSS1 小写罗马数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

upper-roman:CSS1 大写罗马数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

lower-alpha:CSS1 小写英文字母

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

upper-alpha:CSS1 大写英文字母

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

none:CSS1 不使用项目符号

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

armenian:CSS2 传统的亚美尼亚数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

cjk-ideographic:CSS2 浅白的表意数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

georgian:CSS2 传统的乔治数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

lower-greek:CSS2 基本的希腊小写字母

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

hebrew:CSS2 传统的希伯莱数字

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

hiragana:CSS2 日文平假名字符

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

hiragana-iroha:CSS2 日文平假名序号

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

katakana:CSS2 日文片假名字符

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

katakana-iroha:CSS2 日文片假名序号

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

lower-latin:CSS2 小写拉丁字母

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

upper-latin:CSS2 大写拉丁字母

  • 列表标签样式展示1
  • 列表标签样式展示2
  • 列表标签样式展示3

不用JS,纯CSS实现导航栏Tab切换效果 前端开发

不用JS,纯CSS实现导航栏Tab切换效果

CSS 的强大之处有的时候超乎我们的想象,Tab切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果 不用 Javascript,使用纯 CSS 方案,实现类...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定