『壹』 web前端開發需要哪些工具
主要工具有：
最常用的就是dreamweaver，cs6目前是功能最強大,問題最少的了。
dw有一個比較方便的就是可視化編程，可以邊看效果邊敲代碼，還有自動提示代碼的功能，還有ediplus，這個其實就相當於一個字體有顏色的記事本，感覺dw佔用內存太多了，直接用 ediplus寫代碼。
eclipse可以寫java、php還有 上面的各種代碼。
Zend Studio 是專門寫php的，但是上面這2種工具比較專業。
『貳』 怎樣快速可視化製作CSS
快速可視化製作CSS推薦使用第三方工具，推薦如下：
1、Bootstrap的可視化製作工具：Jetstrap：
Jetstrap是一個基於 Bootstrap 前端框架的可視化設計工具。通過 Jetstrap製作出來的網頁 100% 符合 Bootstrap 標准。比如說你只要設計了電腦端的頁面，它會自動適配手機端和 Pad 端（響應式設計）。
2、Bootstrap可視化編輯器工具-LayoutIt
簡單的幾個拖放操作就能做出漂亮的 Twitter Bootstrap 網站？是的，LayoutIt 是一個 Twitter Bootstrap 界面生成器，能夠幫助你快速滾喊尺製作出網站和界面模型，同時能夠下載生成的網站代碼。3、Bootstrap的可視化製作工具：bootswatchr
bootswatchr是從地面上創建一個自定義的BootStrap主題的可視化工具。最大的方滲掘便就是 我們可以在左側修改大高css或者html代碼，然後修改結果會直接會顯示在右側。更重要是一個在線編輯和免費生成Bootstrap主題的酷站。
『叄』 現在前端一般用什麼軟體
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界頂級軟體廠商Adobe推出的一套擁有可視化編輯界面，用於製作並編輯網站和移動應用程序的網頁設計軟體。由於Dreamweaver支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對於初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用於Web開發高級人員的創作！
2、Adobe Edge
Adobe Edge是一個用HTML5、CSS、Java開發動態互動內容的設計工具。它的一個重要功能是web工具包界面，用於方便確保在不同瀏覽器中架構的一致性，此外，Adobe Edge還將整合TypeKit這樣的字體服務。通過Edge設計的內容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器上。
3、DevExtreme
DevExtreme Complete Subion是性能最優的HTML5,CSS和Java移動開發框架，可以直接在Visual Studio集成開發環境，構建iOS，Android，Tizen和Windows Phone 8應用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個原生UI組件，並且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發環境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動平台，是Visual Studio開發人員開發跨平台移動產品的首選工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS開發工具。被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaS IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
5、Sencha Architect
在開發移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發。開發團隊可以在一個單一集成的環境中完成應用的設計、開發和部署。開發者還可以開發Sencha Touch2和Ext JS4 Java應用，並實時預覽。
6、Initializr
Initializr 是製作 HTML5 網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr 會為你生成代碼簡潔的可定製的網頁模板。
7、HTML5demos
想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運行簡單的 HTML5 聊天客戶端嗎？HTML5demos 會告訴你每一個HTML5特性在哪些瀏覽器中支持。
8、HTML5 Tracker
想了解 HTML5的最新動向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。
9、HTML5 visual cheat sheet
想要快速超找一個標簽或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。
10、Switch To HTML5
Switch To HTML5 是一個基礎而實用的模板生成工具。如果你開始一個新項目，可以到這里獲取免費的 HTML5 網站模板。
11、HTML5 Test
你瀏覽器准備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。
12、Lime JS
LimeJS 是一個 HTML5 游戲開發框架，用於快速構建運行於觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。
以上就是向大家推薦12款優秀的HTML5開發工具。希望能幫到大家。
『肆』 Web前端工程師要掌握的CSS技巧
今天小編要跟大家分享的文章是關於昌亮Web前端工程師要掌握的CSS技巧。正在從事web前端工作的小夥伴們快來和小編一起看一看吧，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想像的高度height；舉個例子：
其實出現這種現象，我們可以巧用margin/padding的百分比值實現高度自適應（多用於佔位，避免閃爍）當然該元素高度肆攔上的百分比是相對其父元素高度的百分比的，min-height及max-height也適用這條規律。
2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對於父元素的高度的。同理，left、right則是相對於父元素的寬度的。
這一點，我昨天在查資料寫這篇文章—最全面的元素水平垂直居中方法匯總的時候就發現有個大牛也理解錯了—-CSS布局奇淫技巧之_各種居中裡面的第八點。3、邊框寬度不允許使用百分比裂迅胡值這點就不解釋了。4、width：100%當父容器里有絕對定位的子元素時，子元素設置width:100%實際上指的是相對於父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的content，其等於父元素的content寬度。
將上面子元素的position改成了relative後，其寬度就變成了parent寬度。
5、line-height你知道line-height:150%和line-height:1.5的區別嗎？知道了就可以跳過此處，不知道繼續看下面：舉個例子：
上面可以看到line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等於無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外，還是建議首選無單位的。6、ex和ch單位ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算；ch:以節點所使用字體中的「0」字元為基準，找不到時為0.5em；
ex和ch單位，類似於em和rem,依賴於當前的字體和字體大小。但是，不同的是，這兩貨是基於字體的度量單位，依賴於設定的字體。ch單位通常被定義為數字0的寬度。你可以在EricMeyers的博客里找到關於它的一些有意思的討論，例如將一個等寬字體的字母」N」的寬度設置為40ch，那麼在另一種類型的字體里它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。ex定義為當前字體的小寫x字母的高度或者1/2的1em。很多時候，它是字體的中間標志。
x-height;theheightofthelowercasex這些單位有很多用途，大部分用於版式的微調。比方說，sup元素（上角文字標），可以通過position:relative;bottom:
1ex;實現。類似的方法，你可以實現一個下角文字標。瀏覽器默認的方式是利用上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：Css代碼
7、使用calc時運算符之間要有空格，否則可能無效。
以上就是小編今天為大家分享的關於Web前端工程師要掌握的CSS技巧的文章，希望本篇文章能對正在從事web前端相關工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
『伍』 前端程序員必須了解的幾個CSS使用技巧
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想像的高度height;其實出現這種現象，我們可以巧用margin/padding的百分比值實現高度自適應。當然該元素高度上的百分比是相對其父元素高度的百分比的，min-height及max-height也適用這條規律。
2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對於父元素的高度的。同理，left、right則是相對於父元素的寬度的。
3、邊框寬度不允許使用百分比值。這點就不解釋了。
4、width：100%，當父容器里有絕對定位的子元素時，子元素設置width:100%實際上指的是相對於父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的 content ，其等於父元素的 content寬度。
5、line-height。你知道line-height:150%和line-height:1.5的區別嗎? line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等於無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外，還是建議首選無單位的。
6、ex和 ch單位。ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算;ch:以節點所使用字體中的“0”字元為基準，找不到時為0.5em。
ex和 ch單位，類似於 em和 rem,依賴於當前的字體和字體大小。但是，不同的是，這兩貨是基於字體的度量單位，依賴於設定的字體。7、使用calc時運算符之間要有空格 ，否則可能無效。
以上這7個知識點你們掌握了嗎?更多的內容資訊，小編會及時發布在本平台，請及時關注哦!
『陸』 前端的CSS
級聯樣式表（Cascading Style Sheet）簡稱「CSS」，通常又稱為「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當滑鼠移上去後字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標志的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。
