如何短時間成為CSS前端開發工程師

一個月的時間，成為一個初級的css前端開發工程師？作為一個混跡前端圈幾年的碼界小姐姐的我來說，我覺得還是蠻難的，畢竟前端這個東西技術的含金量還是蠻高的，不然你覺得關於程序員月入幾萬都是大風吹來的嗎，雖然僅僅只是一個初級的css前端開發工程師，這麼一說弄的好像css很簡單似的(給你一個白眼，自行體會吧。)，css也很難的好吧。不過一個月的時間從0基礎到成為一個前端界搬磚的也不是不可以的。

題目說是零基礎，我倒是想知道這個零到底能零到什麼程度呀，這個零也是分段位的好吧，你是A段位，B段位還是C段位，難道是D？電腦屏幕前面的你可以找坑入座了：

①　A段位：大學學歷，並且是計算機專業的，但是本著上大學就是吃喝玩樂，撩妹子混社團偶爾也會到課堂上報個到，對著電腦敲過一丟丟的大學生小哥哥或者小姐姐。

②　B段位： 大學學歷，大學專業是物流、會計、生物學、石油工程、金融學等等基本跟編程八竿子打不著的專業，只是那天選修的時候不知道哪根筋突然間脫離組織，選修了一門叫做C++、.net。。。的課程的你。

③　C段位：高中或者初中學歷，也不知道從哪個開始，就在人群中聽到或者看到了關於前端相關的新聞、廣告、談話就對前端弄出來的炫酷吊炸天的視覺效果一見鍾情，一發不可收拾，從此以後再也忘不掉，便從網上搜集各種視頻文檔看了好多，也沒有看懂，自己吧又很想把他拿下的。

④　D段位：高中或者初中學歷，大學生活甚至高三都只是別人的青春，而你的青春都是吃飯，睡覺，打遊戲，上班，掙錢，打遊戲，睡覺，上班或者就是吃飯、睡覺、上班、上班、上班、每天都是累死累活的，掙著一份可以養活你、房子、狗的錢。甚至連width、height、color、red、black、yellow、apple這些都要通過百度翻譯、有道詞典才能知道是什麼的。

如果你是A或者B，那麼首先恭喜你，你英文還可以，不然你也考不上大學，哈哈，應該不會被人打吧，還好我拉上窗帘，鎖上門了。嗯，扯了這麼久，該給點乾貨了，不然總覺得我一個人用文字在跟不知道對面是誰的你尬聊。

以下是乾貨，關於在一個月之內從零基礎成為前端界初級CSS搬磚工。

1、代碼編輯器，上戰場打仗是需要武器的，沒有武器那你就等著當做炮灰吧，這邊前端這塊的編輯器有Dreamweaver、Hbuilder、Sublime、Webstorm等等。先把這些軟體怎麼應用搞定吧，你得先把槍調試好了，再研究怎麼不會成為炮灰吧。

2、你得知道什麼html，html的語法是什麼？html怎麼用？常見的html標籤都有哪些？怎麼用？然後隨便打開一個網頁，分析這塊用什麼html標籤，那塊用什麼標籤，比如下圖：

這個是一個百度新聞的新聞信息列表，這個就在html當中的就是用無序列表ul li 來寫的，具體的代碼如下：

<ul> <li><a href="#">中國人的故事：最美消防員 永遠的衝鋒</a></li> <li><a href="#">山東女大學生找工作被騙至傳銷 哈師大師生解救</a></li> <li><a href="#">夫妻開麵館在麵條湯里加罌粟殼 對外宣傳是"秘方"</a></li> <li><a href="#">官方通報"天價感恩費":收款77萬 校長被停職調查</a></li></ul>

再比如同樣是列表，下圖的這個就跟上面不一樣，

這個圖雖然也是列表，但是它前面有序列1,2,3,4，那這樣的一個列表我們可以看出是一個有序列表，那我們用html表示就是

<ol> <li><a href="#">為何博通發出的千億美元收購邀鄰章</a></li> <li><a href="#">百度終於不土了，開始變時髦了開八</a></li> <li><a href="#">A股接連調整，到底是什麼原因郭施亮</a></li> <li><a href="#">王小川上市前14年怎麼熬過來無冕財經</a></li></ol>

但是我們僅僅按照上面的代碼寫html的話，我們用瀏覽器來預覽的時候，是這個樣子的，如下圖：

很明顯跟我們真正所要的效果是不一樣的，那這個時候我們就需要根據我們的圖，用css設置成跟圖一樣的效果，進行簡單的字體顏色，字型大小大小，行高等相關的修飾。所以接下來你就要進行第3步驟了

3、什麼是css？css的語法是什麼？css的引入方式都有哪些？css選擇器都有哪些？不同的css選擇器瀏覽器是怎麼解析的？什麼是css權重？等等

4、常用的css屬性都有哪些？比如字型大小大小是font-size、字體顏色是color、背景顏色是background-color、行高是line-height、邊框是border等一些常用的css屬性，這樣我們就可以根據設計圖來修飾我們的html結構了。下圖是剛才對於上面列表進行了簡單修飾：

<style type="text/css">ol li{ line-height: 30px;}ol li a{color: #222; font-size: 20px; text-decoration: none;}</style>

5、如果開發過程中遇到問題怎麼交流？在這裡給大家分享幾個在開發過程中遇到問題後解決問題的方法：

①　先確認是哪一行代碼產生的問題，然後用谷歌或者火狐瀏覽器打開你的當前頁面，打開F12，如果有報錯信息，這個時候可以百度一下報錯信息，嘗試著慢慢去理解報錯的意思；如果沒有報錯信息，就用簡單的幾個詞語來描述一下錯誤現象，百度一下結果，然後快速的篩選一下哪些結果是不是有用的，如果沒有用的，再次重新輸入一個描述詞，依次這樣重複查詢。

②　用簡單明了的語言描述下自己疑惑的地方，比如說我當前的div設置了背景圖，我給了寬和高，也引入了背景圖，但是瀏覽器上就是沒有顯示背景圖。而不是說有沒有會css設置背景圖的，為什麼我的背景圖沒有了？如果你可以截圖的話，最好是可以截圖給別人，如果你能夠截全屏就更好了，而不是僅僅是截圖截了一丟丟的3行代碼，就好像你正走在街上一個陌生的妹子對你說，帥哥，你給我手機打個電話，看看有沒有人接，要是我是那個帥哥我肯定說，你傻缺呀，倒是告訴我你的電話號碼呀，不然我怎麼打。或許這個妹子僅僅是在跟你搭訕而已。

③　學會利用瀏覽器的F12多去看看別人是怎麼寫代碼的，找一個固定的學習上的小夥伴，這個小夥伴最好是比你的水平高一點點，而不是技術很好很好的大神，因為你遇到的問題，大神或許很難領會到你的困境，畢竟大神距離菜鳥那是很久很久了。

6、最後你還需要很多的時間去不斷的多模仿別人的頁面，嘗試著寫不同類型的頁面，電商的，企業站，視頻站，博客站等。從中不斷總結出現的錯誤和解決方法，甚至頁面書寫的小技巧。

如果你是C或者是D段位的，你可能比A和B段位的要辛苦一點點，面對一堆的英文單詞，你首先要做的是用一些翻譯軟體，先把單詞的讀音和基本含義掌握了，再按照上面的步驟一點點來了。

來源：劉穎

推薦閱讀：

怎麼學好 Java？www.zhihu.com

Unity 3D 遊戲未來的就業前景如何？www.zhihu.com

大數據工程師需要學習哪些?www.zhihu.com