<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 【Java分享客棧】Java程序員為爭一口氣熬夜硬剛CSS實現掘金首頁


    前言

    如果我做不了最厲害的Java工程師,那我就做Java工程師中最厲害的前端工程師。

    前段時間,我默默給自己又喂了這碗心靈雞湯……


    我不是很厲害的Java工程師,哪怕我已經工作八年,我依然覺得自己和頂尖工程師存在不小的差距,但我有個優點,就是對待學習樂觀且執拗,我會經常暗示自己前進,哪怕我已經寸步難行。


    我從參加工作三年后就意識到了一件事,我不是特別聰明有悟性的人,我對技術領悟的慢,哪怕我經常熬夜也解決不了工作中一些十分簡單的問題。


    曾經有個女孩對我說過:如果你不是特別幸運,那就請特別努力。這是我的人生格言,你如果想不斷激勵自己,那么你也需要有一個。


    所以我從那時也給自己定下了一句人生格言:如果我做不了大佬,那我就做大佬的跟屁蟲。

    之后這些年我一直都是如此,學別人的,總結別人的,最后轉變成自己的。


    前端是后端的未來


    在講事情起因之前,我想先以多年Java程序員的角度來聊一下前端


    我對前端一直都保留著十分敬畏的態度,因為它把最直觀的設計動態變現了,僅僅是通過一些CSS和JS代碼就能實現許多好看豐富的效果。


    以前的工程師是根本不分前后端的,后端java,前端直接拷貝粘貼,敲敲JQuery,就能把頁面和數據都做出來,后面的bootstrap出來之后,帶來了更多前端的理念及變革,隨后而來的LayUI更是陪伴了我許多年。


    然好景不長,時代的進步決定了IT行業的發展速度,前后端終究自成一家,Angular、react、vue的出現直接迎來了新的革命,layUI的作者也不得不面對現實關閉官網走向開源,成為了JQuery時代的記憶,一時令我失望且黯然神傷。


    我從成為Java程序員初始,就沒認真寫過css,但凡能復制絕對不手寫,但凡能實現絕對不求甚解,甚至我當年的JQuery熟練程度遠高于css,到現在我都沒想明白為什么。


    即使前后端分離了,等到vue出現后,我依然保持著虛心的態度去學習,認為這是后端程序員必修課,如果冒然放棄一定降低競爭力。


    可我的css,這八年時間過去依然停留在初級階段,從未提升過。


    直到最近,我終于因為工作原因受夠了部分前端工程師的傲慢。


    事情起因


    中小型的互聯網公司中,前端往往承擔著比后端更大的責任,至少我呆過的兩家公司,都是前端一兩個,后端一大把,這就注定了在這樣的公司中,前端擁有特殊的地位。


    自從前端自成體系后,我不是第一次在工作中受到少部分脾氣較大的前端工程師帶來的郁氣了,不論是畫頁面還是聯調接口,竟然處處涌現著高人一等的感覺,我差點以為和自己聯調的不是中國人是米國人。


    直到上周的一次例會,因為工作任務逐漸繁重,前端確實壓力較大,主管提出讓我這個后端承擔一小部分前端的任務,結果前端瞬間炸毛了,以為會對他的工作價值造成威脅,什么“他一天連個頁面都畫不出來”、“他會把前端工程寫的亂七八糟我們還要善后”之類的話語蜂擁而來,那梗著脖子發飆的樣子給我很大的沖擊。


    我不喜歡把情緒帶到工作中,但不代表我沒有任何脾氣,這玩意兒能忍??


    尤其是說我一天連個頁面都畫不出來,簡直是誅心之言!我忍得了嗎??我忍了,因為我確實不會。


    俗話說,人活一口氣,樹活一張皮,我這些年從未停止過學習,我叫你學Java你學的會嗎?累不死你!但是你叫我學前端我一定比你學Java輕松的多。


    所以我含著這口氣,說什么也要在css上有所突破,馬上列出計劃就開干了。


    學習方法


    Java程序員若想立馬精通css,是十分困難的,難的不是css,是Java,你沒聽錯,就是因為Java要學的太多,注定了你在css這種不太關心的技術上想有成就很難,這單純就是個精力的問題。

    可Java程序員也有自己快速學習css的方法,我這里根據自己這一周所學的經驗分享給大家:

    1)、只掌握最基本的語法,比如width、height、margin、padding、color、border等等類似這樣的語法,一些偏門的語法可能很有用,但你花時間深入學習不值得,放到以后邊搜邊學;

    2)、先從布局開始,尤其是彈性布局flex語法,我可以這么說,對Java程序員最有用的就是flex語法,不管PC端還是移動端都適用,所以我建議flex語法著重學習,學到最后你會發現萬物皆可flex;

    下面是我學習總結的flex筆記截圖,你也可以像我這樣對重點知識進行記錄,因為Java程序員很容易忘記這些東西,可以反復觀看最終形成永久記憶。


    111.png


    3)、掌握Photoshop少量用法,主要用來計算間距或寬高等元素,以及使用吸管獲取顏色參數,剛開始學習時,直接把某網站頁面截圖放到Photoshop里面,直接參考別人的取值和顏色搭配是最方便實用的選擇;


    計算間距:

    222.png


    取背景色:
    333.png


    4)、學會F12調試,主要用來參考網站及平臺的樣式,許多可以拿來復用,同時能學到很多CSS樣式寫法。


    444.png


    5)、最好最快速的CSS學習方式依然是模仿,找一個網站,模仿里面的某個頁面進行CSS仿寫,這種方式不僅能快速進入狀態,還能學到很多東西,最重要的,能直接做出效果你會很有動力。


    我的成果


    我根據上述的學習方法進行了快速學習,尤其是對flex語法進行了重點學習,然后就直接截取了掘金的首頁,開始仿寫。


    在周末放假的時間,含著這口氣,從晚上8點開始,一直寫到凌晨4點多,終于完成了我八年來首次認真學習CSS的成果。


    也許很多前端看到了會取笑我吧,一個簡單的首頁竟然花那么多時間完成,可我卻感到很開心,我覺得我從這時候開始,真正對如何畫頁面有了充分的認識,也更確定了自己以后的方向:要努力做Java工程師中最厲害的前端工程師。


    555.png

    666.png


    后記


    分享這篇文章的初衷,是希望那些像我一樣彷徨過的Java程序員或其他程序員都能夠尋回自我,一點點突破自己,怕的不是學不好,怕的是你不學啊。


    我仿寫掘金的頁面及樣式文件會分享出來,小伙伴們可以照著參考下,有興趣的也可以試著仿寫下首頁或其他頁面,里面每一行css都是我手敲的。


    ??鏈接: https://pan.baidu.com/s/1QQkwcpNU8cOVjaGjpWh5dA?pwd=jtit


    ??提取碼: jtit


    我之后會專門花時間一邊學習積累一邊手寫一個后臺管理系統,純頁面不包含業務功能的那種,因為我不喜歡包含雜七雜八的內容,就喜歡干干凈凈的架子,業務我自己去寫。同時也會出一個包含vue及elementPLUS的版本,最重要的是,我會把文檔寫好供大家學習,而且通過文章來一步步闡述實現方式,帶著大家一步步實現效果。


    感興趣的小伙伴兒可以提前關注下本人哦~



    本人專注分享工作中的趣事及經驗,覺得有一滴滴幫助的話麻煩點個推薦吧啦吧啦~~


    posted @ 2022-03-24 09:45  福隆苑居士  閱讀(388)  評論(2編輯  收藏  舉報
    国产美女a做受大片观看