CSSlist-style-image

CSS list-style-image 可以用图片取代 ul li 或 ol li 原本默认的项目符号,如此一来,项目的呈现就变得相当的丰富,轻松的设计出打勾、箭头或是可爱图形等替代符号,能够显示图片的格式包含 jpg、jpeg、png、gif、bmp … 等常见图文件格式。list-style-image 的项目替代图片的位置,通常使用 list-style-position 来控制,所有主流的浏览器都支持 list-style-image 语法的项目替代图片功能。

CSS list-style-image 语法

list-style-image:url(‘ 要显示的图片文件位置 ‘);

语法中的 url 括号内放入要显示的图片文件位置,可以是同一台服务器上的图文件,也可以引入外部图文件,若为同一网站根目录下的图文件,可以使用简化的 url 位置,但若是不同服务器的外部图文件,则必须使用完整的图片网址,否则无法显示图片,只会显示原始项目符号。

CSS list-style-image 示例<style type=”text/css”>
ul li {
list-style-image:url(‘upload/20130930173146.gif’);
}
</style>
<ul>
 <li>Test list style image A.</li>
 <li>Test list style image B.</li>
 <li>Test list style image C.</li>
</ul>以上示例输出结果如Test list style image A.Test list style image B.Test list style image C.CSS list-style-image 参数表

参数 定义
url 引用图文件取代原本的项目符号,亦为 list-style-image 最主要功能。
none 不显示图片,仅显示原始项目符号,此为默认值。与不用 list-style-image 同样意思。
inherit 继承自父层的规则,IE9 才开始支持,旧版 IE 不支持,不太建议使用。

若不需要图片式项目符号,仅需图形式项目符号,可以使用:CSS list-style-type。

使用 list-style-image 需要注意引用的图片是否可以正确显示,尤其是引用外部图片的时候,要确认该图文件是否可外连,以免发生自己的电脑看起来没问题,换一台电脑就看不到图文件的窘境。最重要的是,引用图片不能够使用未经授权的图片,网络的世界也需要彼此尊重。

相关主题研究CSS list-style-positionCSS list-style-typeHTML ul 与 ol 差异HTML ol li 项目标签HTML ul li 项目标签CSS list-style 列表属性

网页设计

CSSDIV文字颜色设计

2022-6-18 11:05:27

网页设计

onmouseout事件

2022-6-18 13:51:14



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yp10086@vip.qq.com 举报,一经查实,本站将立刻删除。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索