css实现Tab标签效果 >> 幽幽天空设计欣赏网页设计原创作品

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<LINK href="tab_test.css" type="text/css" rel="stylesheet">
</head>

<body>
aaa<br>
<div align="left" class="greynavbar">
<UL id="foldertab">
<LI><A class="current" href="#">Pages</A>
<LI><A href="#">Labels</A>
<LI><A href="#">Attachments</A>
<LI><A href="#">Mail</A>
<LI><A href="#">News</A>
<LI><A href="#">Templates</A>
<LI><A href="#">Advanced</A>
</UL>
</div>
asdfasdf
</body>
</html>

#foldertab {
    PADDING-RIGHT: 0px; PADDING-LEFT: 8px; PADDING-BOTTOM: 3px; FONT: bold 11px Verdana, sans-serif; MARGIN-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #3c78b5 1px solid
}
#foldertab LI {
    DISPLAY: inline; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#foldertab LI A {
    BORDER-RIGHT: #3c78b5 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #3c78b5 1px solid; PADDING-LEFT: 0.5em; BACKGROUND: #3c78b5; PADDING-BOTTOM: 3px; MARGIN-LEFT: 3px; BORDER-LEFT: #3c78b5 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #3c78b5 1px; TEXT-DECORATION: none
}
/* 连接文字颜色 */
#foldertab LI A:link {
    COLOR: #ffffff
}
#foldertab LI A:visited {
    COLOR: #ffffff
}
/* 连接鼠标移上后的效果 */
#foldertab LI A:hover {
    BORDER-LEFT-COLOR: #003366; BACKGROUND: #003366; BORDER-BOTTOM-COLOR: #003366; COLOR: #ffffff; BORDER-TOP-COLOR: #003366; BORDER-RIGHT-COLOR: #003366
}
#foldertab LI A.current {
    BACKGROUND: white; COLOR: black; BORDER-BOTTOM: white 1px solid
}
#foldertab LI A.current:link {
    COLOR: black
}
#foldertab LI A.current:visited {
    COLOR: black
}
#foldertab LI A.current:hover {
    BACKGROUND: white; COLOR: black; BORDER-BOTTOM: white 1px solid
}

.greynavbar {
BORDER-TOP: #3c78b5 1px solid; MARGIN-TOP: 2px; BACKGROUND-COLOR: #ffffff
}

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}