|
<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>
|