纯CSS实现Tab切换标签效果代码
将为大家展示纯CSS实现的Tab切换标签效果代码实例。这是一个简洁而精彩的效果,相信会吸引大家的目光。
让我们欣赏一下运行后的效果截图,感受一下吧!
我们还为大家准备了在线演示,可以更加直观地看到效果:
接下来,让我们看看具体的代码实现。代码如下所示:
HTML部分:
```html
body { margin: 0; font-size: 12px; background: 666; }
box { width: px; height: 300px; margin: 100px auto 0; }
tab_nav { margin: 0; padding: 0; height: 25px; line-height: 24px; }
tab_nav li { float: left; margin: 0 3px; list-style: none; border: 1px solid 999; border-bottom: none; height: 24px; width: 60px; text-align: center; background: FFF; }
a { font: bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; color: green; text-decoration: none; }
a:hover { color: red; }
tab_content { width: 398px; height: 273px; border: 1px solid 999; font: bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; text-align: center; background: FFF; overflow: hidden; }
t_1, t_2, t_3 { width: 100%; height: 273px; }