超COOL的LIST样式
来源：互联摘选 日期：2004年06月10日 05:55:14
<html>
<head>
<title>！超COOL的LIST的菜单样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--BODY,td
{
font-family:verdana;
cursor:default;
font-size:12px;
}
a{font-size:12px; color:#006699; line-height:160%; text-decoration:none }
a:link{font-size:12px; color:#006699; line-height:160%; text-decoration:none }
a:active{font-size:12px;color:#990000; line-height:160%;}
a:hover{font-size:12px; color:#3366ff; line-height:160%; text-decoration:none}
/*定义链接效果，不要太复杂，以免和SPAN的样式混扰，*/
LI
{
list-style-type:square;
/*list-style-image:url("http://www.51js.com/faq.gif"); */
margin:0px;
padding:0px;
height:15px;
/*定义了列表的行高，注意不要设置太高，以免列表和符号脱节，*/
}
LI IMG
{
cursor:hand;
margin:0px;
padding:0px;
}
LI SPAN
{
color:black;
cursor:hand;
text-decoration:none;
/*定义列表中文字及鼠标指针的样式*/
border:1px solid #F1F1F1;
/*定义了SPAN的边框及颜色。*/
margin:0px;
padding-left:1px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
position:relative;
/*以上定义列表SPAN之间的间距。*/
top:0px;
left:-1px;/*定义了列表与符号之间的间距。*/
}
.liOver
{
background-color:#dddddd;
border:1px solid #000000;
}
.liout
{
background-color:#f1f1f1;
border:1px solid #f1f1f1;
}
LI SPAN.lidown
{
background-color:#00ff00;
border:1px solid #999999;
}
-->
</style>
</head>
<body bgcolor="#f1f1f1">
<table width="510" border="1" cellpadding="5" cellspacing="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" align="center">
<tr bgcolor="#CCCCFF">
<td width="575">
<div align="center"><font color="#000000">超COOL的LIST样式</font></div>
</td>
</tr>
<tr>
<td width="575">
<p> 以下效果只用到两张小图片作为列表符号，没有用到表格，都是用样式表进行定义，可定义的参数为：</p>
<blockquote>
<p> LI的符号样式；<br>
链接的样式；<br>
SPAN的样式； </p>
<p>如果能够进行很好的配色及背景搭配，就可以做出非常好的效果。</p>
</blockquote>
<ul>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
<li style="list-style-image: url('http://www.51js.com/images/multipage.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'">
<span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout">
<a href="#">不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！</a> </span> </li>
</ul>
</td>
</tr>
<tr bgcolor="#CCCCFF">
<td width="575">
<div align="right">FROM：<a href="http://www.webjx.com">网页教学网(webjx.com)</a> </div>
</td>
</tr>
</table>
</body>
</html>
