超COOL的LIST样式

王朝other·作者佚名 2008-05-20

宽屏版字体: 小|中|大|超大

{

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的样式混扰，*/

{

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;

}

超COOL的LIST样式

以下效果只用到两张小图片作为列表符号，没有用到表格，都是用样式表进行定义，可定义的参数为：

LI的符号样式；

链接的样式；

SPAN的样式；

如果能够进行很好的配色及背景搭配，就可以做出非常好的效果。

不但改变了列表符号，而且改变了链接效果，还改变了SPAN的样式！COOL！

FROM：网页教学网(webjx.com)