以下為本站文章分類清單

  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'

以下為文章回應區

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

What is the Ilizarov method?   2017/7/21 上午 06:25:00

We absolutely love your blog and find the majority of
your post's to be exactly what I'm looking for. Would you offer guest
writers to write content for you? I wouldn't mind
creating a post or elaborating on some of the subjects you write concerning here.

Again, awesome website!

foot pain from sciatica   2017/7/3 下午 12:22:00

Hey there, You've performed an incredible job. I will definitely
digg it and personally recommend to my friends. I'm sure they'll
be benefited from this site.

foot pain from bunion   2017/7/3 上午 09:45:00

Hi there i am kavin, its my first occasion to commenting
anyplace, when i read this paragraph i thought i could also make comment due to this good
piece of writing.

manicure   2017/5/4 上午 04:15:00

It is the best time to make a few plans for the long run and it is time to
be happy. I've learn this submit and if I may just I wish to counsel you some fascinating
issues or advice. Perhaps you can write subsequent articles regarding this article.
I desire to read more things approximately it!

manicure   2017/5/4 上午 04:15:00

Wow, fantastic blog layout! How long have you been blogging for?
you make blogging look easy. The overall look of your website
is magnificent, let alone the content!

manicure   2017/5/4 上午 04:15:00

Hey there! This post couldn't be written any better!
Reading this post reminds me of my good old room mate!
He always kept chatting about this. I will forward this article to him.
Fairly certain he will have a good read. Thank you for sharing!

manicure   2017/5/4 上午 04:12:00

Generally I do not learn article on blogs, however I would like to say that this write-up
very pressured me to try and do so! Your writing taste has been amazed me.
Thank you, very great post.

manicure   2017/4/11 下午 06:47:00

I've been exploring for a little bit for any
high quality articles or weblog posts in this kind of space .
Exploring in Yahoo I ultimately stumbled upon this site.
Studying this info So i am happy to convey that I have
a very good uncanny feeling I found out
exactly what I needed. I such a lot certainly will make certain to don?t overlook this website and provides it a glance regularly.

阿宏   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

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