以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

分頁設計(1)-CSS組成

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

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

CSSTabDesiigner
CSSTabDesigner

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

 

使用方法:

  1. 按這裡下載 CSS 樣式及相關圖檔 menuTab.zip (5K)
  2. menuTab.zip 中共有四個檔案,分別是 menuTab.css、tabBG.gif、tableftF.gif、tabrightF.gif。 將這四個檔案存放在同目錄下。
  3. 將 CSS 連結到頁面中,如:
    <style type="text/css">
    @import url(menuTab.css);
    </style>
  4. 在頁中面中加上以下格式內容:
    <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

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