网站地图    收藏   

主页 > 专题教程 > css >

list-style-image

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS list-style-image 属性用于指定一个能用来作为列表项标记或者通过 display: list-item 生成的元素的标记的图片。...

CSS list-style-image 属性用于指定一个能用来作为列表项标记或者通过 : list-item 生成的元素的标记的图片。

当指定的图像可用时,将会通过list-style-type属性来替换默认的列表项标记。

作为列表标记图像的尺寸的计算方法如下:

  • 如果指定的图像有固定的宽度和高度,那么使用图片的宽度和高度来作为标记图像的宽度和高度。
  • 如果图片的宽度和高度有一个固定的比例,并且宽度和高度两者中有一个有固定尺寸,那么标记图像的宽高比和图片的比例相同,没有提供的宽度或高度值由图片的比例和提供的宽度或高度来计算。
  • 如果只提供了图片的宽高比,那么标记图像的宽度会被设置为1em,高度由图片的宽高比和图片的宽度来计算。如果计算得到的高度大于1em,那么高度会被置为1em,并且宽度会按照图片的宽高比和高度(1em)来重新计算。
官方语法
list-style-image: <url> | none | inherit 
                            

参数:

  • <url>:指定作为标记图像的URL地址。
  • none:不使用图像作为标记图像。
  • inherit:继承父元素的list-style-image值。

list-style-image属性的初始值为none

应用范围

list-style-image属性可以应用在列表元素或display: list-item的元素上。

示例代码
list-style-image: none;

list-style-image: url('starsolid.gif');

list-style-image: inherit;                              
                            
在线演示

下面的例子使用书作为无序列表的标记图像。

  • 列表项一
  • 列表项二
  • 列表项三

所用到的关键代码如下:

ul li{
  list-style-image: url(img/list-image.png);
}                              
                            
浏览器支持

所有的现代浏览器都支持list-style-image属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论