i2Style 網站 CSS 標籤、按鈕製作工具

作者:

想自己做網站、希望能放上一些比較特別的按鈕樣式,可自己不懂 CSS、又不想用圖檔的方式呈現,那該怎麼做比較快呢?

剛剛看到一個很特別的網站 Free Online CSS3 Typeset Style Generator,它的功能主要是給不懂 CSS 的人用很簡單的網頁操作方式,一步一步選擇、製作出自己想要的簡單的網頁按鈕樣式。除了有各種不同的按鈕樣式可選擇之外,還可自行設定背景/文字顏色、字體大小、字型、文字陰影、按鈕陰影、邊框與圓角...等等不同設計。做好之後,再把它貼到網站上指定的位置即可。

對於不熟悉 CSS 的人來說,應該會是個很方便的小工具。


  • 網站名稱:i2Style – Free Online CSS3 Typeset Style Generator
  • 網站網址:http://www.sciweavers.org/i2style
  • 使用方法:

    第1步  開啟 i2style 網站之後,我們可以先在「Text」方框中輸入按鈕中的文字,中英文皆可。接著在下方點選你喜歡的按鈕樣式,最後再按一下「Next」按鈕繼續下一步。

    01  

     

    第2步  切換到「Background」設定頁面時,我們可以自行輸入按鈕背景顏色,或者從下面預覽選單中點選你喜歡的顏色,然後再按一下「Next」按鈕繼續下一步。其他設定頁面與功能都是一樣的做方法。

    02  

     

    第3步  其中有一個「Text Shadow」可以讓我們設定按鈕中文字的陰影,可依照你的喜好與需求設定陰影的位置、顏色與濃淡...等特性。

    03  

     

    第4步  「Corners」頁面則可設定按鈕的「圓角」屬性,看你希望有怎樣的圓角設計,都可以在頁面中調整不同選項中的數字來做些變化。

    全部設定好之後,可以按一下「Next」或直接按「CSS」分頁取得網頁按鈕的程式碼。

    04  

     

    第5步  在「CSS」分頁中,我們可以直接取得剛剛修改過的按鈕樣式的最新程式碼,可以直接將「CSS Code」貼到你的 style 檔案,編寫網頁時直接調用此屬性即可。

    如果不知道怎弄的話,也可直接取用「HTML Code」方框中的程式碼,直接把按鈕樣式都寫在 HTML 裡,一樣可以用。

    05



    无觅相关文章插件,快速提升流量

    非經授權,請勿全文轉載,本文網址:
    → 免費訂閱最新文章:  (如何訂閱?)
    作者: | 發佈日期: |
    注意事項:本站所介紹之軟體、設定或網站服務,經實際安裝測試並通過防毒軟體掃毒。但因為不同電腦環境與軟體設定可能都各有差異,建議您僅在非工作用的電腦安裝、測試,避免因為不可預知的錯誤、當機或軟硬體衝突,影響您的工作或電腦運作。另外,在進行任何重要的操作與設定之前,記得先行備份電腦中的重要資料,避免因為未依指示的不當操作或其他疏失造成資料毀損。當您依照本文所提供之訊息執行各種操作,表示您已閱讀此注意事項並同意自行承擔可能之風險與責任。

     

    歡迎留下你的想法或意見...

    1. DVDsoft 說道:

      这个太棒了,非常感谢!

    2. see7di 說道:

      我通常手寫css,所以這個軟體對我來說沒存在的意義.

    3. Loading... 說道:

      哇!看起來還不錯!快來試試看~
      感謝分享^_^

    4. AYO 阿佑 說道:

      這其實挺方便的,
      如果對自己做的網站 色系 等等很挑剔,
      可以使用這方式好好的來挑

      以上 AYO 阿佑

    5. 網賺達人 說道:

      水喔感謝分享 有支援中文的~

      以前下載國外的軟體但中文都亂碼

    6. 阿索 說道:

      喔喔 又多了一種選擇,真不錯!

    7. Johnny.Net 說道:

      我自己寫了一個專門製作按鈕圖片的程式, 雖然是用 table 組版的, 不過會幫你把 HTML 自動產生出來, 可以參考看看: Johnny’s ButtonGen – 專供網頁設計人員使用的按鈕設計小工具 (http://www.dotblogs.com.tw/johnny/archive/2011/01/05/buttongen.aspx)

    發表迴響

    你的電子郵件位址並不會被公開。

    你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

     

    隨機文章

     

    本站全部文章分類

    PC 個人電腦、Windows 作業系統
    Chrome,Firefox,Opera,IE Email 郵件收發、收信軟體 MSN、Yahoo! 即時通訊
    Windows 系統設定、功能調整 下載/上傳工具、P2P、FTP 好玩遊戲、休閒益智
    影視編輯、轉檔、影音播放 文書編輯、PDF、Office、字典 桌面美化、介面最佳化
    檔案管理、壓縮、備份還原 燒錄軟體、光碟燒錄 看圖軟體、繪圖、相片處理
    系統維護、設定工具 網路工具、遠端遙控 防毒軟體、防火牆、病毒檢測
    音樂編輯、轉檔、播放軟體 好用軟體-未分類
    iPad, iPhone 手機、平板電腦
    iOS 好玩遊戲、休閒益智 iOS 影視播放、影音編輯轉檔 iOS 拍照攝影特效、繪圖工具
    iOS 文書處理、辦公室應用 iOS 桌布美化、系統增強工具 iOS 系統設定、功能調整
    iOS 網路瀏覽、其他工具 iOS 美食旅遊、地圖服務 iOS 購物理財、生活應用
    iOS 通訊、聊天、社交服務 iOS 音樂播放、音樂編輯轉檔 iPhone、iPad -未分類
    Android 手機、平板電腦
      Android 好玩遊戲、休閒益智 Android 影音播放、影視編輯 Android 拍照攝影特效、繪圖
    Android 文書處理、編輯應用 Android 桌布美化、系統增強 Android 系統設定、功能調整
    Android 網路瀏覽、其他工具 Android 美食旅遊、地圖服務 Android 購物理財、生活應用
    Android 通訊、聊天社交服務 Android 音樂播放、編輯轉檔 Android 未分類
    免費空間、線上工具、社交網站
    Facebook 臉書 Google Plus, Google+ Google 與其他 Google 應用
    Plurk 噗浪 Twitter 微網誌 YouTube
    網路空間、服務與實用工具
    網站架設、網頁編輯、伺服器
    Blog 部落格 WordPress 網站架設 網頁編修、網站架設
    虛擬主機, VPS, 伺服器租用
    硬體3C 其他、不分類
    Apple 蘋果電腦 Mac OS X 作業系統
    Mac OS X 系統設定、調整 Mac 下載工具、P2P、FTP Mac 好玩遊戲、休閒益智
    Mac 影視編輯、轉檔播放軟體 Mac 文書編輯、PDF、字典 Mac 桌面美化、介面最佳化
    Mac 檔案管理、壓縮備份還原 Mac 燒錄軟體、光碟燒錄 Mac 看圖軟體、轉檔繪圖美化
    Mac 系統維護、設定工具 Mac 網路工具、郵件即時通訊 Mac 防毒、防火牆、病毒檢測
    Mac 音樂編輯、轉檔播放軟體 Mac蘋果電腦-未分類