一个效果不错的 TAB 样式

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

先看看最终效果:

css tab

一个效果不错的 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 的显示风格。

《一个效果不错的 TAB 样式》有1个想法

三哥进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>