看到JQuery的頁籤(tab)實際上是以<UL><LI>標籤搭配css作出來，摸索了一下，還蠻容易的。以下為範例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
nav ul {
text-align:left;
display:inline-table;
list-style-type:none; /*取消li前面的圓黑點*/
padding:0px; /*讓整個導航欄向左靠攏*/
}
nav li{
float:left; /*以float讓li tag向左浮動*/
padding:3px;
}
nav li a {
font-size: large;
color: #000000;
text-decoration:none;
}
nav li a:hover {
border-bottom: 2px solid #94c9d4;/*滑鼠移動到li時，li-bottom的樣式*/
background-color: #e7f5f8;
text-decoration: none;/*取消a tag的底線*/
}
/*設定li中的ul*/
nav li ul{
display:none;
position:absolute;
}
nav li:hover ul{
display:block;
}
nav li li {
display:block;
float:none;
}
nav li li a:hover {
border-bottom:none;
border-left: 4px solid #94c9d4;
background-color: #e7f5f8;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>導航欄測試</h1>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a>
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
</ul>
</li>
<li><a href="#">公司歷史</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
<nav>
<article>測試文字</article>
</body>
</html>
蠻容易的，各位可以試試。
留言列表
前端網頁相關技術 (5)
