前端開發必備實用網站

身為前端人員，你常去的網站有哪些么？有什麼好的推薦可以底下留言…

圖標類網站

這是阿里巴巴旗下的圖標庫網站，直接搜索關鍵詞就可以找到大批的圖標。下載圖標的時候我們還可以選擇顏色、大小、格式，根據自己的需要下載就好了。現在提供了多色圖標庫，可以下載svg、ai、png格式類型。

阿里巴巴矢量圖標庫

奧森圖標：https://www.thinkcmf.com/font/

奧森圖標（Font Awesome）提供豐富的矢量字體圖標—通過CSS可以任意控制所有圖標的大小 ，顏色，陰影。

奧森圖標

配色類網站

Color Hunt：https://colorhunt.co/

這個網站給我們提供了很多的配色方案，我們直接使用就OK了。使用方法也很簡單，滑鼠移動到對應的顏色上，我們就可以看到顏色的十六進位碼，複製這個顏色到工具里就可以使用了。

Color Hunt

Itmeo：https://webgradients.com/

180種漸變方案供你選擇，還可以直接複製CSS樣式應用到網頁中，亦也可以下載png

Itmeo

Adobe Color CC：https://color.adobe.com/zh/

Adobe公司的，他提供了多種配色方案。我們點擊圓盤中間的點，就可以調整出我們想要的配色方案。提供rgb色及十六進位色值

Adobe Color CC

配色網：http://www.peise.net/tools/web/

提供了單色搭配、互補色搭配、三角形搭配、矩形搭配、類似色搭配、類似搭配互補色六類配色方案。

配色網

WEB安全色：http://www.bootcss.com/p/websafecolors/

這個網站是為WEB設計，開發中經常用到的安全色。網站內列出了顏色的十六進位碼和RGB碼，複製粘貼就可以了。

WEB安全色

色值轉換工具：http://www.sioe.cn/yingyong/yanse-rgb-16/

這是一個在線RGB和十六進位顏色碼轉換工具。在對應的位置填入十六進位代碼，點擊轉換，我們就可以獲取到RGB顏色的代碼了。

色值轉換工具

工具類網站

Codepen：https://codepen.io/

可在線編輯的demo網站，在這裡可以找到很多好玩的例子，CSS支持LESS、SCSS、 Sass等預處理器、JS也支持TypeScript、Bable等預處理器，功能相比國內類似的網站齊全。唯一的不足就是打開速度慢…

Codepen

loading：https://loading.io/

很多好玩有趣的loadding效果，可以直接下載就用，就是有些效果下載源碼是要票票的，但可以F12然後你懂得~~

loading

在線使實用工具：http://tool.lu/

一個在線工具網站，包含大量在線工具

在線工具

圖片壓縮：https://tinypng.com/

圖片壓縮工具壓縮比還是很高的，對比其他網站的壓縮質量，覺得這個算是比較高的了。可以使用 一鍵壓縮所有路徑中的所有圖片。在線的壓縮也可以批量上傳，體驗也還是不錯的。

tinypng

包含各類前端常用的技術文檔，工具、博客文章之類的…

Web前端開發

兼容性查詢：https://caniuse.com/

查詢使用的css、js語法的兼容性情況

兼容性查詢

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！