超COOL的LIST样式 - 页面导航类 - 中国设计秀_网页设计教程_优秀网页设计欣赏

超COOL的LIST样式

转载请注明出处-中国设计秀-cnwebshow.com

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

转载请注明出处-中国设计秀-cnwebshow.com

【投稿】【对本文进行评论】【字体：大中小】【发布于2005-12-15 16:48】

相关专题：暂无相关专题

上一篇：javascript函数库(全) 下一篇：IE地址栏前换成自己的图标

文章导读 青蛙娱乐　魔兽地图下载[CCCUUU.COM] 热点,网文,魔兽攻略 | 中国设计秀设计资源站开通

Flash ActionScript 3 殿堂..

The Adobe Photoshop CS3 Bo..

Adobe Photoshop CS3 Classr..

HTML与CSS入门经典(第7版)

Don't Make Me Think 第2版