css list-style-image属性笔记

原创 国哥笔记  2019-02-17 14:11  阅读 199 views 次

list-style-image属性定义及用法

在css中,list-style-image属性是使用来用图像来替换列表项的标记,在使用该属性的时候,建议始终设置list-style-type属性以防图像不可用;

list-style-image属性指定作为一个有序或无序列表项标志的图像,图像相对于列表项内容的放置位置通常使用list-style-position属性控制;

所以浏览器都支持list-style-image属性,但是任何版本的Internet Explorer(包括 IE8)都不支持属性值"inherit";

如果需要同时设置多个列表属性,可以使用list-style属性,list-style属性可以在一个声明中同时设置list-style-type(列表项标记的类型), list-style-position(何处放置列表项标记), list-style-image(图像来替换列表项的标记)属性;

list-style-image属性语法格式

  1. css语法:list-style-image:URL/none/inherit;
  2. JavaScript语法:object.style.listStyleImage="url('图像地址')";

属性值说明

  • URL:图像的路径;
  • none:默认,无图形被显示;
  • inherit:从父元素继承list-style-image属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css list-style-image属性笔记</title>
<style type="text/css">
ul {list-style-image:url('https://www.ggbiji.com/beian.png"');}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>
</html>

运行结果:

css list-style-image属性笔记

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-list-style-image.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情