? ? ? ? ?自學(xué)前端頁面開發(fā)已有一段時(shí)間了，基礎(chǔ)的html、css也掌握得差不多了症杏，可以暫且把javascript和jquery放一邊，是該自己動(dòng)手實(shí)踐靜態(tài)小網(wǎng)站的時(shí)候了莲趣，筆者也是從書上例子到線上開發(fā)視頻到如今自己通過闖無數(shù)坑而建設(shè)一個(gè)小項(xiàng)目的鸳慈。雖然不算是什么大成就，但這對(duì)剛?cè)腴T的小白而已喧伞，面對(duì)自己的小小“處女作”也會(huì)倍感興奮^_^

現(xiàn)在來分享我的闖坑經(jīng)驗(yàn)…

1 Step：收集好頁面的素材（例如圖片素材走芋、文本素材等）

? ? ? ? ?千萬不要忽視這個(gè)小步驟绩郎，尤其是對(duì)像我這樣的剛?cè)腴T小白來說（大牛請(qǐng)自動(dòng)忽略）。

? ? ? ? 我們必須得注意圖片素材的寬度和高度翁逞，確定是否符合你理想中的分辨率和大小肋杖。否則就可能會(huì)想筆者一樣，寫入img后刷新頁面看到的是一張巨大的圖片挖函，不止不能達(dá)到想要的美觀效果状植，還會(huì)阻礙其他盒子的浮動(dòng)（用float時(shí)），結(jié)果心心念念的美好景象就變得亂七八糟一堆怨喘。

? ? ? ?另外津畸，由于筆者個(gè)人特別粗心的原因，前幾次引入圖片由于分不清楚絕對(duì)引用和相對(duì)引用的使用導(dǎo)致打雞血式輸入多個(gè)img后必怜，才悲慘發(fā)現(xiàn)頁面出現(xiàn)一串錯(cuò)誤圖片圖標(biāo)又或者頁面還是一片空白肉拓，感覺代碼卻被“吃了”。

2 Step：先把所有的html基本標(biāo)簽都寫上（特別是mate標(biāo)簽）

? ? ?這里我建議charset都設(shè)置為utf-8梳庆，幾乎是通用了暖途，如果漏了這東西，可能你以后寫出來的只是一堆看不懂的“火星文”了

? ? ?還有每寫一個(gè)頭標(biāo)簽最好把相應(yīng)的末標(biāo)簽成堆寫上膏执，html里的標(biāo)簽幾乎都是成對(duì)使用的驻售，要是一不小心漏掉了一個(gè)，都將會(huì)是大麻煩更米∑劾酰或許當(dāng)你寫完一大片代碼時(shí)，你回頭向檢驗(yàn)錯(cuò)誤時(shí)壳快，就真的是“大海撈針”的苦逼工作了纸巷。

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 等。

這個(gè)小動(dòng)作將在以后的編碼中默默地發(fā)揮重大作用梯啤。

4 Step：建立盒子

? 盒子可以設(shè)置id和class竖伯，這取決于你的想法。要注意的是一個(gè)id只能被使用一次因宇，而一個(gè)class卻可以被使用多次七婴。有時(shí)候盒子布局內(nèi)容差不多的情況下，你會(huì)發(fā)現(xiàn)直接粘貼復(fù)制盒子和樣式是多么的爽快察滑！

5 Step：（打厘！重點(diǎn)來了）頁面布局的方法

筆者目前水平還不夠大牛，寫的不夠成熟請(qǐng)見諒贺辰，還望指點(diǎn)户盯。

在這里我就總結(jié)最熟悉的方式吧____

（1）inline-block 結(jié)合float

display：block/inline/inline-block嵌施；

我們都知道html里有塊級(jí)元素和內(nèi)聯(lián)元素。塊級(jí)元素一般要獨(dú)占一行莽鸭，有寬度和長度吗伤；內(nèi)聯(lián)元素則不會(huì)獨(dú)占一行，知道超過一行的寬度才會(huì)自動(dòng)轉(zhuǎn)行硫眨，但它本身沒有長度和寬度足淆。

而display的三個(gè)屬性如下：

block：把內(nèi)聯(lián)變塊。

可以實(shí)現(xiàn)寬度和高度的設(shè)置礁阁，還可以用于一些大標(biāo)題的獨(dú)占一行行為巧号。

inline：把塊變內(nèi)聯(lián)。

即可以把幾個(gè)盒子并排放于同一行姥闭，但不可設(shè)置長度和寬度

inline-block：基本同上裂逐，但可以設(shè)置長寬 ?長寬 長寬（重要的事情說三遍）

這個(gè)是我用的最多的，基本一個(gè)普通小頁面全用它也可以解答大部分問題了泣栈。舉個(gè)栗子：常見的導(dǎo)航欄的建立就是靠它把每個(gè)相盒子設(shè)置相應(yīng)長寬后并排展示卜高，在結(jié)合float：left（一半頁面盒子都是向左浮動(dòng)的），這樣南片，一個(gè)導(dǎo)航欄就成功啦^ ^

（2）absolute/relative結(jié)合方向距離

position：absolute/relative掺涛；

absolute是絕對(duì)位置，它是以整個(gè)頁面的左上角為參照點(diǎn)的疼进，設(shè)置了absolute后薪缆，在用left和top設(shè)置項(xiàng)目距離左上角的左邊、上邊的距離值就可以給項(xiàng)目定位啦啦啦～

雖然使用簡單移動(dòng)伞广，但是它有個(gè)缺點(diǎn)：每個(gè)項(xiàng)目的定位都得這么設(shè)置一遍拣帽，即使是同一水平上的重復(fù)項(xiàng)目都要重新再設(shè)置一遍，這會(huì)導(dǎo)致代碼冗長嚼锄，而且手也累啊啊啊啊～

relative是相對(duì)位置减拭，它是以所在容器的左上角作為參照點(diǎn)的，其后的left與top同上作用区丑。

它就比absolute方便些了拧粪，不用再考慮所在盒子以外其他項(xiàng)目占頁面的長度和寬度，只需對(duì)盒內(nèi)其他項(xiàng)目的長寬計(jì)算得出大概項(xiàng)目的相對(duì)距離設(shè)置left和top值就可以了沧侥。

題外話：筆者第一次在這發(fā)表小白成長日記可霎，如有不對(duì)的地方希望得到大家寶貴的意見，歡迎評(píng)論宴杀。小白必定會(huì)認(rèn)真對(duì)待癣朗，感謝閱讀*～*