纯CSS代码实现tabs标签效果

昵称12837895 2013-06-19

展开全文

用纯CSS代码实现tabs标签效果，手工代码实现，很实在的TAB选项卡菜单，其实看懂了代码，你会觉得如此简单就可写一个tab了，用了不少CSs的基础知识，通过此，你也许会更加熟悉如何使用Div CSS布局网页。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/XHTML1/DTD/XHTML1-strict.dtd">
<html xmlns="http://www./1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Tabs实例</title>
<style type="text/css" media="all">
#globalnav {
position:relative;
float:left;
width:100%;
padding:0 0 1.75em 1em;
margin:0;
list-style:none;
line-height:1em;
}
#globalnav LI {
float:left;
margin:0;
padding:0;
}
#globalnav A {
display:block;
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
}
#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
background:#bbb;
}
#globalnav A.here:link,
#globalnav A.here:visited {
position:relative;
z-index:102;
}
#globalnav UL {
position:absolute;
left:0;
top:1.5em;
float:left;
background:#bbb;
width:100%;
margin:0;
padding:0.25em 0.25em 0.25em 1em;
list-style:none;
border-top:1px solid #fff;
}
#globalnav UL LI {
float:left;
display:block;
margin-top:1px;
}
#globalnav UL A {
background:#bbb;
color:#fff;
display:inline;
margin:0;
padding:0 1em;
border:0
}
#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
color:#444;
}
</style>
</head>
<body>
<div>
<h1>CSS tabs</h1>
<ul id="globalnav">
<li><a href="#">我的首页</a></li>
<li><a href="#" class="here">About</a>
<ul>
<li><a href="#">版本</a></li>
<li><a href="#">梦想</a></li>
<li><a href="#">截图</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#" class="here">历史</a></li>
<li><a href="#">支持</a></li>
</ul>
</li>
<li><a href="#">新闻</a></li>
<li><a href="#">时速</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">实例</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>
</html>
迈登购原文转载