Heim > Web-Frontend > CSS-Tutorial > Hauptteil

css如何设置li的样式

藏色散人
Freigeben: 2022-12-30 11:11:48
Original
18747 人浏览过

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

css如何设置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属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)

list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
Nach dem Login kopieren

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

none:不使用项目符号。

disc:实心圆。

circle:空心圆。

square:实心方块。

demical:阿拉伯数字。

lower-alpha:小写英文字母。

upper-alpha:大写英文字母。

lower-roman:小写罗马数字。

upper-roman:大写罗马数字。

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

li{
    list-style-type:square;
}
  • 这里是列表内容
  • 这里是列表内容
  • 这里是列表内容
Nach dem Login kopieren

二、list-style-image属性

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

list-style-image:none/url
Nach dem Login kopieren

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

none:没有替换的图片。

url:要替换图片的路径。

来看一段代码:

li{
    list-style-image:url(images/bg03.gif);
}
  • 这里是列表内容
  • 这里是列表内容
  • 这里是列表内容
Nach dem Login kopieren

三、list-style-position属性

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

list-style-position:inside/outside

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

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

使用list-style-position属性的示例如下:

li{
    list-style-type:square;
    list-style-position:outside;
}
  • 这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
  • 这里是列表内容
  • 这里是列表内容
Nach dem Login kopieren

再来看一下属性值为inside的样式。

li{
    list-style-type:square;
    list-style-position:inside;
}
  • 这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。
  • 这里是列表内容
  • 这里是列表内容
Nach dem Login kopieren

四、list-style属性

list-style属性是综合设置li样式的属性,也是一个可以继承的属性,语法结构如下:

li-style:list-style-type/list-style-image/list-style-position
Nach dem Login kopieren

各个值的位置可以交换。比如:

li{
    list-style:url(images/bg03.gif) inside;
}
  • 这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
  • 这里是列表内容
Nach dem Login kopieren

以上是css如何设置li的样式的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!