CSS Sprites相信大家都比较熟悉了，早在2005年CSS Zengarden的园主Dave Shea就在AListApart发表对该技术的详细阐述，也不算是新鲜事了。之前要应用时都为了算位而烦恼，好在目前多了很多在线生成工具，减少了些繁琐的过程，我也在打算下一步把目前这个theme所用到的图片妖一下，瘦下身，这是下一步的工作，这次先分享个jquery的AutoSprites导航插件，初步了解，效果还不错。
相应的图片弄好之后，接着就是html结构：
<ul id="hnav">
<li id="hnavhome"><a href="#">Home</a></li>
<li id="hnavlocal"><a href="#">Local Industry</a></li>
<li id="hnavhigher"><a href="#">Higher Education</a></li>
<li id="hnavcomm"><a href="#">Our Community</a></li>
<li id="hnavnews"><a href="#">News</a></li>
</ul>
Continue reading »
最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。
我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。
这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1
Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。
接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）
我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。
一直想找个好的loading用在网站载入慢的时候提示提示，不用干等着，不是滋味。Jquery可以很好的实现这一效果，在老外那找到这代码太爽了，简单易用实用。
在代码<head></head>里加入以下代码：
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$("#loading").hide();
})
</script>在里<body></body>加入以下代码：
<div id="loading">
Loading content, please wait..
<img src="loading.gif" alt="loading.." />
</div>
在里的这代码必须保证在网页载入的最前面。
接着是css代码：
#loading{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-150px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}一个基于jquery的loading效果就完成咯。
