前端程序員不會寫css

A. 前端程序員怎麼自學

自學方法：

1、作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對於web前端還沒有任何概念的時候，需要一個人領進門，之後就都靠自己鑽研，第一步就是確定web前端都需要哪些內容，並且在多少時間內學完，建議時間6個月保底。

2、視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最後的結果是什麼？看來看去什麼都不會寫，所以在這里給大家提醒，書可以看，但是是在建立於你已經對於某個知識點有了具體操作的執行後，在用書去鞏固概念，這樣更加利於你對於知識的理解。

3、對於學習技術來講，掌握一個學習方法是非常重要的，其實對於學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成「方法不對，努力白費」。其實關於這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟著敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習法方法是學習的前提。

4、不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學並且最後成功做這份工作的其實並沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是干什麼的，學什麼的，就盲目的買書看，到處找視頻看，最後看著看著就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之後你就會知道web前端具體是干什麼的，該怎麼學，這是我個人的小建議，可以不採納。

自學路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：javaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與php/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(微信小程序開發、ReactNative、各類混合應用開發)

第6階段：NodeJS全棧開發(1周)

內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)

基礎書籍：

1、《Head First HTML與CSS(第2版)》，入門真的是經典書籍，手把手教學，豐富的案例讓你從 0 開始學前端。

2、《CSS權威指南(第三版)》，這本書作為 CSS 的經典著作，把原理講得非常的通透，除了 w3c 標准，算最權威的一本了，畢竟權威指南。

3、《CSS揭秘》神書，47 個 css 技巧讓你在面對各種 css 問題的時候游刃有餘。是 css 書籍中評分最高的了，css 進階必備。

4、《javascript語言精粹》，這本書可以在入門之前了解一下基本語法，以及在學習之前可以了解下 JS 裡面的精粹以及糟粕，雖然這本書很薄很薄，但是值得反復去讀的一本書。

5、《JavaScript DOM編程藝術(第2版)》，本書在簡潔明快地講述JavaScript和DOM的基本知識之後，通過幾個實例演示了專業水準的網頁開發技術，透徹闡述了平穩退化等一批至關重要的 JavaScript編程原則和最佳實踐。

6、《JavaScript權威指南》：犀牛書是每個FE都繞不過的一本書，可以先大致通讀幾遍，也可以把其當作工具書，時時翻閱。

視頻教程:

網頁鏈接

B. 前端怎樣克服厭惡寫 CSS 的心理

學計算機好幾年了，正式從事前端工作1年有餘，也有一段時間非常抵觸，一看要改、寫css樣式就非常的煩。這種狀態來工作肯定不行……就做了一些調整，現在的狀態還可以，反正是調整過來了。分享下我個人的方法。
1.根據前輩的分享，整理出一套通用樣式表，字體、顏色、按鈕等通用樣式，每次開發新頁面拿來直接用，簡化過程，感覺上會輕鬆些，我的是在bootstrap的基礎上整理的，因為經常用那個框架。
2.提升視覺效果，換了個編輯軟體，安裝打字效果特別炫的插件，代碼看起來也非常漂亮、舒服，敲代碼時的感覺就很棒。
3.和樓上說的差不多吧，我看了一些大型網站上炫酷的css，臨摹了一些demo出來，變相的提升成就感，那些炫酷新穎的效果也能增加自己的興趣。

以上，個人的一點點經驗，希望對你有幫助。

C. 一個合格的web前端需要會什麼

1. div和table

這個是最簡單的，也是最基礎的。要熟練掌握div、form table、ul li 、p、span、font這些標簽，這些都是最常用的，特別是div和table，div用於布局、table也可以用於布局，但是不靈活，基本 table是用來和數據打交道。

2.html

HTML是指超文本標簽語言，是目前web領域應用廣泛的語言，我們只需要在html文檔中插入對應的標簽，即可實現web頁面的編寫與排列，所以要熟練掌握HTML基本知識，包括每個標簽的用法等。

3. CSS

CSS指層疊樣式表，可以為HTML標簽自定義樣式，通過設置HTML標簽的樣式，來改變其外形，達到美化與排版web頁面的目的。

4.Javascript

Javascript是網頁腳本語言，它可以在html中運行，設置並修改瀏覽器中的各種對象與變數。例如用來改進設計、驗證表單、檢測瀏覽器、創建 cookies等等，現在各大網站都可以看見 Javascript的蹤影，常見的網站首頁大眼晴、警告提示框、頁面動畫效果等等。Javascript更是一種在客戶端廣泛使用的腳步語言，在 Javascript當中提供了一些內置函數、對象和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等!

5.Jquery

Jquery是相當於把js封裝了一套的一個js插件，目的就是操作起來更方便，代碼寫的更少。 Jquery是一個免費、開源的輕量級的Javascript庫，並且兼容各種瀏覽器，同時現在有很多基於 Jquery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度。

6.框架

從 bootstrap開始，響應式的珊格系統被後來框架一直沿用，建議學一套主流mvc框架，vue，react， angular兩選一種。

7.會點後台語言

對於前端工程師來說，並不需要像網站程序員樣，編寫對象、開發特殊功能、搭建資料庫。但是前端工程師要掌握基本的頁面GET＆POST傳參、程序判斷語法、程序輸出語法、頁面提交、資料庫查詢與記錄插入，以及掌握HTTP與WEB工作原理、掌握Socket長連接實時網路通信技術、掌握 NOSQL中的 MONGODB的應用、了解PHP語法、了解 MYSQL資料庫的基本操作。

當然，以上技能能夠幫助你成為一個合格的前端工程師，但要成為一個優秀的前端，必須掌握除技術以外的東西，例如設計，用戶等等，因此還需不斷的堅持學習。

D. 做網站的前端需要會html css js夠不夠

前端會html/css/js夠，能基本做一個不錯的頁面。但是如果想成為一個技術高的前端，還需要學習和掌握更多的東西。

如何才能做得更好呢？
第一，必須掌握基本的Web前端開發技術，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。
第二，在一名合格的前端工程師的知識結構中，網站性能優化、SEO和伺服器端的基礎知識也是必須掌握的。
第三，必須學會運用各種工具進行輔助開發。
第四，除了要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持，等等。
可見，看似簡單的網頁製作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對於老手來說，也時常不知道下一步該學什麼。
代碼質量是前端開發中應該重點考慮的問題之一。例如，實現一個網站界面可能會有無數種方案，但有些方案的維護成本會比較高，有些方案會存在性能問題，而有些方案則更易於維護，而且性能也比較好。這里的關鍵影響因素就是代碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的，對代碼質量的要求也不同，但它們之間又有著千絲萬縷的聯系。

E. 我做前端開發，但是javascript總是搞不懂，也不會寫出什麼效果，邏輯和大腦空空，覺定轉行！

我覺得吧你首先要確定自己是否真的努力了，是否有好好學習javascript、jquery、css、html了，如果你努力了，和高手探討一下自己的努力方向是否走偏，如果就是覺得不適合，就是不愛做，那好吧，放手吧。
如果沒有努力，沒有好好學學javascript，那麼好好學一下，可以先學一下jquery，很簡單，可以立即讓你對javascript感到驚艷，美輪美奐。
我也是做前端的，我很喜歡前端的工作，我們這邊也有後端的同事轉過來了，他已經做到了項目經理級別，後端做長了就會感覺，前面一律，模式已經固化了，做前端每天你可以看到嶄新的東西，每天都有有趣的東西出現。
推薦你基本書吧，javascript權威指南(第六版)，javascript高級程序設計，javascript語言精粹，javascript設計模式，javascript經典實例。
可以先看jquery方面的書，推薦兩本jquery語言基礎，鋒利的jquery。
希望對你有用

F. 前端程序員必須了解的幾個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個知識點你們掌握了嗎?更多的內容資訊，小編會及時發布在本平台，請及時關注哦!

G. html代碼和css代碼應該由程序員寫，還是由美工寫

Web前端設計主要分為5個步驟：
1.看需求;
2.畫草圖;
3.設計界面;
4.前端代碼編寫;
5.兼容性調試。
網頁美工是精通美學，photoshop（PS），FLASH，dreamwaver（DW）等一網站製作軟體的網路人員，且必須具有良好的創意和一定程度的審美觀。必要時需要一定的策劃知識。為網站所有的頁面畫出來並用DW和css排版出來。頁面必須清晰簡潔，還要適宜後台調用。
網頁美工是美工用Dreamwerver等網頁編輯軟體把已經設計好的平面效果圖，製做成HTML靜態網頁文件。這里就要求美工用到CSS和DIV技術了，也就是所謂的切圖。說的詳細一點就是，網頁美工一般需要精通PHOTOSHOP/CSS/HTML/JAVASCRIPT等網路語言或工具進行網頁框架，色彩，基調，創意等處理。

H. 為什麼 CSS 這么難學

因為CSS是一門非常奇怪的語言。他有兩條不同的學習曲線，一條是入門以後直線上升然後慢慢變得平坦，一條是穩定上升的斜線。打個比方，修一台電視機我們有兩種方法: 一種是在外殼上敲敲打打，找到敲哪裡敲幾下的規律；另外一種是看一本電視機原理的大厚書，然後去拆開修。對應到CSS就是不停地試各種排列組合和讀規范讀權威指南。這兩種方法其實沒有高下之分，只有適用范圍。如果只是用CSS做很簡單的工作，那試一試很經濟實惠，但如果經常跟CSS打交道，那麼讀規范就會節省大量跳坑排坑的時間。高票答案說CSS不正交化我不是很贊同，他舉的三個例子都清楚寫在了規范和權威指南裡面。如果先讀規范會覺得這些行為是自然而然的。我本人同時寫JavaScript, Java, CSS, Python，在學習C++，但是並沒有感覺到高票的所謂理性和感性的區別。你覺得它沒有規律，也許只是因為你沒有好好讀規范。CSS是一門正兒八經的編程語言，請拿出你學C++或者Java的態度對待它，該看書看書，該查文檔查文檔。

I. php程序員需要掌握css/div和js嗎

PHP程序員需要掌握的東西不僅僅是一些簡單的html, js，掌握這些僅僅不夠
PHP程序員需要了解的東西有：
倘若是做中間層和前端工作則要求對css，javascript要求比較高。當然對web的一系列實現原理也是要非常熟悉的。對新技術要比較敏感，才能證明你有很好的學習能力和使用能力。
努力提高自己的英文口語，和閱讀能力。往往很多新技術都是老外想出來的。等有了中文版也許這個技術已經不是那麼新了。相信我們很多人都只是了解到中間的皮毛而已，對於技術原理。這類型的東西了解甚少。值得注意的一點，正則這個東西在他們嚴重也是很重要的。
想成為一位合格的php程序員（高級）,必須符合如下條件。
1、文件目錄處理函數包80％以上的函數的功能的靈活運用。
2、 日期時間函數中的80％以上的函數的功能的靈活運用
3、數學函數庫中的100％的內容。
4、網路庫中的60％以上的內容，對各個函數的功能比較熟悉。
5、字元串處理函數下的60％以上的內容，特別是各種處理函數。
6、正則表達式函數下的90%以上的內容，特別是各種正則處理
7、一些安全庫下的40％以上的內容，如果對於安全沒有接觸的話根本就不可能掌握PHP
8、XML處理，熟悉SAX、DOM以及JDOM的優缺點並且能夠使用其中的一種完成XML的解析及內容處理。
9、圖形圖像函數庫下的80%以上的內容，特別是一些圖像生成和處理
10、MySQL 資料庫函數下的90%以上的內容，特別是處理各種數據的函數
11、數組處理函數下的90%以上的內容，特別是各種操作處理函數
12、其它PEAR，PECL，和一些擴展類庫中的80%以上的內容，特別是一些常用的類的處理
13、針對不同的需求，查找不同的函數庫。
14、測試：必須熟悉使用phpunit編寫測試用例完成代碼的自動測試。
15、管理：必須熟悉使用xinc, phing等完成工程管理的常用任務，例如工程編譯、生成phpdoc、生成、版本控制、自動測試。
16、排錯：應該可以根據異常信息比較快速的定位問題的原因和大致位置。
17、思想：必須掌握OOP的主要要求，這樣使用PHP開發的系統才能是真正的PHP系統。
18、規范：編寫的代碼必須符合流行的編碼規范，這樣程序的可讀性才比較好。
19、博學：掌握OOA、OOD、YiiFramework 、Zendframework、cakephp、symfony、模板技術等流行技術，掌握軟體架構設計思想、搜索引擎優化、緩存系統設計、網站負載均衡、系統性能調優等實用技術。
20、
多去看別人寫的代碼，php優秀的框架很多，很多人在認知上就有一個錯誤。認為自己能用一個框架開發一個系統了就認為自己已經熟悉這個框架了，其實會使用
他並沒有什麼一個框架基本都有用戶手冊，一看基本都會使用了，要想自己技術上面提升，建議多看看這些框架的實現原理（設計模式）。

J. Web前端開發知識點之CSS的使用方式

今天小編要跟大家分享的文章是關於Web前端開發知識點之CSS的使用方式。本文章小編從與HTML的結合方式、CSS語法、選擇器以及盒子模型四個方面進行講解。下面來和小編一起看一看吧！


一、與HTML的結合方式


CSS與HTML的結合方式一共有三種，分別是：外部樣式、內部樣式和內聯樣式。


①外部樣式


當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用標簽鏈接到樣式表。標簽在文檔的頭部：


_








或者可以像下面這樣在





②內部樣式


當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用





③內聯樣式


要使用內聯樣式，你需要在相關的標簽內使用樣式(style)屬性。


_


Thisisaparagraph

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。


二、CSS語法


CSS語法規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。


選擇器通常是您需要改變樣式的HTML元素。


每條聲明由一個屬性和一個值組成。兩條聲明之間被分號分開。


屬性是您希望設置的樣式屬性。每個屬性有一個值。屬性和值被冒號分開。


在下面這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。

三、選擇器


CSS的選擇器主要分為兩大類，一類基本選擇器；一類擴展選擇器。


①基本選擇器


基本選擇器包括id選擇器，元素選擇器和類選擇器。


id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。例如下面代碼指定id為red的標簽中文本為紅色。


#red{color:red;}


元素選擇器可以為相應的HTML元素指定特定的樣式。元素選擇器前面沒有任何字元。例如下面代碼指定div標簽中文本為紅色。


div{color:red;}


類選擇器可以為標有特定class的HTML元素指定特定的樣式。類選擇器以一個點號顯示。例如下面代碼指定class為center的標簽中文本居中對齊。


.center{text-align:center}


②擴展選擇器


擴展選擇器是在基本選擇器的基礎上擴展出來的，下面介紹幾種常見的。


*選擇器(*
{})可以為HTML的所有元素指定特定的樣式。例如下面代碼指定HTML頁面中所有文本為紅色。


*{color:red;}


並集選擇器(選擇器1,選擇器2{})可以為多個選擇器指定特定的樣式。例如下面代碼指定div和span兩種標簽中文本為紅色。


div,span{color:red;}


子選擇器(選擇器1選擇器2{})可以為選擇器1中的選擇器2指定特定的樣式。例如下面代碼指定div中span標簽文本為紅色。


divspan{color:red;}


父選擇器(選擇器1>選擇器2{})可以為含有選擇器2的選擇器1指定特定的樣式。例如下面代碼指定含有span的div標簽文本為紅色。


div>span{color:red;}


屬性選擇器(元素[屬性="屬性值"])可以為含有該屬性且屬性值等於該值的元素指定特定的樣式。其中，元素和屬性值可以省略。例如下面代碼指定align屬性等於center的div標簽文本為紅色。


div[align="center"]{color:red;}


偽類選擇器(元素:狀態{})可以為該元素處於該狀態時指定特定的樣式。例如下面的代碼指定滑鼠懸浮在超鏈接上時文本為紅色。


a:hover{color:red;}


四、盒子模型


所有HTML元素可以看作盒子，在CSS中，"box
model"這一術語是用來設計和布局時使用。


CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。


盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。


下面的圖片說明了盒子模型：


Margin(外邊距)-清除邊框外的區域，外邊距是透明的。


Border(邊框)-圍繞在內邊距和內容外的邊框。


Padding(內邊距)-清除內容周圍的區域，內邊距是透明的。


Content(內容)-盒子的內容，顯示文本和圖像。默認情況下，標簽的width和height屬性指的是content(內容)的寬和高，我們在設置邊框和邊距的時候一定要注意。如果想要讓width和height是最終盒子的大小，可以設置下面的代碼：


box-sizing:border-box;


以上就是小編今天為大家分享的關於Web前端開發知識點之CSS的使用方式的文章，希望本篇文章能夠對正在從事web前端工作和學習的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，城市一名優秀的web前端程序員。


文章來源：原創_緄墓適_