div中用<ul><li>前面如何自定义图案？

引用自定义图片

语法：list-style-image : none | url (url)

eg. li {list-style-image : url (image/aa.gif)}

引用系统图案

语法：

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

参数：

disc : 　CSS1　实心圆

circle : 　CSS1　空心圆

square : 　CSS1　实心方块

decimal : 　CSS1　阿拉伯数字

lower-roman : 　CSS1　小写罗马数字

upper-roman : 　CSS1　大写罗马数字

lower-alpha : 　CSS1　小写英文字母

upper-alpha : 　CSS1　大写英文字母

none : 　CSS1　不使用项目符号

armenian : 　CSS2　传统的亚美尼亚数字

cjk-ideographic : 　CSS2　浅白的表意数字

georgian : 　CSS2　传统的乔治数字

lower-greek : 　CSS2　基本的希腊小写字母

hebrew : 　CSS2　传统的希伯莱数字

hiragana : 　CSS2　日文平假名字符

hiragana-iroha : 　CSS2　日文平假名序号

katakana : 　CSS2　日文片假名字符

katakana-iroha : 　CSS2　日文片假名序号

lower-latin : 　CSS2　小写拉丁字母

upper-latin : 　CSS2　大写拉丁字母

说明：

设置或检索对象的列表项所使用的预设标记。

若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。

仅作用于具有display值等于list-item的对象（如li对象）。

注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。请参阅我的其他著作。

IE5.5尚不支持所有CSS2的值。

对应的脚本特性为listStyleType。请参阅我编写的其他书目。

示例：

li { list-style-type: square }

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

li {height: 50pxbackground: url(small3.png)} li:hover {background: url(small2.png)}

3、浏览器运行index.html页面，此时显示出了背景图片。

4、将鼠标移动到li标签背景图片上方，此时背景图片被改变了。

添加 li 的背景图可用如下css样式

li{background:url('bg.png')}  // 设置li元素的背景图为当前目录下的bg.png

li{background:nome}           // 取消背景图

所以实现上述要求可以采用如下思路：为取消背景图样式设定一个class，点击li元素时为其应用此样式。

实例演示如下：

创建Html元素

<div class="box">

<span>演示点击li去除背景样式：</span><br>

<div class="content">

<li>list-item-1</li>

<li>list-item-2</li>

<li>list-item-3</li>

<li>list-item-4</li>

</div>

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

li{margin:10px 0padding:10px 0background:url('bg1.png')}

.selected{background:none}

编写jquery代码

$(function(){

$("li").click(function() {

$(this).addClass('selected').siblings('li').removeClass('selected')

})

})

观察效果

初始样式

点击第二个li的效果

接着点击第四个li的效果

---