同學(xué)們?cè)趯W(xué)習(xí)完HTML+CSS之后就摩拳擦掌的想要嘗試寫(xiě)一個(gè)靜態(tài)頁(yè)面了，但真正上手的時(shí)候就不知道該怎么做了，今天小千就來(lái)教大家頁(yè)面布局的技巧，幫助大家開(kāi)發(fā)一個(gè)靜態(tài)頁(yè)面。
我們通過(guò)一個(gè)具體的案例來(lái)給大家說(shuō)一下布局的一些技巧：
假設(shè)，這是我們要布局的一個(gè)首頁(yè)：
第一步：看
拿到一個(gè)網(wǎng)頁(yè)或一個(gè)整站的網(wǎng)頁(yè)后，我們應(yīng)該大致瀏覽一遍，做到心里有數(shù)（例如網(wǎng)頁(yè)的復(fù)雜程度，交互效果等）
第二步：找出網(wǎng)頁(yè)的版心部分
第三步：劃分網(wǎng)頁(yè)的版塊
思路：運(yùn)用我們最熟悉的div標(biāo)簽將最大的版塊劃分出來(lái)
第四步：在大板塊里面劃分小版塊
例如：我們的優(yōu)勢(shì)這個(gè)版塊
然后在小版塊里面再填充具體內(nèi)容
第五步：觀察是否有可以復(fù)用的樣式（寫(xiě)好一個(gè)樣式，只有添加相同的class名即可）
例如：
以上三部分字體大小，顏色有相似之處，就可以復(fù)用。重復(fù)以上幾步來(lái)布局我們的網(wǎng)頁(yè)就會(huì)變得很簡(jiǎn)單了。
然后我們?cè)賮?lái)說(shuō)說(shuō)填充版塊里面的內(nèi)容有什么技巧呢？
一定要按照一定的規(guī)律來(lái)，就不會(huì)亂了。
遇到文本——字體大?。╢ont-size）,字體顏色（color）,行高（line-height）,是否需要居中（text-align:center）；遇到版塊——如果需要設(shè)置距離（考慮使用margin或padding）。
希望以上的講述，可以幫助到剛?cè)腴T的小伙伴們，更好的布局頁(yè)面。最后想學(xué)習(xí)學(xué)習(xí)web前端的同學(xué)，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開(kāi)發(fā)工程師，web前端高級(jí)開(kāi)發(fā)工程師，后面的web前端大神級(jí)開(kāi)發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開(kāi)發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開(kāi)發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838 加群找群管理領(lǐng)取即可，等你來(lái)哦~~
京公網(wǎng)安備 11010802030320號(hào)