再发一个纯CSS的Tab切换卡 - WEB标准

当前位置：网站SEO > WEB标准 > 正文

再发一个纯CSS的Tab切换卡【WEB标准】

今天有时间，把两种情况的Tab切换程序修改了一下，加上了背景图片，优化了样式表，目前测试兼容IE6.0,IE7.0,FireFox,Chome,Safari,Opera等浏览器，没有测试IE8.0环境，如果在IE8.0环境下出现问题的话，请尝试用IE8.0的兼容性视图。
效果图如下：

把两个Tab切换的程序整理了一下，打包下载地址为：
XhtmlCss制作的Tab切换程序.rar

下面的代码也是一个纯css的选项卡，这次和上次不同的是，显示的内容不是堆在一起的tags，而是一行一行的标题，适用于在博客边栏显示文章标题。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯Xhtml+Css制作的Tab选项卡切换-SEO大厨</title>
<style type="text/css">
* { margin:0; padding:0; border:none; }
html, body { margin:0; padding:0; border:none; font:12px Arial, Helvetica, sans-serif; }
#sidebar { width:260px; height:290px; margin:0 auto; border:1px solid #ccc; }
ul, li { list-style:none; margin:0; padding:0; border:none; }
ul { margin:0 1px; }
li {
height:30px;
line-height:30px;
width:86px;
float:left;
text-align:center;
display:block;
}
li a.menu { display:block; zoom:1; background:url(tab.png) no-repeat 0 -35px; }
li a.menu:hover { background:url(tab.png) no-repeat;}

/* for IE 6 */
*html ul li a.menu:hover { background:url(tab.png) no-repeat 0 0; }
*html ul li a.menu div { display:none; }
*html ul li a.menu2:hover { background:url(tab.png) no-repeat -86px 0;}
*html li a.menu #dshow, *html ul li a.menu:hover div { display:block; position:absolute; width:255px; height:250px; text-align:left; line-height:25px; padding-top:5px; }
*html li a.menu #dshow a, *html ul li a.menu:hover div a { padding-right:5px; display:block; background:none }

/* for IE 7 */
ul li div { display:none; }
ul li a { background:url(tab.png) no-repeat 0 -30px; }
ul li:hover a { background:url(tab.png) no-repeat 0 0; }
ul li a.menu2 { display:block; zoom:1; background:url(tab.png) no-repeat -86px -35px;}
ul li:hover a.menu2 { background:url(tab.png) no-repeat -86px 0;}
li #dshow, ul li:hover div { display:block; position:absolute; width:255px; height:250px; text-align:left; line-height:25px; padding-top:5px; }
li #dshow a, ul li:hover div a { padding-right:5px; display:block; background:none; }

/* 以下代码用于区分ie6,ie7,Firefox&Chrome */
#sidebar ul li div { background:#fff; overflow:hidden; }

.d1 { margin:0 0 0 4px; }
*html .d1 { margin:-2px 0 0 -39px; }
*+html .d1 { margin:0 0 0 -39px; }

.d2 { margin:0 0 0 -82px; }
*html .d2 { margin:-2px 0 0 -125px; }
*+html .d2 { margin:0 0 0 -125px; }

.d3 { margin:0 0 0 -168px; }
*html .d3 { margin:-2px 0 0 -211px; }
*+html .d3 { margin:0 0 0 -211px; }
</style>
</head>

<body><br /><br />
<div id="sidebar">
<ul>
  <li><a href="#A" class="menu">Tab One<!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="d1" id="dshow">
    <a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a>
    </div>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="#B" class="menu">Tab Two<!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="d2">
    <a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a>
    </div>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="#C" class="menu menu2">Tab Three<!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="d3">
    <a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a>
    </div>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
</ul>
</div>
<p style="text-align:center; line-height:30px;">Powerer By Daniel , 转载请注明出处(不胜感激)：<a href="http://www.cookseo.com">http://www.cookseo.com</a> 2009-07-07</p>
</body>
</html>

流行热度：超过人阅读
关键词：xhtml css tab 选项卡
发布日期：daniel 发表于 2009-7-1 9:40:56
所属分类：【网站SEO - WEB标准】 - 【WEB标准】
文章链接：http://www.cookseo.com/blog/css/csstab/ [点击复制] (转载时请注明本文出处及文章链接)
引用地址：点击这里获取该日志的TrackBack引用地址

纯Xhtml+Css制作的Tab选项卡切换网站Alexa排名有所提升

您或许对与WEB标准相关的文章感兴趣：

纯Xhtml+Css制作的Tab选项卡切换 (2009-6-30 13:10:36)

js+css制作选项卡特效,兼容IE6,IE7,火狐FF及Chrome (2009-6-1 10:7:12)

Firefox的div高度自适应 (2009-5-26 15:42:4)

利用CSS截取文本字数,防止文本溢出 (2009-5-26 15:38:14)

使用Lable标签,提升用户体验! (2009-4-22 19:23:11)

区分IE6.0,IE7.0,FireFox的CssHack写法： (2009-4-20 15:1:33)

CSS(CssReset)定义网站的整体元素样式 (2009-4-9 22:27:38)

css之解决span宽度的完美方案 (2008-12-18 10:55:32)

本文被踩了(3)次, 既然来了，我也要踩一脚