Google +    Album

= 建立網頁TABS =

在一個頁面上,要同時呈現分頁的方式,
又不太想寫一堆程式...
其實只是將超連結做成一排的分頁,
但看到奇摩首頁用起來感覺還不錯
筆者能想到最簡單的方式就是用css來解決!

PS:第一段html需要在每個頁面都來上一段

首先在網頁部份
在適當的地方放上以下的html

<h2>(用它將以下包起來)
<ul class="tabs primary">(欲給予的名稱)
<li class="active">(一開始就啟用的項目)
<a class="active" href="第一個超連結">第一個超連結所呈現的名稱</a>(第一個連結)
</li>
<li>
<a href="第二個超連結">第二個超連結所呈現的名稱</a>(第二個連結,依此類推)
</li>
</h2>(用它將以上包起來)

接下來將以下CSS部分存起來...
當然啦,名稱要和以上html相對應唷!

ul.primary li a:hover {
background-color:#EEEEEE;
border-color:#CCCCCC rgb(204, 204, 204) rgb(238, 238, 238);
}

ul.primary li a {
border-style:solid solid none;
border-width:1px;
height:auto;
margin-right:0.5em;
padding:0pt 1em;
text-decoration:none;
}

ul.primary li.active a {
background-color:#FFFFFF;
border-color:#BBBBBB rgb(187, 187, 187) rgb(255, 255, 255);
border-style:solid;
border-width:1px;
}

ul.primary {
border-bottom:1px solid #BBBBBB;
border-collapse:collapse;
height:auto;
line-height:normal;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:5px;
padding:0pt 0pt 0pt 1em;
white-space:nowrap;
}

ul.primary li {
display:inline;
}

.primary a {
font-size:12px;
padding:0em 0.5em 0em 0em;
}

a:visited {
color:#792120;
}

a, a:link, a:active {
font-weight:bold;
}

li {
padding-bottom:0.3em;
}

li a.active {
color:#000000;
}

就這樣...
長的就是這樣

其實是很簡單又難看...(不過我一向喜歡簡單)

沒有留言: