常见列表样式--list-style

  • 有序列表:列表前面有数字、字母或其他阿拉伯字符的表示序列的字符,属于块级元素,能够继续嵌套各种形式的标签:
  • 无序列表:列表前面是实心圆的、空心圆点、方块、或者自定义图片……总之就是无法区分列表顺序的排序方式,无序列表也可以不限制数量和形式的继续嵌套其他标签:
  • 钩子方式:在IE6时代,人们为了实现自定义图标列表,进行了很多尝试,有的大神就使用了钩子方式,在列表-li-俩测添加空的div,通过设置border各边的样式或宽度也可以实现很多图标,当然这些空的div是没有语义化的,只是为了在不引入图片的情况下实现自定义样式,可以参考:
  • 其实通过样式控制可以很明显的看出,无序列表和有序列表的边界是很模糊的,可以使用有序列表(ol)来实现无序列表的所有样式,反之亦可,只是为了语义化的需要,如果涉及到排序时候,还是建议使用有序列表。不涉及排序时候,使用无序列表。
常见列表样式--list-style_第1张图片
列表样式





task-7-1






    

常见列表样式

decimal

  1. list-lab
  2. list-lab
  3. list-lab

disc

  1. list-lab
  2. list-lab
  3. list-lab

circle

  1. list-lab
  2. list-lab
  3. list-lab

square

  1. list-lab
  2. list-lab
  3. list-lab

decimal-leading-zero

  1. list-lab
  2. list-lab
  3. list-lab

lower-roman

  1. list-lab
  2. list-lab
  3. list-lab

upper-roman

  1. list-lab
  2. list-lab
  3. list-lab

lower-alpha

  1. list-lab
  2. list-lab
  3. list-lab

upper-alpha

  1. list-lab
  2. list-lab
  3. list-lab

img

  1. list-lab
  2. list-lab
  3. list-lab

钩子

  1. list-lab
  2. list-lab
  3. list-lab
自定义列表
list-tab
list-tab
list-tab
sss

你可能感兴趣的:(常见列表样式--list-style)