css如何设置li的样式


本文摘自PHP中文网,作者藏色散人,侵删。

css设置li样式的方法:1、通过list-style-type属性定义li列表的项目符号;2、通过list-style-image属性实现使用图片代替项目符号;3、通过list-style属性综合设置li样式即可。

本教程操作环境:windows7系统、css3版本、Dell G3电脑。

推荐:css视频教程

li标签默认样式是前面有一个小圆点或者是数字序号,那么怎样改变li标签的默认样式呢?

css怎么设置li标签的样式?

ul和li列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。

一、list-style-type属性

list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)

1

list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。

none:不使用项目符号。

disc:实心圆。

circle:空心圆。

square:实心方块。

demical:阿拉伯数字。

lower-alpha:小写英文字母。

upper-alpha:大写英文字母。

lower-roman:小写罗马数字。

upper-roman:大写罗马数字。

使用list-style-type属性的示例代码如下:

1

2

3

4

5

6

7

8

li{

    list-style-type:square;

}

<ul>

    <li>这里是列表内容</li>

    <li>这里是列表内容</li>

    <li>这里是列表内容</li>

</ul>

二、list-style-image属性

list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:

1

list-style-image:none/url

list-style-image属性可以取两个值:

none:没有替换的图片。

url:要替换图片的路径。

来看一段代码:

1

2

3

4

5

6

7

8

li{

    list-style-image:url(images/bg03.gif);

}

<ul>

    <li>这里是列表内容</li>

    <li>这里是列表内容</li>

    <li>这里是列表内容</li>

</ul>

三、list-style-position属性

list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:

list-style-position:inside/outside

inside:项目符号放置在文本以内。

outside:项目符号放置在文本以外。

阅读剩余部分

相关阅读 >>

css怎么实现内容超出隐藏效果

创建漂亮的 css 按钮的 10 个代码片段

css如何让div居中?css实现div居中的方法

css 实现拖拽改变布局大小

css如何解决图片底部空白缝隙问题

css怎么设置楷体

css如何取消加粗

css中bem命名规范是什么

利用css完成一个悬停过渡动画的项目(超级简单)

css怎么设置文本居中对齐

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...