純CSS代碼實現(xiàn)tabs標簽效果

昵稱12837895 2013-06-19

展開全文

用純CSS代碼實現(xiàn)tabs標簽效果，手工代碼實現(xiàn)，很實在的TAB選項卡菜單，其實看懂了代碼，你會覺得如此簡單就可寫一個tab了，用了不少CSs的基礎(chǔ)知識，通過此，你也許會更加熟悉如何使用Div CSS布局網(wǎng)頁。
<!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>
邁登購原文轉(zhuǎn)載