CSS list-style设置所有列表项属性

list-style属性

鄙人好像在之前的章节中有介绍过:如果要去掉无序列表左侧的小圆点,那么就可以将定义无序列表的ul元素的list-style属性设置为none即可,比如下面的这个简单的实例。实际上,list-style还可以设置其它的有关列表项标记的一些属性。


去掉小圆点的list-style实例,及在线编辑器

<ul class='lt1'>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<style>
  .lt1{list-style:none;}
</style>

list-style属性的语法

一般情况下,list-style可以接受三个属性值,如下:

list-style:list-style-type list-style-position list-style-image

属性值

属性值描述
list-style-type指定列表项标记的类型。
list-style-position指定列表项标记的位置。
list-style-image使用指定图像替换列表项标记。
none不设置指定列表项标记。
inherit从父元素继承list-style属性。

list-style属性实例代码,及在线编辑器

<ul class='lt2'>
  <li>菠萝</li>
  <li>芒果</li>
  <li>砂糖橘</li>
</ul>

<ul class='lt3'>
  <li>葡萄</li>
  <li>青枣</li>
  <li>枇杷</li>
</ul>

<style>
  .lt2{list-style:square outside;}
  .lt3{list-style:inside url("../../static/img/ul.jpg");}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.