demoshop

demo, trying to be the best_

官方網站
http://www.highdots.com/

經由免費的 CSS Tab Designer 可以讓我們就能很輕鬆容易地建立一個「殺手級」的 CSS 網頁選單。用 CSS 建立網頁選單除了可以很美觀之外,利用 CSS 美化我們的選單,除了網頁大小得以減少之外,在日後的維護也會更加的方便容易,但使用 CSS 控制網頁選單,可能需要花點時間才能將選單控制得如我們心裡所預期,但經由 CSS Tab Designer 讓這一切變得再輕鬆不過了,只要我們先將選單項目文字列出來,再選擇一個我們喜歡的內建樣式,我們就可以馬上能看到我們的成果,並且可以將其中的 CSS 及 HTML 部份複製起來,或是將成果直接輸出成網頁檔。且其輸語法更是符合 XHTML 1.0 Transitional 或是 XHTML 1.0 Strict。

建議此文觀看者必須要有基本的HTML和CSS的能力,因為demo省略很多不是本文的重點,如果你對HTML和CSS完全不懂,你也一定看不懂此文。

 

下載CSS Tab Designer安裝程式開啟它


當你選定好了你要得頁籤後,按下Generate HTML會在你選擇的目錄底下跑出至少三個檔案,將圖檔複製到你的網頁目錄下,然後將HTML檔案開啟


複製<style type="text/css">到</style>中間的語法貼到aspx網頁中</head>標籤上方


然後再將以下區塊內的HTML語法複製下來


貼上vs內吧


馬上來預覽一下,恩很正常

不過看一下HTML這是寫死的用法,不太可能運用在我們的動態頁面上所以demo的第一個想法就是把文字改成LinkButton


但是預覽後卻變成這樣

 

再經過了一段修改CSS與原始碼比對後demo才想到了一個超簡單的解決方式,就是將<span>移到LinkButton文字前,這樣子就完全不需改變程式產生的CSS檔非常的好用。


看清楚阿,第一個頁籤已經改成LinkButton了,這樣子我們可以很快速的製作出美觀又實用的TAB,而且內建的樣板相當多絕對是你想製作頁籤功能的第一選擇阿!!

回應討論