ColorPicker色盤套件是個讓在Sublime Text下寫CSS時，可以快速的開起選色盤選色的外掛，是個幫助您更有工作效率的好工具，但不知為什麼安裝ColorPicker後發生沒辦法使用的情況！

這邊主要發生的原因在快捷鍵發生衝突convertToUTF8與ColorPicker，使得按下相同的ctrl+shift+c，ColorPicker沒有反應，convertoUTF8的預設值GBK的快捷鍵也是ctrl+shift+c。

主要解決方法是修改了不常用convertToUTF8 GBK的快捷鍵，因為它可以直接使用選單選擇也可以。

在網頁上崁入YouTube iframe視頻時遇到了一個小問題，我需要在YouTube視頻大小取決於100%自動縮放，好使得我的網頁RWD設計能完整呈現。但是當我加入了嵌入代碼，視頻有一個固定的高度和寬度，你可能會認為設定CSS iframe width:100％寬度，視頻就會依照這樣設定，自動向周圍的容器調整，這好了！事實並非如此，寬度是可以100%自動縮放，但是高度就是沒辦法自動100%縮放。

Google Code Prettify 顯示程式碼最簡單方法

google推出的google code prettify，可用很簡單的方式讓程式碼自動分辨顏色，而且可自行調整自由度很高!

看一個範例

設定

最快的方式是使用下列CDN方式。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

調整大小Google noCAPTCHA reCAPTCHA

無論嘗試使用CSS還是CSS和javascript，似乎都無法改變驗證碼的外觀，原因它使用的是<iframe>嵌入你的網頁上。相對要去更改由Google外部加載的javascript和css文件生成的內容，事情將變得複雜。

CSS ::selection

網站當滑鼠反白時，反白區域的底色通常是藍色，但其實可以透過CSS ::selection選擇元素做背景色和字體顏色樣式的修改，設計此元素非常適合將用戶選擇的文本與您的網站配色方案進行匹配。

p::-moz-selection { 
    color: red;
}
p::selection { 
    color: red; 
}

如上所示，您可以::selection對單個元素進行樣式設置。
IE9+、Opera、Google Chrome 以及Safari 中支持::selection 選擇器。
Firefox 支持替代的::-moz-selection。

Table RWD Css-Trick 提供了四種響應式網頁的解決方案，分為：擠壓（Squish）、捲動（Scroll）、摺疊橫列（Collapse Rows）、摺疊直行（Collapse Columns），以下簡單實作各種方式CSS方法。

手機眾多裝置的螢幕顯示大小不同，會因為排版時區塊及圖片可用百分比達到顯示等比縮放，但唯獨文字沒辦法設定依照顯示的百分比去做縮放。

就因為這樣設計排版上，主要視覺區塊內的文字，大小設計剛好在區塊內，以不同顯示比例去看，區塊及圖片會因為設定成百分比而依照螢幕大小縮放，但文字確保持在您設定的大小，這就會產生區塊有自動縮放大小，文字卻沒有自動縮放大小，使得你設計的版面跑位或不是你所要呈現的設計樣子。

Font Awesome 的設計只需要簡單的應用Html語法，就可輕鬆在網頁加入ICON圖示。

過去網頁設計師，需要為了網頁的小圖示，需要親手設計ICON，更或者需要在網路搜尋找尋適用的ICON，總是為了這小ICON傷腦經，現在Font Awesome將提供我們，無數的ICON圖示給我們運用，而且簡單輕鬆添加在你的網頁上。

您可以將Font Awesome圖標使用在幾乎任何地方，只需要使用HTML class加入fa，空格後面再加上想要加上圖示名稱 。(圖示名稱可在Font Awesome官網搜尋到)

Animate.css是個動畫CSS library，不過主要是專注在處理動畫的部分，並不負責在網頁上該什麼時機呈現動畫，加上WOW.js，如捲軸頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。如果你希望你的頁面也更加有趣，那麼你可以試試WOW.js。

WOW.js依賴animate.css，所以它支持animate.css多達60多種的動畫效果，能滿足您的各種需求。

瀏覽器兼容

IE6、IE7 等老舊瀏覽器不支持CSS3 動畫，所以沒有效果；而wow.js 也使用了querySelectorAll 方法，IE 低版本會報錯。為了達到更好的兼容，最好加一個瀏覽器及版本判斷。

開始使用WOW.js

引入文件

css

<link rel="stylesheet" href="/css/animate.min.css">

js

<script src="/dist/wow.js"></script>