前言
有段時間沒寫點什么了，也確實最近在忙些事情肝断。但是，我一直覺得人吸收知識就像牛吃草一樣。先吞下去存儲在胃里胸懈，然后過段時間再取出來咀嚼幾番鱼蝉，最后才能吸收。而我咀嚼的方式就是將學(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)威點的汇竭，像w3school、菜鳥教程什么的穴张，界面也比較清爽细燎，知識與實踐配套結(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)歷來舉個例子谜诫。
這是官方的樣例：
這是我的作品（其實我是個偽歌迷=漾峡。=）：
是不是看起來差不多，至少在預(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í)的過程中一定要有想法Ｄ婧Α（重要的事情說三遍）尤其是在軟件這一行藏古，我們應(yīng)該迫不及待地將學(xué)到的東西應(yīng)用起來。無論是公益性的忍燥，還是你準(zhǔn)備用來盈利的拧晕，只有做出來才會真正有所收獲。
以上內(nèi)容歡迎分享梅垄。如需轉(zhuǎn)載厂捞，請簡信聯(lián)系。謝謝大家队丝！
