文档由 http://www.cwdn.org/ 提供
下面的代码就是一个例子
<!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=utf-8" />
<title>一个非常简单的CSS网页选项卡示例</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
body{font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;font-size:12px;}
#nav{border-bottom:1px solid #666;}
#nav{height:24px;}
* html #nav{height:23px;}
*+html #nav{height:23px;}
#nav ul{list-style:none;margin:0 10px;padding:0;position:absolute;}
#nav ul li{margin-right:10px;float:left;}
#nav ul li a{border:1px solid #666;padding:4px 5px !important;padding:5px 5px 3px;display:block;text-decoration:none;background:#eee;color:#256bae;}
#nav ul li a:hover{background:#fff;border-bottom:1px solid #fff;text-decoration:none;}
#nav ul li.on a{background:#fff;border-bottom:1px solid #fff;}
</style>
<meta content="cwdn.org" name="author" />
<meta content="cwdn.org" name="Copyright" />
<meta content="一个非常简单的CSS网页选项卡示例" name="description" />
<meta content="css网页选项卡" name="keywords" />
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.cwdn.org/" title="中国网页开发者网络首页" target="_blank">首页</a></li>
<li class="on"><a href="http://www.cwdn.org/article/" title="关于网页制作、网站建设方面的各种教程和示例" target="_blank">网页学院</a></li>
<li><a href="http://www.cwdn.org/website/" title="一些站长常用的或者非常好的站点的展示平台" target="_blank">酷站推荐</a></li>
<li><a href="http://www.cwdn.org/story/" title="一些爆笑网文、搞笑短信、幽默笑话、鬼故事等，累了的话就来这里放松一下吧" target="_blank">休闲故事</a></li>
<li><a href="http://www.cwdn.org/forum/" title="网页开发者们相互交流的平台" target="_blank">网页开发论坛</a></li>
<li><a href="http://www.cwdn.org/support/" title="关于中国网页开发者网络的一些信息以及网站帮助" target="_blank">支持中心</a></li>
</ul>
</div>
</body>
</html>
本地下载地址
