sass – scss – 管理複雜的 z-index 方法

當圖層一多起來,要管理 z-index 是很麻煩的一件事。但是可以透過這個方法來管理:

依照 z-index 的大小做順序排列

 

然後利用 SASS 的 index() 方法來自動取得 z-index

 

php – Codeigniter – Query Builder Class 快速檢視表

欄位

$this->db->get()
$this->db->get_compiled_select()
$this->db->get_where()

$this->db->select()
$this->db->select_max()
$this->db->select_min()
$this->db->select_avg()
$this->db->select_sum()

從哪個資料表

$this->db->from()
$this->db->join()

條件

$this->db->where()
$this->db->or_where()
$this->db->where_in()
$this->db->or_where_in()
$this->db->where_not_in()
$this->db->or_where_not_in()

$this->db->like()
$this->db->or_like()
$this->db->not_like()
$this->db->or_not_like()

$this->db->group_by()

$this->db->distinct()

$this->db->having()
$this->db->or_having()
$this->db->order_by()

數量

$this->db->limit()
$this->db->count_all_results()
$this->db->count_all()

分組

$this->db->group_start()
$this->db->or_group_start()
$this->db->not_group_start()
$this->db->or_not_group_start()
$this->db->group_end()

新增

$this->db->insert()
$this->db->get_compiled_insert()
$this->db->insert_batch()

修改

$this->db->replace()
$this->db->set()
$this->db->update()

$this->db->update_batch()
$this->db->get_compiled_update()

刪除

$this->db->delete()
$this->db->empty_table()
$this->db->truncate()
$this->db->get_compiled_delete()

緩存

$this->db->start_cache()
$this->db->stop_cache()
$this->db->flush_cache()

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) 你的程式碼

%e6%93%b7%e5%8f%96

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

使用方式

下載後,在 <head> 中添加

然後這麼寫

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

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