+ -
当前位置:首页 → 问答吧 → 请问,如何制作UL中li标签前有编号图片排列呢?

请问,如何制作UL中li标签前有编号图片排列呢?

时间:2007-02-13

来源:互联网

效果是  每个LI标签前有1 2 3 4 5 6...的小图标排列,我惟一知道的一种做法就是做一张大的带有编号的图片做成背景,然后在里面加LI
但是这样做下载起来比较慢,应该还有其他什么方法,麻烦各位大虾告诉下...

作者: zhousoog   发布时间: 2007-02-13

每个数字做成小图
然后
<style> ol {list-style:none} ol li {padding-left:20px;} #1 {background:url(http://bbs.blueidea.com/images/blue/smilies/smile.gif) left no-repeat;;} #2 {background:url(http://bbs.blueidea.com/images/blue/smilies/redface.gif) left no-repeat;;} #3 {background:url(http://bbs.blueidea.com/images/blue/smilies/biggrin.gif) left no-repeat;;} </style> <ol> <li id="1">电子公告服务(BB1)审批</li> <li id="2">电子公告服务(DDD)审批</li> <li id="3">电子公告服务(EWR)审批</li> </ol>
 提示:您可以先修改部分代码再运行
[ 本帖最后由 jsuper 于 2007-2-13 18:00 编辑 ]

作者: jsuper   发布时间: 2007-02-13

楼上大哥,这样CSS貌似太啰嗦了吧....
有没有通过JS或者CSS全部定义来实现的额?

[ 本帖最后由 zhousoog 于 2007-2-13 19:37 编辑 ]

作者: zhousoog   发布时间: 2007-02-13

相信二楼只是想给你演示的更复杂些,你简化一下就好了
<style> ol {list-style:none} ol li {padding-left:20px;background:url(http://bbs.blueidea.com/images/blue/smilies/smile.gif) left no-repeat;;} </style> <ol> <li>电子公告服务(BB1)审批</li> <li>电子公告服务(DDD)审批</li> <li>电子公告服务(EWR)审批</li> </ol>
 提示:您可以先修改部分代码再运行

作者: Ahaooo   发布时间: 2007-02-14

楼主的意思应该是直接从1-10这样排列吧

作者: kenlilian   发布时间: 2007-02-14

不知楼主说的可是这种
<style type="text/css"> .list{width:240px;background:#f6f6f6;border:1px #e3e3e3 solid;} .list ul{padding:0;margin:0 0 0 28px;list-style-type:decimal;padding:5px;} .list li{line-height:24px;} </style> <div class="list"> <ul> <li>但是这样做下载起来比较慢,</li> <li>应该还有其他什么方法,</li> <li>麻烦各位大虾告诉下</li> </ul> </div>
 提示:您可以先修改部分代码再运行

作者: marlon119   发布时间: 2007-02-14

不是这种噢~~  是要那些编号是图片的1 2 3 4 5....

作者: zhousoog   发布时间: 2007-02-14

引用:
原帖由 zhousoog 于 2007-2-13 19:36 发表
楼上大哥,这样CSS貌似太啰嗦了吧....
有没有通过JS或者CSS全部定义来实现的额?
把样式放到CSS文件里,其它的页面也可以调用。如果其它的页面不需要这些数字列表,又想简化CSS,那就把数字做成单独的小图,直接当图片插入到文字的前面也行。

作者: jsuper   发布时间: 2007-02-16

通常都是脚本循环出来的.

作者: snwebsite   发布时间: 2007-02-16

   没懂~

作者: shipeng   发布时间: 2010-12-01