纯CSS实现tab切换
3条评论»
前两天在一个页面中使用锚点时偶然发现了纯CSS实现tab切换的方法,其实在很久很久以前就有人实现过了,但是我从没留心过,也从没看过具体的实现方式。因为JS其实也很简单,但是如果纯CSS能实现当然再好不过了。
但是,遗憾的是这种方法opera不支持~同时这种方法确实限制也比较多,比如往往需要设置另外的样式来区分当前激活的tab,纯CSS显然是无法做到的。所以如果要求不是很高,不用兼容opera,这种纯CSS的写法还是可以选择的!

前两天在一个页面中使用锚点时偶然发现了纯CSS实现tab切换的方法,其实在很久很久以前就有人实现过了,但是我从没留心过,也从没看过具体的实现方式。因为JS其实也很简单,但是如果纯CSS能实现当然再好不过了。
但是,遗憾的是这种方法opera不支持~同时这种方法确实限制也比较多,比如往往需要设置另外的样式来区分当前激活的tab,纯CSS显然是无法做到的。所以如果要求不是很高,不用兼容opera,这种纯CSS的写法还是可以选择的!
前几天说要做个主题,原因有四:
其实早就在说自己做个theme,也画过好几张图,也写了几段代码,但是每次在中途就被我自己扼杀在摇篮中~:)
ND其实和techicon在布局上差别不大,我太喜欢techicon的三栏布局了,所以继续沿用。配色最开始主体部分用的白色背景,着实闪眼睛,液晶屏更甚,所以最后加了点灰色,减小了对比度,看着舒服多了。
遗憾:
测试IE6的透明png支持方式,其实也就是使用的IE的滤镜支持,发现两个问题(#box,a均使用了背景透明滤镜): 问题代码:
<!--
body{margin:0; background:#999;}
div#box{height:300px; width:600px; margin:0 auto; margin-top:100px; position:relative; background:#333 url(bg.png) no-repeat center center; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=corp,src="bg.png"); _background:none;}
a{position:absolute; display:block; width:80px; height:35px; line-height:35px; color:#FFF; text-align:center; top:70px; left:85px; cursor:crosshair;}
a:hover{color:#F30; background:url(bt.png) no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=corp,src="bt.png"); _background:none;}
-->
<div id="box"><a href="http://omiga.org">omiga.org</a></div>
1、如果#box使用了透明背景滤镜,#box的宽高设置在IE6、IE7中无效,#box的尺寸会根据其背景自适应。Demo
2、如果#box使用了透明背景滤镜,#box内伪类子元素失效。Demo
如果#box没有使用透明背景滤镜,不会出现以上问题。Demo

激情已不在了!
更新越来越慢了!
语言越来越贫乏了!
PS:这段过了,自己做个theme吧~话放出来,给自己制造点压力!
为了保证页面字体的通用和兼容性,通常都会为字体设置一个字体系列,而且往往会在最后加上该类别字体的通用字体系列名。如:
p{font-family:Arial, Helvetica, sans-serif;}
h1{font-family:"Times New Roman", Times, serif;}
pre{font-family:"Courier New", Courier, monospace;}
但是事实证明Firefox和Opera并不支持通用字体系列名称的字体定义!事实说明一切~
2008-10-14日更新
非常感谢Csineneo的留言,Firefox和Opera必须手动设置通用字体方可生效!但是我仍然有一点疑问,不管是FF还是Opera这个过程都无疑增加了用户的使用难度,而且用户“不准确”的设置必然影响页面的显示效果,毕竟不是所有的用户都知道哪些字体属于衬线字体,哪些字体属于非衬线字体,哪些字体属于等宽字体~···难道FF和Opera无法自动选择合适的通用字体?