同學(xué)們在學(xué)習(xí)完HTML+CSS之后就摩拳擦掌的想要嘗試寫一個(gè)靜態(tài)頁面了，但真正上手的時(shí)候就不知道該怎么做了，今天小千就來教大家頁面布局的技巧，幫助大家開發(fā)一個(gè)靜態(tài)頁面。

      我們通過一個(gè)具體的案例來給大家說一下布局的一些技巧：

      假設(shè)，這是我們要布局的一個(gè)首頁：

      第一步：看

      拿到一個(gè)網(wǎng)頁或一個(gè)整站的網(wǎng)頁后，我們應(yīng)該大致瀏覽一遍，做到心里有數(shù)（例如網(wǎng)頁的復(fù)雜程度，交互效果等）

      第二步：找出網(wǎng)頁的版心部分

      第三步：劃分網(wǎng)頁的版塊

      思路：運(yùn)用我們最熟悉的div標(biāo)簽將最大的版塊劃分出來

      第四步：在大板塊里面劃分小版塊

      例如：我們的優(yōu)勢這個(gè)版塊

      然后在小版塊里面再填充具體內(nèi)容

      第五步：觀察是否有可以復(fù)用的樣式（寫好一個(gè)樣式，只有添加相同的class名即可）

      例如：

      以上三部分字體大小，顏色有相似之處，就可以復(fù)用。重復(fù)以上幾步來布局我們的網(wǎng)頁就會變得很簡單了。

      然后我們再來說說填充版塊里面的內(nèi)容有什么技巧呢？

      一定要按照一定的規(guī)律來，就不會亂了。

      遇到文本——字體大?。╢ont-size）,字體顏色（color）,行高（line-height）,是否需要居中（text-align:center）；遇到版塊——如果需要設(shè)置距離（考慮使用margin或padding）。

      希望以上的講述，可以幫助到剛?cè)腴T的小伙伴們，更好的布局頁面。最后想學(xué)習(xí)學(xué)習(xí)web前端的同學(xué)，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~