- 4/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
一个很酷的UL/LI列表美化样式，正在发愁不知如何美化列表的朋友可以参考一下，本列表有着极漂亮的鼠标悬停效果，不信你把鼠标放上去试试看。
<html> <head> <title>一款很酷的li列表美化实例</title> <meta http-equiv="Content-Type" mrc="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} LI { list-style-type:square; margin:0px; padding:0px; height:15px; } LI SPAN { color:black; cursor:hand; text-decoration:none; border:1px solid #F1F1F1; margin:0px; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px; position:relative; 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="300" border="1" cellpadding="5" cellspacing="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" align="center"> <tr bgcolor="#CCCCFF"> <td width="300"> <div align="center"><font color="#000000">一款很酷的LIST列表样式</font></div> </td> </tr> <tr> <td width="300"> <ul> <li><span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout"><a href="#">VKFlash 带后台管理的图片切换ASP版</a></span></li> <li><span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout"><a href="#">QVMS电影系统ASP版带采集生成HTML</a></span></li> <li><span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout"><a href="#">一个漂亮的JS日期显示框</a></span></li> <li><span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout"><a href="#">VB多种方法实现启动、停止系统服务</a></span></li> <li><span onMouseOver="this.className = 'liOver'" onMouseOut="this.className='liout'" onMousedown="this.className='lidown'" class="liout"><a href="#">C# 连连看游戏源代码拳皇头像版</a></span></li> </ul> </td> </tr> </table> </body> </html>