CSS布局时如何控制li列表样式
li列表标签默认样式是前面有一个小圆点或者是数字序号。这个默认样式可以修改吗,当然是可以修改的!
如何通过css修改li标签样式?
在CSS中控制li列表的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。
一、list-style-type属性
list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:
list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。
disc: CSS1 实心圆
circle : CSS1 空心圆
square: CSS1 实心方块
decimal: CSS1 阿拉伯数字
lower-roman: CSS1小写罗马数字
upper-roman: CSS1大罗马数字
lower-alpha: CSS1 小写英文字母
upper-alpha: CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian: CSS2 传统的亚美 尼亚数字
cjk-ideographic: CSS2 浅白的表意数字
georgian: CSS2 传统的乔治数字
lower-greek: CSS2 基本的希腊小写字母
hebrew: CSS2 传统的希伯莱数字
hiragana: CSS2 日文平假名字符
hiragana-iroha: CSS2 日文平假名序号
katakana: CSS2 日文片假名字符
katakana-iroha: CSS2 日文片假名号
使用list-style-type属性的示例代码如下:
- <style>
- .article li
- {list-style-type: decimal;}
- </style>
- <body>
- <div class=”article”>
- <ul>
- <li>列表内容1</li>
- <li>列表内容2</li>
- <li>列表内容3</li>
- <li>列表内容4</li>
- </ul>
- </div>
- </body>
复制代码
二、list-style-image属性
list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:
list-style-image属性可以取两个值: none:没有替换的图片。 url:要替换图片的路径。
使用方法:
list-style-image: url(img/bg01.jpg)
三、list-style-position属性
list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:
list-style-position:inside/outside
inside:项目符号放置在文本以内。
outside:项目符号放置在文本以外。
四、list-style属性
list-style属性是综合设置li样式的属性,也是一个可以继承的属性,各个值位置可以互换:
list-style: decimal inside;