效果如下： 利用选择a:hover的子对象， li a {width:90px; height:87px; display:block; position:relative; text-decoration:none;} li a span { display:none;} li a:hover span { display:block; position:absolute; top:70px; left:0; text-align:center; background:#000; color:#fff; width:90px; height:17px; line-height:17px;} 具体例子猛击下面链接： /examples/img-tips/img-tips.html
效果图 代码非常简单，主要是利用了负margin的效果： CSS： ul { list-style:none;} li { float:left; width:87px; height:25px; text-align:center; line-height:25px; margin-left:-3px;} li a { width:87px; height:25px; display:block; background:url(m_bg.gif) no-repeat; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;} li a:hover { background:url(m_bg.gif) no-repeat 0 -25px;} XHTML： <ul> <li><a href="#">项目一</a></li> <li><a href="#">项目一</a></li> <li><a href="#">项目一</a></li> <li><a href="#">项目一</a></li> </ul> 完整实例效果：/examples/menu01/menu.html
标题党， 其实我想说，我不会去用CSS实现圆角的，没那个需求也没那个必要，用图片的背景的话，在结构上更清晰有条理了。 在FF和Chrome里可以用CSS3的属性，搞定圆角，爽~ 代码也更简洁，何乐而不为。 因为目前CSS3还未正式定下来，所以，都是通过私有属性来进行设置： FireFox: -moz-border-radius:8px; Chrome,Safari -webkit-border-radius:8px;
/examples/hover-focus.html 看看这样的表单效果，是不是很帅，而且又不需要你花费什么功夫 input[type=text]:hover, input[type=text]:focus { border:1px solid #f60} 不过遗憾的是，IE6除了对于A标签的一些效果，对于其它对象，基本上是不支持伪类效果的；IE7支持了:hover，但还是不支持:focus，Opera和FireFox当然是支持的，当然，要IE支持也不是没有办法，不过要用到js，很多时候，偶想想，还是算了~~现在开始考虑渐进优化，SB浏览器就让他去吧。
不知道是在哪位神仙的网站上看到这段代码，觉得很有趣，却百思不得其解。。。 放在这里，慢慢研究。 示例页面：/examples/clear-right.html 各浏览器效果： .wrapper{ width:150px; border:3px #666 solid; padding:3px; background-color:#efefef; } .sbox{ clear:right;/*注意，就是这个神奇的clear*/ float:left; width:100px; height:100px; border:1px #000 solid; background-color:#ccc; } Content Content 待续….
