一款很酷的li列表美化实例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>一款很酷的li列表美化实例</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}

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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一款很酷的li列表美化实例

分类

表格图层

描述

一个很酷的UL/LI列表美化样式，正在发愁不知如何美化列表的朋友可以参考一下，本列表有着极漂亮的鼠标悬停效果，不信你把鼠标放上去试试看。