純CSS Tabs選項卡示例_菜單導航特效

純CSS Tabs選項卡示例，沒有用到JavaScript，因此使用起來更方便啦！~效果和CSS+JS的幾乎一模一樣，而且代碼也很簡，你可以繼續美化，變成你自己的哦！

<!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" lang="en" xml:lang="zh-cn">
<head>
<title>CSS Tabs示例 codeFans.net</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style type="text/css">
<!--
body
	{
		font-family: verdana, sans-serif;
		font-size: 11px;
		background: #f3f3f3;
	}
	
#container
	{
		width: 500px;
		padding: 30px;
		border: 1px solid #ccc;
		background: #fff;
	}

#tabnav
	{
		height: 20px;
		margin: 0;
		padding-left: 10px;
		background: url(/Pri_upfile/jsPic/20081030.gif) repeat-x bottom;
	}

#tabnav li
	{
		margin: 0; 
		padding: 0;
  		display: inline;
  		list-style-type: none;
  	}
	
#tabnav a:link, #tabnav a:visited
	{
		float: left;
		background: #f3f3f3;
		font-size: 10px;
		line-height: 14px;
		font-weight: bold;
		padding: 2px 10px 2px 10px;
		margin-right: 4px;
		border: 1px solid #ccc;
		text-decoration: none;
		color: #666;
	}

#tabnav a:link.active, #tabnav a:visited.active
	{
		border-bottom: 1px solid #fff;
		background: #fff;
		color: #000;
	}

#tabnav a:hover
	{
		background: #fff;
	}
-->
</style>
</head>
<body>
<h3>Simplified CSS Tabs</h3>
<p>A live example for <a href="/">this post</a> (view source for CSS and XHTML)</p>
<div id="container">
<ul id="tabnav">
	<li><a href="/sort/list_1_1.shtml" class="active">ASP</a></li>
	<li><a href="/sort/list_2_1.shtml">PHP</a></li>
	<li><a href="/sort/list_5_1.shtml">JAVA</a></li>
	<li><a href="/sort/list_10_1.shtml">DELPHI</a></li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

純CSS Tabs選項卡示例_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些