以下為本站文章分類清單

  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'

以下為文章回應區

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

Lelio Vieira Carneiro Junior   2017/11/10 上午 07:52:00

What's up Dear, are you in fact visiting this web site regularly, if so then you will
definitely take nice experience.

see this page   2017/10/14 下午 03:58:00

Its like you read my mind! You seem to know so
much about this, like you wrote the book in it or something.
I think that you can do with a few pics to drive the message
home a bit, but instead of that, this is wonderful blog.

An excellent read. I'll certainly be back.

Moved Here   2017/10/12 上午 05:05:00

Hi, Neat post. There's an issue with your website in internet explorer, would check this?
IE nonetheless is the marketplace leader and a huge component of folks will omit your great writing because of this
problem.

How much does it cost to lengthen your legs?   2017/10/10 上午 09:52:00

Hi there, for all time i used to check website posts here early in the break of day, since i like to find out more and more.

How can you heal an Achilles tendonitis fast?   2017/9/26 下午 10:19:00

I love your blog.. very nice colors & theme.
Did you design this website yourself or did you hire someone to do it for you?
Plz reply as I'm looking to create my own blog and would like to
know where u got this from. thank you

What do you do when your Achilles tendon hurts?   2017/9/24 下午 03:10:00

excellent points altogether, you simply received a logo new reader.
What would you recommend about your publish that you made some days ago?
Any sure?

   2017/9/1 上午 05:10:00

I am really thankful to the holder of this site who has shared this fantastic post at at this place.

How do you prevent Achilles tendonitis?   2017/9/1 上午 05:03:00

Way cool! Some extremely valid points! I appreciate you writing this article and
also the rest of the website is also really good.

How do you get taller?   2017/9/1 上午 12:32:00

Do you have a spam issue on this blog; I also am a blogger, and I
was curious about your situation; we have created
some nice procedures and we are looking to exchange strategies with other folks, why not shoot me an email
if interested.

Where are the femur tibia and fibula?   2017/8/31 下午 11:36:00

Hello! Do you know if they make any plugins to protect against hackers?
I'm kinda paranoid about losing everything I've worked hard on. Any tips?

What causes pain in the back of the heel?   2017/8/31 上午 08:16:00

Somebody essentially help to make seriously posts I'd state.
That is the very first time I frequented your web page and so far?
I amazed with the analysis you made to create this particular put
up incredible. Magnificent task!

How do you get Achilles tendonitis?   2017/8/31 上午 07:35:00

I do not even understand how I finished up right here, but I believed this post used to
be good. I do not realize who you are however certainly you're going to a famous blogger in the event you
aren't already. Cheers!

Can you have an operation to make you taller?   2017/8/31 上午 05:45:00

Thanks on your marvelous posting! I genuinely enjoyed reading it,
you can be a great author. I will be sure to bookmark
your blog and may come back down the road. I want to encourage you to continue your
great work, have a nice day!

What makes you grow taller during puberty?   2017/8/21 下午 04:48:00

Pretty! This has been an extremely wonderful post.
Many thanks for supplying these details.

emileeberg.blog.fc2.com   2017/8/12 上午 08:03:00

Link exchange is nothing else except it is simply placing the other person's webpage link on your page at proper place and other person will also do similar in favor of
you.

How do you get taller?   2017/8/4 下午 01:52:00

We are a bunch of volunteers and starting a new scheme in our community.
Your web site provided us with useful information to work on. You've performed an impressive process and our entire community might
be thankful to you.

What causes burning pain in Achilles tendon?   2017/7/31 上午 11:38:00

Right now it sounds like Movable Type is the best blogging platform
out there right now. (from what I've read) Is that what you are
using on your blog?

http://tabithadargie.weebly.com/blog   2017/7/31 上午 03:24:00

When I originally commented I clicked the "Notify me when new comments are added" checkbox
and now each time a comment is added I get several e-mails with the
same comment. Is there any way you can remove
me from that service? Bless you!

How do you prevent Achilles tendonitis?   2017/7/28 上午 11:23:00

My brother suggested I might like this website.
He was totally right. This post truly made my day.
You cann't imagine just how much time I had spent for this information! Thanks!

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

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