自定义列表li项目符号

版权声明:转载请附上原文链接,谢谢;侵删。 https://blog.csdn.net/u014291497/article/details/50450917

list-style:none;写在ul里!

自定义符号主要是使用background-image属性

示例代码:

li{
    background-image:url('../img/nav.png') ;
    background-repeat : no-repeat ;
    padding-left:40px;
}

list-style:none;用来清除默认样式;
background-image设定背景图片,也就是我们看成的项目符号;
background-repeat设定背景图片重复,设定no-repeat就会显示一个;
padding-left设定项目内容与图片的距离,不设定的话会重叠在一起。

background-image和background-repeat可以一起写在background里,

运行结果:
这里写图片描述

——————2016.2.24————————-
   又回过头来看看li元素。
   list-style其实是一个组合属性,完整的表示应该是形如这样的:
   

list-style: square inside url('/i/eg_arrow.gif')
ul{
    list-style:square inside url('/i/arrow.gif');
}

   分别对应了list-style-type; list-style-position; list-style-image属性。
   list-style-type: 设置列表项标记的类型(可自行查阅);
   list-style-position: 设置在何处放置列表项标记,属性值为inside或者outside(默认)或者inherit, 如果是inside,那么列表项标记会放置在li元素内部,如果是outside,则放置在li元素外部。示例地址,(可通过审查元素查看);
   list-style-image: 使用图像来替换列表项的标记。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页