如何學習前端 個人感悟

2021-07-24 22:37:35 字數 1559 閱讀 2373

當然,從最基礎的開始。這裡最重要的莫過於學會怎樣切割頁面,所謂切割,即能通過div標籤的巢狀方式進行頁面分割,配合少量的css樣式,勾勒出想要的,但並不美觀的頁面。若能至此,那麼就基本pass了。總結起來,即熟悉常用的標籤在介面上產生的效果。

對於小白,在學習階段,難免會碰到例如導航欄是怎麼切割出來的,毫無頭緒,怎麼辦呢?

開啟瀏覽器,任意搜尋一網頁,通過瀏覽器自帶的除錯工具(f12進入除錯)開始除錯。具體如圖1瀏覽器除錯操作圖所示。

圖1瀏覽器除錯操作圖

簡單來說,即通過此類工具快速定位到所需檢視的模組,然後參照他人的做法,仿製自己的頁面。在前端學習過程中,個人認為,大量的仿製為重要的且必不可少的學習過程。

當頁面切割不成為時,相關css樣式的使用當然也應跟進,盡量讓自己的頁面美觀。

話說,當對乙個頁面有足夠的的了解後,這裡的足夠即指的是當看到乙個網頁,我們能比較快速的判斷其是通過什麼手段切割並製作其中的各個模組,並通過實踐證明自己的想法切實可行。那麼,我們可以開始第二階段的學習了,即轉折。

現在,我們已會切割頁面了,乙個網頁拿到後,對於其中的每個頁面模組,我能判斷其使用了哪些標籤。那麼問題來了,我的介面還是那麼讓人糟心,怎麼辦呢?

這裡,我們就要學習一些前端的工具。如果說每乙個網頁的製作都需要我們前端工程師一行一行的把**敲出來,那絕對夠嗆!

我們一定聽說過bootstrap,jquery等等啥的,雖然不知道它有什麼用,或者知道但是不會用。所以,在這裡就得學會,怎麼使用這些已開發好的前端資源。如果我說圖2導航欄圖是我花了一兩分鐘時間做出來的,可信嗎?

圖2導航欄圖

絕對可信,因為僅僅是引用了bootstrap和jquery資源,並從教程上拖拽了一塊導航欄(附件中附有該demo,以及所需的資源包,原始碼有注釋)。

值得一提的是,這裡我們需要做的,並不是跟著教程學習,而是找乙個屬於自己的idea(若無,那麼依然可以仿製,只不過這次徐得保持功能及美觀,但不必全然相保持一致,理由就是同樣的功能實現,在介面上卻可以有不同的展示方式),使用這些工具,去拖拽,想要什麼,從教程上找到相應的模組,拿到後通過不斷的修改實踐並應用,自然而然就會掌握。

值得注意的是,萬不可被教材教程牽著走,前端知識龐大,當然是用什麼即學什麼。

如果說以上這些我們都會了,那麼乙個普通的網頁開發任務,絕對難不倒我們。所以,為什麼該有這部分呢?

理由很簡單,為了高效。能完成乙個前端專案,同時也要注意整個專案週期。因此,前端並不能占有很長的專案週期時間,具體的後台功能實現以及除錯依然為主體,且此過程難免會出現需求的變更而導致需要不斷的修改介面。

因此,為了高效,我們當然得收集資源,即**模板,各種外掛程式,以及注意平時遇到的各種新穎實現的積累。

有了這些,那麼我們即可通過修改模板的方式,快速獲取所需的前端的功能模組。後續不過通過不斷的修改調整,讓其更符合專案需求(附件附有乙份後台前端原始碼模板)。

注: 另文章所提的demo等資源在csdn資源上可所搜到,博主已上傳

思考 感悟 如何學習

在學習的過程中很容易陷入不斷 搜尋 卻忘了 初衷 的陷進中,有時候也會因為過於關注一些細節而忘了走偏了道路。因此,時刻保持清醒就顯得至關重要。上篇文章也記錄了這兩天出現在我腦海裡的兩個字 本質 而剛看到的下面的一段話似乎也跟它對應上了。在此記錄一下,作為學習方法和檢驗標準。學習一項知識,必須要問自己...

如何學習前端

在這家公司工作已經一年半有餘了,中間很長時間都有堅持學習各種各樣的東西,但是個人感覺絕大多數學的東西都忘掉了,或者沒有成記憶體系,後面發現另一位經常學習的小夥伴都有類似的經歷,但是又沒有聽到其他的小夥伴有過類似的抱怨,別人看起來總是輕輕鬆鬆。現在所在的專案組專案比較雜,也沒有所謂的前端大神,剛來的時...

個人c語言感悟

就說說if迴圈裡面的經典句子吧 for example 隨機輸入三個數,令三個數由小到大排列 int main 這一段我的理解是這樣的 把a和b相比,無論a大還是b大,假設a和b各代表乙個數字,如果ab,那就把a和把數字互換輸出 if a if b printf d,d,d a,b,c 其實這個例子...