网页制作 
首页 > 网页制作 > 浏览文章

css中ul li的背景小图标属性设置的两种情况

(编辑:jimmy 日期: 2024/11/17 浏览:3 次 )
这里我们分两种情况列出:
①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在<ul>里。因为很长,所以放在<li>的外边<ul>里
②当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里

A

复制代码代码如下:
<style>
.test1 { width:100px; height:265px; background:url(http://www.86image.cn/statics/images/show/li.jpg) no-repeat scroll 0 8px; }
.test1 li {padding-left:30px; line-height:27px; list-style-type:none;}
</style>
<ul class="test1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>

如图示:
css中ul li的背景小图标属性设置的两种情况 

B

复制代码代码如下:
<style>
.test1 li { padding-left:15px; background:url("http:www.86image.cn/statics/images/tpl1/images/icon_fk.gif" ) no-repeat scroll 1px 8px; line-height:22px; list-style-type:none;}
</style>
<ul class="test1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

如图示:
css中ul li的背景小图标属性设置的两种情况
上一篇:css sprite原理优缺点及使用示例介绍
下一篇:纯CSS3实现带动画效果导航菜单无需js
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。