CSS – 進度條動畫設計

動畫部分建議使用 CSS 的效果會比較優異喔,以下實作範例給大家看。

HTML

jQuery

Style

將進度條的寬度設定為 0% ,然後總寬度的 100% 取決於上一層 DIV 的寬度。進度條的 100% 寬度會等於上一層 DIV 寬度的 50%。進度條的進度,交由 JS 賦予。

scss

compile 出來的 css

 

 

 

CSS – 使用 Google Fonts 的思源體的超簡單用法

在 head 中加入外部引用 CSS,並指定 font-family。

可以參考 Google 官方說明

我們可以看看線上範例:

JavaScript – 利用 Prism 高亮 (syntax highlighting) 你的程式碼

Prism 這款高亮程式碼的套件非常簡單,我也是找很久才找到這款幾乎符合我想要的視覺跟簡便。所以推薦大家這款工具,可以自行架在自己的網站。網友寫得很好,安裝方式 可以參考他的部落格,Prism 套件可以在官網下載

使用方式

下載後,在 <head> 中添加

然後這麼寫

  • 使用 <pre> 包圍
  • 裡面用 <code> 包圍程式碼
  • class 設定語言,如 JavaScript 就寫 language-javascript ,如 PHP 就寫 language-php
  • class 可以接著拼湊你要加裝的 plugin 名稱,例如 line-numbers 就是行數的功能。plugin 可以參考官方

如果你的程式碼中包含 <> 或其他特殊符號,可使用 HTML Encoder 進行轉碼後再貼上。例如你的 伺服器是PHP,那麼要上色的 PHP 程式碼就必須這麼做喔

php – PDO – 有趣的 PDO::FETCH_CLASS 用法

PDO 的 PDO::FETCH_CLASS 用法,可以讓你指定對應的 Class 類別,然後自由處理你的方法。我們來看這個例子就懂了

 

PHP – 下載檔案,不用先存檔的方式

這如我產生 CSV 檔案但不要存到伺服器空間,而是讓使用者直接下載,可以這麼寫