<html>
<head>
<title>关于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; line-height:160%;}
a:hover{font-size:12px; color:#00CC00; line-height:160%; text-decoration:underline}


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;/*定义了列表与符号之间的间距。*/
  }

LI SPAN.clsMouseOver
  {
  background-color:#CCCCCC;
  border:1px solid #999999;
  }

LI SPAN.clsMouseDown
  {
  background-color:#999999;
  border:1px solid #999999;
  }

LI SPAN.clsCurrentHasFocus
  {
  background-color:#FFFFFF;
  border:1px solid #999999;
  }

LI SPAN.clsCurrentNoFocus
  {
  background-color:#F1F1F1;
  border:1px solid #999999;
  }

LI SPAN.clsUnavailable
  {
  color:#888888;
  }

LI UL
  {
  margin-left:16px;
  margin-right:0px;
  margin-top:1px;
  margin-bottom:0px;
  padding:0px;
  display:none;
  }

-->
</style>
</head>

<body bgcolor="#f1f1f1">
<table width="75%" border="1" cellpadding="5" cellspacing="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" align="center">
  <tr bgcolor="#666699"> 
    <td> 
      <div align="center"><font color="#FFFFFF">1:使用样式表及class定义列表显示的背景及边框样式</font></div>
    </td>
  </tr>
  <tr> 
    <td> 
      <ul>
        <li>没有使用sapn定义的列表 </li>
        <li><span>使用了span，但是没有定义class的列表</span></li>
        <li><span class="clsMouseOver" ><a href="#">本span使用了class="clsMouseOver"的效果</a></span></li>
        <li><span class="clsCurrentHasFocus" ><a href="#">本span使用了class="clsCurrentHasFocus"的效果</a></span></li>
        <li><span class="clsCurrentNoFocus"><a href="#">span class="clsCurrentNoFocus"</a></span></li>
        <li><span class="clsUnavailable"><a href="##">span class="clsUnavailable"</a></span></li>
        <li style="list-style-image: url('http://www.51js.com/faq.gif); "><span><a href="#">在LI中使用了style="list-style-image: 
          url('图片路径及文件名'); "，利用图片代替符号</a></span></li>
      </ul>
    </td>
  </tr>
  <tr bgcolor="#666699"> 
    <td> 
      <div align="center"><font color="#FFFFFF">2:利用onmouseover和onmouseout定义列表的变化</font></div>
    </td>
  </tr>
  <tr> 
    <td height="77"> 
      <ul>
        <li onMouseOver="this.style.listStyleType='circle'" onMouseOut="this.style.listStyleType='disc'"><span class="">注意看前面的符号表化，这里是使用了'circle'和'disc'"进行变化，默认是'square'；</span> 
        </li>
        <li onMouseOver="this.style.listStyleType='circle'" onMouseOut="this.style.listStyleType='disc'"><span class="">注意看前面的符号表化，这里是使用了'circle'和'disc'"进行变化，默认是'square'；</span></li>
        <li onMouseOver="this.style.listStyleType='circle'" onMouseOut="this.style.listStyleType='square'"><span class=""><a href="#">这里是使用了'circle'和'square'"，默认是'square'；同时给文字加上链接。</a></span></li>
        <li onMouseOver="this.style.listStyleType='circle'" onMouseOut="this.style.listStyleType='square'"><span class=""><a href="#">这里是使用了'circle'和'square'"，默认是'square'；同时给文字加上链接。</a></span></li>
      </ul>
    </td>
  </tr>
  <tr bgcolor="#666699"> 
    <td> 
      <div align="center"><font color="#FFFFFF">3:利用翻转图片代替符号，使列表的变化更加漂亮</font></div>
    </td>
  </tr>
  <tr> 
    <td> 
      <ul>
        <li style="list-style-image: url('http://www.51js.com/faq.gif');" onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/faq.gif)'"><span class=""><a href="#">这里使用了onMouseOver="this.style.listStyleImage='相对图片路径'" 
          onMouseOut="this.style.listStyleImage='相对图片路径'</a></span></li>
        <li style="list-style-image: url('http://www.51js.com/faq.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/n.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/faq.gif)'"><span class=""><a href="#">这里使用了onMouseOver="this.style.listStyleImage='相对图片路径'" 
          onMouseOut="this.style.listStyleImage='相对图片路径'</a></span></li>
        <li style="list-style-image: url('http://www.51js.com/faq.gif'); " onMouseOver="this.style.listStyleImage='url(http://www.51js.com/images/multipage.gif)'" onMouseOut="this.style.listStyleImage='url(http://www.51js.com/n.gif)'"><span class=""><a href="#">这里使用了onMouseOver="this.style.listStyleImage='绝对图片路径'" 
          onMouseOut="this.style.listStyleImage='绝对图片路径'</a></span></li>
      </ul>
    </td>
  </tr>
  <tr bgcolor="#666699"> 
    <td> 
      <div align="center"><font color="#FFFFFF">4:再接再厉，把列表中的变化做出来</font></div>
    </td>
  </tr>
  <tr> 
    <td>可否定义&lt;span&gt;的onmouseover及onmouseout的效果，或其他办法使列表移动上去后进行变化，<br>这变化不是是指链接的变化，而是链接文字的背景在变化，可参照1中所定义的类，<br>做出非常漂亮的LI效果。一会再想想。</td>
  </tr>
</table>
</body>
</html>