一个效果不错的 TAB 样式

本文介绍一种将 <ul> 和 <li> 修饰成 TAB 风格的 CSS 样式。

先看看最终效果：

一个效果不错的 TAB 样式 – 示例

现在我们可以结合效果来看看代码。

先看看 CSS 部分 :

<style type="text/css">

body {
	font-family:verdana,arial,sans-serif,"宋体";
	font-size:12px;
	margin:0px;
	padding:0px;
	background:#aaa;
}

a {
	color: #003499;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: underline;
}

#tabnav {
	background:#d5d5d5;
	border-bottom:1px solid #333;
	padding-bottom:3px;
}

#tabnav ul {
	padding:15px 0px 5px 0px;
	margin:5px 0px 5px 0px;
	list-style:none;
	background:#f1f1f1;
	border-bottom:1px solid #999;
}

#tabnav ul li {
	display:inline;
	margin-left:10px;
}

#tabnav ul li a {
	background:#fff;
	padding:5px 10px 5px 10px;
	border:1px solid #999;
}

#tabnav ul li a:hover {
	background:#ccc;
}

#tabnav ul li a.here {
	background:#d5d5d5;
	padding:5px 10px 5px 10px;
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #999;
	border-bottom:1px solid #d5d5d5;
}

#tabnav ul li a.here:hover {
	background:#d5d5d5;
}

</style>

代码中首先定义了整个文档的字体、文字大小及背景等信息，还定义了默认的链接样式。关键部分从 #tabnav 开始， #tabnav 就是要定义的 <ul> 的父元素，然后逐层定义 <li> <a> 等样式。

参照效果图我们可以看到：#tabnav ul li a.here 定义的是当前选中的链接样式。

对照着 (X)HTML 看看：

<div id="tabnav">
<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#" class="here">技术文章</a></li>
	<li><a href="#">提交文章</a></li>
	<li><a href="#">联系我们</a></li>
</ul>
</div>

通过修改 CSS 我们可以很容易的改变整个 TAB 的显示风格。