純CSS代碼實現tabs標籤效果（轉載）

07-12

用純CSS代碼實現tabs標籤效果，手工代碼實現，很實在的TAB選項卡菜單，其實看懂了代碼，你會覺得如此簡單就可寫一個tab了，用了不少CSs的基礎知識，通過此，你也許會更加熟悉如何使用Div CSS布局網頁。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd">

<head>

<title>CSS Tabs實例</title>

#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>

<li><a href="#" class="here">About</a>

<ul>

<li><a href="#">Careers</a></li>

</ul>

</li>

<li><a href="#">Process</a></li>

</ul>

</div>

</body>

</html>

邁登購原文轉載