【卜維丰】分頁設計(1)-CSS組成

分頁設計(1)-CSS組成

其實這份說明應歸類到 CSS 類，不過我打算以三篇篇幅來說明分頁設計例，將會運用到 CSS/Javascript，甚至是 IFRAME 和 AJAX，想來想去，還是歸到網頁設計類別中好了。

首先，分頁的 CSS 基本是由 CSS Tab Designer 這套免費軟體產生的，各位可以自行下載最新版本。可以製作出各式各樣直式或橫式的分頁樣式，如：

CSSTabDesiigner
CSSTabDesigner

不同樣式，產生出來的 CSS 檔案略有不同，這留給網友們自己去研究這支程式，這裡，已經提供了現成我改好的 CSS 樣式，效果如：

使用方法：

按這裡下載 CSS 樣式及相關圖檔 menuTab.zip (5K) 。
menuTab.zip 中共有四個檔案，分別是 menuTab.css、tabBG.gif、tableftF.gif、tabrightF.gif。將這四個檔案存放在同目錄下。
將 CSS 連結到頁面中，如：

<style type="text/css">
@import url(menuTab.css);
</style>

在頁中面中加上以下格式內容：

<div id="tabsF">
<ul>
<li id="current"><a href="#"><span>Link 1</span></a></li>
<li><a href="#/"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
</ul>
</div>
<div id="tabsC">
分頁內容寫在這裡
</div>

架構說明一下，這份 CSS 我修改過，所以格式上，以 tabsF 區塊作為分頁，內容為清單，紅字 id="current" 表示目前作用中的分頁，其後<a>和<span>都是不可缺少的標籤。

tabsC 區塊中放的就是分頁內容了。

這個例子，是單一一頁的分頁設計，也就是透過超連結，換到另一頁，例如 Link 2 這頁，然後，在 Link 2 這頁，你必需把 id="current" 改到第二個連結。

好，這個就是可用又陽春的分頁設計了，下一篇，再介紹如何不換頁，就有分頁效果。

卜維丰 12/3 07'

同意轉載，不過麻煩看一下轉載需知

阿宏 2010/1/12 下午 09:12:00

老師你好:
我有一個問題想請教,關於http://audi.tw/Blog/webDesign/tab.design.1.asp這篇文章說的,使用方法3跟4,老師意思是指我要針對menuTab.css裡面如老師方法修改嗎?還是我要新增一個css檔作修改,或是其他方法....
不好意思,對這兩句話有點不太懂老師的意思,方法3跟4
再請老師教導一下,謝謝
我的信箱: zh2174@yahoo.com.tw

小珠 2009/2/16 上午 11:47:00

老師您好，我想請問一個問題，我有個dataTable，裡面有個欄位叫做isGroup，如果isGroup = fale，我的dataTable的row就要執行margin-left:100px的動作，請問要如何用程式控制呢？

謝謝

小珠
mail: joanhuang.seba@gmail.com

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本頁本文內容

分頁設計(1)-CSS組成

以下為文章回應區