div+css+js隔行换色+鼠标悬停变色

作者:enenba | 发表于:2012-03-31 16:40 | 分类:html+css

     很有用的隔行换色,并且鼠标悬停变色,其效果如下:

html源代码是如此的精简,CSS和JS再次分离html源代码,精简多么美好。上图:

悬停变色哦

 

简单贴下li标签的源码:

<div class="mytable" id="list_interlaced">
	<ul>
		<li><a href="#">这个是第1行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第2行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第3行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第4行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第5行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第6行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第7行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第8行的文字,大家看清楚了</a></li>
		<li><a href="#">这个是第9行的文字,大家看清楚了</a></li>
	</ul>
</div>

1、这样的好处首先是不用可恶的table,让前端程序是那么的美观。让内容被度娘儿轻轻抚摸…………(pooxx不知道说了什么,是方便搜索引擎抓取,精简HTML源码。)

 

2、没有在每句li里写onfocus、onclick ……你想想on on 就一句<li>标签,塞进了一堆的代码。你说肿么了。不肿才怪。

 

3、不用写ID,还原真实的静态页面,不用修改和添加多少的id啊 class啊…………

 

@%!%@……(说不完了上源码)

 

end

附件下载/演示源码:
li_bg.rar32.09KB

上一篇: JS查看键盘按键键值   |   下一篇:只能输入2位或5位整数的正则表达式» 标签: html css html标签 js

评论:

2012-04-01 16:06

给力。。。。