? ? ? ? ?自學(xué)前端頁面開發(fā)已有一段時間了，基礎(chǔ)的html、css也掌握得差不多了，可以暫且把javascript和jquery放一邊，是該自己動手實踐靜態(tài)小網(wǎng)站的時候了，筆者也是從書上例子到線上開發(fā)視頻到如今自己通過闖無數(shù)坑而建設(shè)一個小項目的。雖然不算是什么大成就，但這對剛?cè)腴T的小白而已，面對自己的小小“處女作”也會倍感興奮^_^
現(xiàn)在來分享我的闖坑經(jīng)驗…
1 Step：收集好頁面的素材（例如圖片素材、文本素材等）
? ? ? ? ?千萬不要忽視這個小步驟，尤其是對像我這樣的剛?cè)腴T小白來說（大牛請自動忽略）。
? ? ? ? 我們必須得注意圖片素材的寬度和高度，確定是否符合你理想中的分辨率和大小。否則就可能會想筆者一樣，寫入img后刷新頁面看到的是一張巨大的圖片，不止不能達到想要的美觀效果，還會阻礙其他盒子的浮動（用float時），結(jié)果心心念念的美好景象就變得亂七八糟一堆。
? ? ? ?另外，由于筆者個人特別粗心的原因，前幾次引入圖片由于分不清楚絕對引用和相對引用的使用導(dǎo)致打雞血式輸入多個img后，才悲慘發(fā)現(xiàn)頁面出現(xiàn)一串錯誤圖片圖標(biāo)又或者頁面還是一片空白，感覺代碼卻被“吃了”。
2 Step：先把所有的html基本標(biāo)簽都寫上（特別是mate標(biāo)簽）
? ? ?這里我建議charset都設(shè)置為utf-8，幾乎是通用了，如果漏了這東西，可能你以后寫出來的只是一堆看不懂的“火星文”了
? ? ?還有每寫一個頭標(biāo)簽最好把相應(yīng)的末標(biāo)簽成堆寫上，html里的標(biāo)簽幾乎都是成對使用的，要是一不小心漏掉了一個，都將會是大麻煩。或許當(dāng)你寫完一大片代碼時，你回頭向檢驗錯誤時，就真的是“大海撈針”的苦逼工作了。
3 Step：設(shè)置基礎(chǔ)標(biāo)簽樣式
? ? ? ? ?為了方便操作，最好在編碼開頭就設(shè)置好這些小標(biāo)簽樣式，例如：body,span,em,p,strong,h1,h2,h3,h4,h5,h6,a:link,a:visited,a:hover 等。
這個小動作將在以后的編碼中默默地發(fā)揮重大作用。
4 Step：建立盒子
? 盒子可以設(shè)置id和class，這取決于你的想法。要注意的是一個id只能被使用一次，而一個class卻可以被使用多次。有時候盒子布局內(nèi)容差不多的情況下，你會發(fā)現(xiàn)直接粘貼復(fù)制盒子和樣式是多么的爽快！
5 Step：（！重點來了）頁面布局的方法
筆者目前水平還不夠大牛，寫的不夠成熟請見諒，還望指點。
在這里我就總結(jié)最熟悉的方式吧____
（1）inline-block 結(jié)合float
display：block/inline/inline-block；
我們都知道html里有塊級元素和內(nèi)聯(lián)元素。塊級元素一般要獨占一行，有寬度和長度；內(nèi)聯(lián)元素則不會獨占一行，知道超過一行的寬度才會自動轉(zhuǎn)行，但它本身沒有長度和寬度。
而display的三個屬性如下：
block：把內(nèi)聯(lián)變塊。
可以實現(xiàn)寬度和高度的設(shè)置，還可以用于一些大標(biāo)題的獨占一行行為。
inline：把塊變內(nèi)聯(lián)。
即可以把幾個盒子并排放于同一行，但不可設(shè)置長度和寬度
inline-block：基本同上，但可以設(shè)置長寬 ?長寬 長寬（重要的事情說三遍）
這個是我用的最多的，基本一個普通小頁面全用它也可以解答大部分問題了。舉個栗子：常見的導(dǎo)航欄的建立就是靠它把每個相盒子設(shè)置相應(yīng)長寬后并排展示，在結(jié)合float：left（一半頁面盒子都是向左浮動的），這樣，一個導(dǎo)航欄就成功啦^ ^
（2）absolute/relative結(jié)合方向距離
position：absolute/relative；
absolute是絕對位置，它是以整個頁面的左上角為參照點的，設(shè)置了absolute后，在用left和top設(shè)置項目距離左上角的左邊、上邊的距離值就可以給項目定位啦啦啦～
雖然使用簡單移動，但是它有個缺點：每個項目的定位都得這么設(shè)置一遍，即使是同一水平上的重復(fù)項目都要重新再設(shè)置一遍，這會導(dǎo)致代碼冗長，而且手也累啊啊啊啊～
relative是相對位置，它是以所在容器的左上角作為參照點的，其后的left與top同上作用。
它就比absolute方便些了，不用再考慮所在盒子以外其他項目占頁面的長度和寬度，只需對盒內(nèi)其他項目的長寬計算得出大概項目的相對距離設(shè)置left和top值就可以了。
題外話：筆者第一次在這發(fā)表小白成長日記，如有不對的地方希望得到大家寶貴的意見，歡迎評論。小白必定會認(rèn)真對待，感謝閱讀*～*
