頁(yè)面布局的選擇是用戶能夠直觀感受到的第一印象，簡(jiǎn)潔大方能夠讓用戶更快速的在網(wǎng)站找到想要的資源，但往往一些新手web前端開(kāi)發(fā)者經(jīng)常會(huì)出現(xiàn)一些排版上面的問(wèn)題，今天小千就來(lái)給大家總結(jié)一下，提供給大家參考。

web前端培訓(xùn)" />

      1: 每行文字太多

      用戶在閱讀許多行文字時(shí)間久了會(huì)引起眼睛的疲勞，在從一行到另一行時(shí)讀者不得不經(jīng)常移動(dòng)他們的眼睛和頭部，而這種讓人疲憊的布局模式是不受歡迎的,經(jīng)網(wǎng)絡(luò)有關(guān)調(diào)查表明每行文字保持文字在50 - 60個(gè)字符以下,看起來(lái)最為舒適,那這就要求在進(jìn)行文字描述的時(shí)候盡可能的簡(jiǎn)潔簡(jiǎn)短。

      2: 沒(méi)有足夠的行間距

      行間距能改善整頁(yè)中文字塊的閱讀效果，這樣做是為了當(dāng)讀者閱讀下一行的時(shí)候不會(huì)找不到他們的位置.太小太密集的文字可能引起一種受壓迫感。不同的字體需要不同的行間距這很重要?；蚨嗷蛏傩枰淖儼姹镜母叨葋?lái)降低頁(yè)面中文字之間的密集程度,因?yàn)轫?yè)面中的文本重點(diǎn)突出有引導(dǎo)用戶瀏覽的作用,所以要權(quán)衡好文本之間的間距也是非常重要的。

      3: 太多的級(jí)別的文本沒(méi)有區(qū)分重點(diǎn)

      在一頁(yè)面上有太多的字體可能會(huì)使注意力不集中和不能突出重點(diǎn)。頁(yè)面中的文字有些是需要突出讓用戶一眼能看到的重要文字,那么這模塊就要弱化其他的文字,比如通過(guò)文本大小,顏色,文本粗細(xì)等方式來(lái)弱化。太多種字體可能會(huì)引起用戶感覺(jué)得這個(gè)頁(yè)面中找不到重點(diǎn),這可能會(huì)使用戶錯(cuò)過(guò)一些重要的東西,所以通常字體的選擇器在3個(gè)甚至更少。

      4: 新手程序員對(duì)html標(biāo)簽的語(yǔ)法規(guī)則的檢查

      HTML5的語(yǔ)法規(guī)則沒(méi)有之前版本的嚴(yán)格,包容性強(qiáng)大,但是我們盡可能的遵循他的語(yǔ)法規(guī)則,而關(guān)于標(biāo)簽的書(shū)寫(xiě)容易丟失的就是標(biāo)簽中所出現(xiàn)的一些符號(hào)容易丟失或者寫(xiě)成中文符號(hào),比如尖括號(hào),引號(hào),斜杠等,在一個(gè)就是標(biāo)簽之間的嵌套關(guān)系,即使是非常熟練的程序員也經(jīng)常弄錯(cuò)嵌套關(guān)系,有時(shí)候并不是自己寫(xiě)錯(cuò)了嵌套關(guān)系,而是因?yàn)閬G失了某一個(gè)符號(hào)引起的,比如斜桿。

      5、檢查CSS語(yǔ)法是否正確

      CSS的語(yǔ)法首先是選擇器{屬性:值;} 這條語(yǔ)句中出現(xiàn)的符號(hào)都是英文符號(hào),常見(jiàn)的是拼寫(xiě)錯(cuò)誤,冒汗成了等號(hào),丟失分號(hào),丟失大括號(hào)等。可以在瀏覽器中打開(kāi)開(kāi)發(fā)者工具中審查,錯(cuò)誤的寫(xiě)法會(huì)直接體現(xiàn)出來(lái)可以利用CleanCSS工具來(lái)檢查 CSS的拼寫(xiě)錯(cuò)誤

      6、快速找出錯(cuò)誤模塊

      經(jīng)常看到有小伙伴在寫(xiě)也頁(yè)面的時(shí)候發(fā)現(xiàn)底下的元素突然跑到了已經(jīng)寫(xiě)好的區(qū)域,或者嵌套關(guān)系出現(xiàn)了問(wèn)題,這時(shí)候打亂了整個(gè)頁(yè)面的布局結(jié)構(gòu)，這時(shí)候我們可以使用排除法,通常在開(kāi)發(fā)都是模塊化開(kāi)發(fā),只要按照順序?qū)⒚總€(gè)模塊的div逐個(gè)注釋掉,直到注釋掉某個(gè)模塊后頁(yè)面顯示正常,則最后注釋掉的模塊就是錯(cuò)誤發(fā)生的模塊。

      7、頁(yè)面樣式初始化

      我們都知道html中有些標(biāo)簽帶有默認(rèn)的內(nèi)外邊距或者間距,這些間距是我們不需要的,同時(shí)在不同的瀏覽器中某些間距解析大小還不一致,這就極大的影響我們對(duì)頁(yè)面的布局,這些屬性包括margin、padding等。因此最好在開(kāi)發(fā)前根據(jù)需求將出現(xiàn)的標(biāo)簽對(duì)應(yīng)的取消他們的默認(rèn)margin、padding值,將他們的值設(shè)置為0等。

      不要小看這些問(wèn)題，在開(kāi)發(fā)過(guò)程中往往就是這些小問(wèn)題匯聚成一個(gè)大問(wèn)題，最終導(dǎo)致你的網(wǎng)站開(kāi)發(fā)過(guò)程出現(xiàn)問(wèn)題。最后歡迎對(duì)web前端開(kāi)發(fā)培訓(xùn)感興趣的同學(xué)來(lái)到千鋒大前端培訓(xùn)班參加我們的前端培訓(xùn)課程的學(xué)習(xí)，更是加入了鴻蒙系統(tǒng)開(kāi)發(fā)課程，還有兩周免費(fèi)試聽(tīng)讓你提前感受課堂氛圍，現(xiàn)在咨詢?cè)诰€老師還有免費(fèi)學(xué)習(xí)資料可以領(lǐng)取，趕緊來(lái)看看吧。

千鋒web前端培訓(xùn)班：http://m.2667701.com/page/html5.html

6、快速找出錯(cuò)誤模塊