超COOL的LIST样式

12/19/2007来源:网页特效人气:4566

<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>&nbsp;&nbsp;&nbsp;&nbsp;以下效果只用到两张小图片作为列表符号,没有用到表格,都是用样式表进行定义,可定义的参数为:</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.knowsky.com">网页教学网(knowsky.com)</a> </div>
 </td>
 </tr>
</table>
</body>
</html>