描述css選擇器，如何選擇優(yōu)秀的web開發(fā)工具？

Web開發(fā)工具其實(shí)非常多，優(yōu)秀的也不少，下面我簡(jiǎn)單介紹5個(gè)不錯(cuò)的Web開發(fā)工具，感興趣的朋友可以自己嘗試一下：

Visual Studio Code

也就是VS Code，微軟開發(fā)的一個(gè)免費(fèi)、開源、跨平臺(tái)的代碼編輯器，輕巧靈活，運(yùn)行速度快，占用內(nèi)存少，在Web開發(fā)中經(jīng)常會(huì)用到，使用的個(gè)人和公司也非常多，支持常見的自動(dòng)補(bǔ)全、代碼高亮、語(yǔ)法提示、Git等功能，插件擴(kuò)展非常豐富，生態(tài)環(huán)境良好，對(duì)于Web開發(fā)來(lái)說，是一個(gè)非常不錯(cuò)的選擇：

Sublime Text

這也是一個(gè)非常不錯(cuò)的代碼編輯器，在Web開發(fā)中也經(jīng)常會(huì)用到，可以跨平臺(tái)使用，原則上是不免費(fèi)的，網(wǎng)上有相關(guān)版本注冊(cè)碼，所以在使用上影響不大，基本功能和前面的VS Code差不多，輕便靈活，文本編輯功能強(qiáng)大，支持語(yǔ)言眾多，智能補(bǔ)全、語(yǔ)法提示、代碼高亮等功能也都不錯(cuò)，插件擴(kuò)展也行，對(duì)于Web開發(fā)來(lái)說，也是一個(gè)非常不錯(cuò)的工具：

Atom

這也是一個(gè)免費(fèi)、開源、跨平臺(tái)的代碼編輯器，由GitHub設(shè)計(jì)研發(fā)，基于Electron技術(shù)，基本功能和前面兩個(gè)軟件差不多，代碼高亮、語(yǔ)法提示、自動(dòng)補(bǔ)全、Git等功能都能很好支持，插件擴(kuò)展也非常豐富，唯一不足就是啟動(dòng)速度慢，偶爾還會(huì)出現(xiàn)內(nèi)存占用率高的問題，但對(duì)于Web開發(fā)來(lái)說，也是一個(gè)不錯(cuò)的選擇：

HBuilder

這是一個(gè)專門用于Web開發(fā)的國(guó)產(chǎn)工具，輕巧、極速、界面柔綠，目前支持來(lái)說，只支持Windows和Mac系統(tǒng)，語(yǔ)法提示、自動(dòng)補(bǔ)全、Markdown等功能都非常不錯(cuò)，還提供云打包功能，可以直接將我們開發(fā)的網(wǎng)頁(yè)打包為手機(jī)APP（安卓、蘋果等），使用起來(lái)非常方便，對(duì)于Web開發(fā)來(lái)說，也是一個(gè)非常不錯(cuò)的選擇：

WebStorm

這是一個(gè)重量級(jí)的Web開發(fā)工具，非常專業(yè)，Jetbrains公司的產(chǎn)品，在團(tuán)隊(duì)協(xié)作的大型項(xiàng)目開發(fā)中經(jīng)常會(huì)用到，語(yǔ)法檢查、自動(dòng)補(bǔ)全、代碼高亮、Git等功能都非常不錯(cuò)，插件擴(kuò)展也非常豐富，除此之外，還支持代碼重構(gòu)、單元測(cè)試、代碼檢測(cè)和快速修復(fù)等功能，對(duì)于Web開發(fā)來(lái)說，是一個(gè)非常不錯(cuò)的工具：

目前，就分享這5個(gè)不錯(cuò)的Web開發(fā)工具吧，對(duì)于日常Web開發(fā)來(lái)說，完全夠用了，當(dāng)然，還有許多其他的Web開發(fā)工具，像Notepad++，DW，IDEA等也都不錯(cuò)，選擇適合自己的一款就行，網(wǎng)上也有相關(guān)教程和資料，非常豐富詳細(xì)，感興趣的話，可以搜一下，希望以上分享的內(nèi)容能對(duì)你有所幫助吧，也歡迎大家評(píng)論、留言補(bǔ)充。

強(qiáng)大利用JS應(yīng)用的Javascript網(wǎng)格插件有哪些呢？

工具類

方便操作對(duì)象，數(shù)組等的工具庫(kù)

underscore.js

lo-dash 與underscore.js的api基本一致。與underscore比其優(yōu)勢(shì)是，效率高；可自定義構(gòu)建

Sugar 在原生對(duì)象上增加一些工具方法

functional.js 提夠了一些Curry的支持

Watch.js 監(jiān)視對(duì)象或?qū)傩缘淖兓?/p>

bacon.js 函數(shù)式編程，cool

streamjs 用流的方式來(lái)對(duì)數(shù)組，對(duì)象進(jìn)行系列操作

異步流程控制

eventproxy 樸靈出品

Arbiter.js 詳細(xì)

發(fā)布訂閱

q Promise風(fēng)格的

Async.js

mock

Mock.js 生成隨機(jī)數(shù)據(jù)和mock Ajax 請(qǐng)求

jQuery-mockjax mock ajax請(qǐng)求

時(shí)間庫(kù)

moment

datejs

瀏覽器探測(cè)

Bowser 探測(cè)具體瀏覽器和版本

ua-parser-js 探測(cè)具體瀏覽器和版本，操作系統(tǒng)，設(shè)備類型等

調(diào)試

console-polyfill 能放心的使用 console.log()之類的console方法

log 讓控制臺(tái)輸出的log有樣式

Konsole.js 在頁(yè)面的一個(gè)元素里輸出log信息 詳細(xì)

uri.js uri操作

cookie 增刪改cookie的工具庫(kù)

director 前端路由庫(kù) 詳細(xì)

BigDecimal.js 提高精度的數(shù)字操作

JSDoc 根據(jù)javascript文件中注釋的信息，生成API文檔 詳細(xì)

hotkeys 鍵盤事件的封裝

MD5 用 MD5 的方式加密文件的庫(kù)

瀏覽器增強(qiáng)類

讓一些舊瀏覽器變牛逼的庫(kù)

Selectivizr 讓IE 6-8一些的css3選擇器

ieBetter 讓ie6-8有高級(jí)瀏覽器的特性

ExplorerCanvas 讓IE8-的瀏覽器支持canvas

CSS3 Pie 讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時(shí)，box-radious的元素有背景色時(shí)，不顯示背景色。。。

formFive 讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

https://github.com/anselmh/object-fit 讓瀏覽器支持object-fit這css規(guī)則

HTML5 Cross Browser Polyfills 一堆Polyfills

flexibility 讓舊的 IE 也支持 Flexbox

選擇器增強(qiáng)

Lining.js 讓瀏覽器實(shí)現(xiàn)類似::nth-line(), ::nth-last-line()的效果

未歸類

prefixfree 用了它，寫css時(shí)，就不需要加瀏覽器的前綴了

表單類

jquery-file-upload 上傳文件組件 詳細(xì)

zTree 文件樹形視圖控件

Treed 樹編輯器。感覺展示的感覺很像思維導(dǎo)圖

FileAPI 對(duì)文件選擇框內(nèi)的文件的一些處理

表單驗(yàn)證

.Validate 詳細(xì)

jquery-Validation-Engine

表單元素美化

uniform 提供對(duì)下拉框，單，復(fù)選框，按鈕等表單元素的美化

select2 多選下拉框

selectivity 和unfirom比較類似

DropKick 下拉框，單，多選。外觀比uniform好

switchery ios7風(fēng)格的開關(guān)組件

nouislider 用滾動(dòng)條來(lái)設(shè)置/控制（音量等）

range.css 美化input[type=range]元素的外觀

圖片類

holderjs 生成占位圖片

lazyload

imagesLoaded 選取的圖片都加載好后執(zhí)行調(diào)回

CSSgram 用CSS3的Filter實(shí)現(xiàn)Instagram濾鏡的庫(kù)

圖標(biāo)類

Icon Font匯總

SVG做的圖標(biāo)

svgicons

iconic

HYBICON 帶交互效果。如 hover, click

HTML字符實(shí)體圖標(biāo)

http://www.amp-what.com/

transformicons 圖標(biāo)點(diǎn)擊時(shí)，會(huì)有一些變換效果。如，加號(hào)變成叉號(hào)

css3patterns css3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

fancybox 彈出查看圖片，視屏等等 demo

yoxview 彈出查看圖片，圖片尺寸縮放很自然

圖片墻

wookmark

UI 框架

WeUI 由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)。

Framework7

UI 組件類

拖拽

dragula 支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級(jí)，好用的樣子

angular-dragula dragular 官方的 angular 版本

數(shù)據(jù)可視化(圖表)

Echarts 百度出品

highcharts 功能強(qiáng)大。是收費(fèi)的。

Plottable.JS 基于D3的一個(gè)圖表庫(kù)

flot 文檔不給力

chartJs 中文文檔 demo很漂亮，很清晰。比較輕量級(jí)。

ichartJs 中國(guó)的一個(gè)家伙搞的，感覺還不錯(cuò)。

時(shí)間選取組件

foundation-datepicker

DatePicker 一個(gè)簡(jiǎn)單的日歷 詳細(xì)

full calendar 支持脫放的方式來(lái)改變待辦事宜的時(shí)間

Simple Events Calendar 外觀很喜歡。收費(fèi) 5$

jQuery ui datepicker 經(jīng)典，不是很好看

pickadate 輕量級(jí)，手機(jī)友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

zebra-datepicker 可配置性很強(qiáng)。但貌似只能在彈出在右上方。。。

bootstrap-datepicker bootstrap風(fēng)格。

dateRangePicker 選取時(shí)間段。bootstrap風(fēng)格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動(dòng)條

perfect scrollbar 輕量級(jí)的滾動(dòng)條。外觀與mac上chrome的滾動(dòng)條一樣。

iscroll 在移動(dòng)設(shè)備上用不錯(cuò)

加載(Loding)效果

CSS Spinners CSS做的

Loaders.css CSS做的

表格組件

jsGrid Data Grid。 詳細(xì)

backgrid 基于Backbone.js的DataGrid

excellentexport 把表格的內(nèi)容生成excel。兼容 Firefox, Chrome, IE6+

datatables 表格可交互（對(duì)內(nèi)容進(jìn)行排序，刪除等）

handsontable 生成Excel外觀的數(shù)據(jù)

JSpreadsheets 表格數(shù)據(jù)的組件庫(kù)

選取顏色

Spectrum

分享到SNS

JiaThis 生成分享代碼。

編輯器

ace 代碼編輯器，可以用來(lái)做demo演示

ckeditor

ueditor 百度做的

tinymce 對(duì)html內(nèi)容進(jìn)行實(shí)時(shí)的編輯

summernote 在移動(dòng)設(shè)備上用不錯(cuò)

通知組件

notie.js

HTML5播放器

jwplayer 被大量網(wǎng)站使用

html5media 簡(jiǎn)單的h5player，輕量級(jí)

jplayer 功能強(qiáng)太，可換膚

展示

Impress.js 各種旋轉(zhuǎn)，和奇特的體驗(yàn)

fullPage 全屏顯示。用滾輪來(lái)翻頁(yè) 詳細(xì)

zepto.fullpage 專注于移動(dòng)端的fullPage.js，依賴Zepto

pagePiling 和fullPage類似

turn.js 做一本書，帶漂亮的翻頁(yè)的效果

幻燈

slidesjs 挺好用的，只是那幻燈導(dǎo)航的CSS都要自己寫，呵呵 詳細(xì)

iSlider 無(wú)任何插件依賴的手機(jī)平臺(tái)javascript滑動(dòng)組件 詳細(xì)

bgstretcher 全屏幻燈，會(huì)隨著頁(yè)面大小的變化而變化。

Swiper 開源、免費(fèi)、強(qiáng)大的移動(dòng)端觸摸滑動(dòng)插件 Swiper中文網(wǎng)

coin-slider 兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

wowslider 幻燈切換時(shí)各種很炫的效果。收費(fèi)。

cycle2 普通的幻燈，竟然不支持垂直滾動(dòng)。。。

jcarousel 普通的幻燈，不兼容IE6

reveal 3d滾動(dòng)。做ppt相當(dāng)不錯(cuò)

nodePPT 國(guó)人做的，做ppt也相當(dāng)不錯(cuò)。有些方面比 reveal做的還好。但生成導(dǎo)出的html有些問題

roundabout 3d切換，看的后面圖片的邊

彈出框

Magnific-Popup 兼容PC，Mobile。還不錯(cuò)，有5k+的star

layer 國(guó)人開發(fā)的，兼容ie6+。不喜歡其調(diào)用方式。

動(dòng)畫效果

mixitup 用漂亮的動(dòng)畫效果來(lái)完成排序和篩選

jQuery.Marquee 跑馬燈效果

quickflip 卡片翻轉(zhuǎn)效果

卡片翻轉(zhuǎn)效果2 兼容性可以。寫的比較簡(jiǎn)單：1，只支持x方向翻轉(zhuǎn) 2,類名都是規(guī)定好的 3，只能被調(diào)用一次。 需要改寫一下。我的改進(jìn)版見這里

TheaterJS 模擬兩個(gè)人在屏幕上對(duì)話

midnight.js 文字顏色隨著背景變，屌炸了

color-animation jquery的顏色漸變動(dòng)畫插件。jquery的動(dòng)畫不支持顏色值的變化。改庫(kù)提供了這個(gè)支持。

transit 對(duì)元素進(jìn)行css的變換

tagcanvas 3D標(biāo)簽云效果 詳細(xì)

iconate 圖片切換動(dòng)畫

Snap.js 左/右側(cè)導(dǎo)航的出現(xiàn)效果

CSS shake 抖動(dòng)動(dòng)畫

ClickSpark.js 點(diǎn)擊后的一些酷炫的效果

視覺差插件

scrollorama 比較簡(jiǎn)單

superscrollorama 能做的效果更多，但要用第三方Tween的庫(kù)，使用起來(lái)比較復(fù)雜。

scrolldeck

flash

swfobj 能夠自動(dòng)檢測(cè)PC、Mac機(jī)器上各種主流瀏覽器對(duì)Flash插件的支持情況。它使得插入Flash媒體資源盡量簡(jiǎn)捷、安全。而且它是非常符合搜索引擎優(yōu)化的原則的。此外，它能夠避免您的HTML、XHTML中出現(xiàn)object、embed等非標(biāo)準(zhǔn)標(biāo)簽，從而符合更加標(biāo)準(zhǔn)。 詳細(xì)

抽獎(jiǎng)

wScratchPad 刮刮卡刮獎(jiǎng)效果

jqueryrotate 旋轉(zhuǎn)插件。可以用來(lái)做轉(zhuǎn)盤抽獎(jiǎng)效果

用戶體驗(yàn)增強(qiáng)類

Intro.js 用來(lái)介紹網(wǎng)站的功能很不錯(cuò)。也可以做新手引導(dǎo)。

blockUI Lolding組件。

simple-hint 提示信息。用css做的。兼容性IE 9+。

dotdotdot 文字溢出時(shí)，添加在文字末尾加省略號(hào)

jQuery-menu-aim 二級(jí)菜單的切換如Amazon主頁(yè)上一樣迅速

AnythingZoomer 放大鏡功能

美化/高亮語(yǔ)法代碼

google-code-prettify

DlHighlight 僅支持JavaScript、CSS、XML、HTML 這4語(yǔ)法高亮

please 按要求隨機(jī)舒服的顏色

Awesomplete 輸入的智能提示，自動(dòng)補(bǔ)全

proTip 提示。感覺比 Bootstrap 的 tip 好

Hammerjs 手勢(shì)庫(kù)。封裝了 Swipe, Tap, Pinch, Pan等手勢(shì)

動(dòng)畫

velocity 提高Jquery動(dòng)畫的性能。以及顏色動(dòng)畫之類的新特性。

SVG

Snap.svg 操作 SVG 的 JS 庫(kù)。號(hào)稱 SVG 的 jQuery。demo

walkway 以動(dòng)畫的方式，漸漸地畫出 SVG 的路徑。

測(cè)試

Mocha

Chai

Should

Snoion

DeviceMock.js mock 設(shè)備。

其他類

ZeroClipboard 將內(nèi)容復(fù)制到剪切板兼容主流瀏覽器的解決方案 詳細(xì)

html2canvas html轉(zhuǎn)化成canvas，可以用來(lái)做截圖。詳細(xì)

Ink 響應(yīng)式html郵件框架

性能測(cè)試

抓取，解析RSS內(nèi)容（不能跨域，所以后臺(tái)要做代理，所謂的解析Rss其實(shí)就是解析xml）

jFeed

jRss 簡(jiǎn)單版的jFeed

scriptcam 與攝像頭交互

cylon.js 機(jī)器人框架，支持35個(gè)平臺(tái)

Masonry 一個(gè)瀑布流框架

devices.css 移動(dòng)設(shè)備邊框的外觀。做原型的時(shí)候用不錯(cuò)。

Bootstrap相關(guān)類

Bootbox.js 對(duì)bootstrap的彈出框做的一些封裝

免費(fèi)皮膚

AdminLTE

JS Plugins倉(cāng)庫(kù)

jQuery Cards 高質(zhì)量的 jQuery 插件網(wǎng)站

jster

node modules

npmrank Sort npm packages by page rank

YOU MIGHT NOT NEED JQUERY PLUGINS 不依賴 jQuery 的 js 插件。

awesome-nodejs

Libraries.io 各種語(yǔ)言的庫(kù)

OniUI 去哪兒網(wǎng)做的一套基于Avalon的框架

常用的移動(dòng)端框架

zepto.js

語(yǔ)法與jquery幾乎一樣，會(huì)jquery基本會(huì)zepto~

最新版本已經(jīng)更新到1.16

iscroll.js

解決頁(yè)面不支持彈性滾動(dòng)，不支持fixed引起的問題~

實(shí)現(xiàn)下拉刷新，滑屏，縮放等功能~

最新版本已經(jīng)更新到5.0

underscore.js

筆者沒用過，不過聽說好用，推薦給大家~

該庫(kù)提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。

最新版本已經(jīng)更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁(yè)面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動(dòng)中，并非所有的語(yǔ)法都全兼容，效果良好~

css中h1是什么選擇器？

.h1是類選擇器

#h1是id選擇器

h1是標(biāo)簽選擇器

2018選擇并遮住如何使用？

1、在電腦端打開ps css軟件，然后選擇一張圖片放到PS中。

2、選擇選框工具，在上方的屬性欄中出現(xiàn)選擇并遮住的屬性進(jìn)行設(shè)置。

3、進(jìn)入到摳圖屬性欄，視圖模式相當(dāng)于圖層蒙版的顯示顏色，進(jìn)行操作。

4、打開視圖主面板后，選擇模式選項(xiàng)，進(jìn)行操作，如圖所示。

5、接著選擇圖層蒙版的顏色，如圖所示。

6、然后接下來(lái)就是調(diào)節(jié)，左側(cè)第一個(gè)是快速選擇工具，第二個(gè)是邊緣調(diào)整，使用快速選擇工具的添加減少功能來(lái)?yè)笀D。

7、在蒙版上要顯示的內(nèi)容區(qū)是白色，黑色是不要的區(qū)域，用畫筆在細(xì)微調(diào)整邊緣處即可。