前言
有段時間沒寫點(diǎn)什么了，也確實(shí)最近在忙些事情。但是，我一直覺得人吸收知識就像牛吃草一樣。先吞下去存儲在胃里，然后過段時間再取出來咀嚼幾番，最后才能吸收。而我咀嚼的方式就是將學(xué)習(xí)的東西寫出來。首先，原諒我用了個這么高大上的標(biāo)題。然而，這并不是一篇高屋建瓴的文章。這只是一個前端初學(xué)者的學(xué)習(xí)感悟。最近沉浸在枯燥的數(shù)據(jù)挖掘算法太久，所以便跳出來尋找其他知識來汲取些“水分”。然后，在Github上無聊翻翻的時候，便對前端技術(shù)產(chǎn)生了興趣。
準(zhǔn)備工作
“工欲善其事，必先利其器”。我們學(xué)習(xí)一門新的技術(shù)，當(dāng)然希望先準(zhǔn)備好相應(yīng)的環(huán)境，以及完備的指導(dǎo)資料。打開百度，輸入“前端學(xué)習(xí)”、“html+css+js”什么的就會蹦出一堆學(xué)習(xí)網(wǎng)站任君挑選。權(quán)威點(diǎn)的，像w3school、菜鳥教程什么的，界面也比較清爽，知識與實(shí)踐配套結(jié)合，都很適合初學(xué)者學(xué)習(xí)。但是，我在這里還是要安利另一個學(xué)習(xí)網(wǎng)站：FreeCodeCamp。這是個Github上的老牌項目了，11萬+的Star也充分說明了其受歡迎的程度。感興趣的同學(xué)可以通過這個傳送門了解下。
開始學(xué)習(xí)
至此，我們正式進(jìn)入學(xué)習(xí)階段。你以為我要照著教程開始教你從標(biāo)簽開始認(rèn)起了嗎？當(dāng)然不可能。這些FreeCodeCamp上都有。我們直接跳到第一個任務(wù)：Build a Tribute Page。相比前面的提示性操作不同，這個任務(wù)完全讓我們自由發(fā)揮。當(dāng)然，他提供了一個示例頁面。參考頁面的大致外觀可以，但是千萬不要直接去看源碼！然后你會發(fā)現(xiàn)，即使一個簡單的靜態(tài)頁面，如何去設(shè)計它也是一門藝術(shù)。下面我便通過自己的經(jīng)歷來舉個例子。
這是官方的樣例：
這是我的作品（其實(shí)我是個偽歌迷=。=）：
是不是看起來差不多，至少在預(yù)覽效果上來看是這樣的?？墒?，當(dāng)我興致沖沖地把我的作品發(fā)給朋友看的時候，卻顯示了一個圖歪字斜的亂七八糟的頁面（捂臉）。為什么會這樣，我們看看兩個頁面的開頭就知道了。
官方的開頭：
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
我的開頭：
<div class="bodycolor">
<div>
此外，在圖片的引用中，我也沒有加入自適應(yīng)相關(guān)的類。所以，相比之下，我對于整個頁面布局的設(shè)計太簡陋了。痛定思痛，我便去查閱了一些相關(guān)資料。然后才了解到，W3C組織建議把所有網(wǎng)頁上的對像放在一個盒(box)中，也就是我們常說的盒模型。盒模型中主要定義了四個區(qū)域：外邊距(margin)、邊框(border)、內(nèi)容(content)、內(nèi)邊距(padding)。為了方便理解，我選取了兩個圖，分別從平面和3D的角度來解析這個盒模型：
網(wǎng)頁的設(shè)計不是單單文字、圖片的堆砌，它就像人的臉。首先，我們要把五官擺正。然后，我們再去選擇使用丹鳳眼、柳葉眉和櫻桃口等樣式組合成一張我們理想的臉。
最后再說幾句
學(xué)習(xí)的過程中一定要有想法！學(xué)習(xí)的過程中一定要有想法！學(xué)習(xí)的過程中一定要有想法?。ㄖ匾氖虑檎f三遍）尤其是在軟件這一行，我們應(yīng)該迫不及待地將學(xué)到的東西應(yīng)用起來。無論是公益性的，還是你準(zhǔn)備用來盈利的，只有做出來才會真正有所收獲。
以上內(nèi)容歡迎分享。如需轉(zhuǎn)載，請簡信聯(lián)系。謝謝大家！
