其實這份說明應歸類到 CSS 類,不過我打算以三篇篇幅來說明分頁設計例,將會運用到 CSS/Javascript,甚至是 IFRAME 和 AJAX,想來想去,還是歸到網頁設計類別中好了。
首先,分頁的 CSS 基本是由 CSS Tab Designer 這套免費軟體產生的,各位可以自行下載最新版本。可以製作出各式各樣直式或橫式的分頁樣式,如:
不同樣式,產生出來的 CSS 檔案略有不同,這留給網友們自己去研究這支程式,這裡,已經提供了現成我改好的 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