<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("/School/UploadFiles_7810/201104/20110411090131902.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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('/School/UploadFiles_7810/201104/20110411090132233.gif'); " onMouseOver="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132711.gif)'" onMouSEOut="this.style.listStyleImage='url(/School/UploadFiles_7810/201104/20110411090132233.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>