在前端開發(fā)過程中比較麻煩的地方其實并不是開發(fā)，而是考慮用哪些頁面布局樣式，一個好的布局排版重點突出，看起來舒適不費勁，整體簡潔大方，更重要的是能讓用戶更好的更方便的瀏覽網(wǎng)站。今天小千就來給大家介紹幾種常見的布局問題和解決辦法，看看有沒有你用得上的。
web前端培訓(xùn)" />
1: 每行文字太多
用戶在閱讀許多行文字時間久了會引起眼睛的疲勞，在從一行到另一行時讀者不得不經(jīng)常移動他們的眼睛和頭部，而這種讓人疲憊的布局模式是不受歡迎的,經(jīng)網(wǎng)絡(luò)有關(guān)調(diào)查表明每行文字保持文字在50 - 60個字符以下,看起來最為舒適,那這就要求在進行文字描述的時候盡可能的簡潔簡短。
2: 沒有足夠的行間距
行間距能改善整頁中文字塊的閱讀效果，這樣做是為了當(dāng)讀者閱讀下一行的時候不會找不到他們的位置.太小太密集的文字可能引起一種受壓迫感。不同的字體需要不同的行間距這很重要?；蚨嗷蛏傩枰淖儼姹镜母叨葋斫档晚撁嬷形淖种g的密集程度,因為頁面中的文本重點突出有引導(dǎo)用戶瀏覽的作用,所以要權(quán)衡好文本之間的間距也是非常重要的。
3: 太多的級別的文本沒有區(qū)分重點
在一頁面上有太多的字體可能會使注意力不集中和不能突出重點。頁面中的文字有些是需要突出讓用戶一眼能看到的重要文字,那么這模塊就要弱化其他的文字,比如通過文本大小,顏色,文本粗細(xì)等方式來弱化。太多種字體可能會引起用戶感覺得這個頁面中找不到重點,這可能會使用戶錯過一些重要的東西,所以通常字體的選擇器在3個甚至更少。
4: 新手程序員對html標(biāo)簽的語法規(guī)則的檢查
HTML5的語法規(guī)則沒有之前版本的嚴(yán)格,包容性強大,但是我們盡可能的遵循他的語法規(guī)則,而關(guān)于標(biāo)簽的書寫容易丟失的就是標(biāo)簽中所出現(xiàn)的一些符號容易丟失或者寫成中文符號,比如尖括號,引號,斜杠等,在一個就是標(biāo)簽之間的嵌套關(guān)系,即使是非常熟練的程序員也經(jīng)常弄錯嵌套關(guān)系,有時候并不是自己寫錯了嵌套關(guān)系,而是因為丟失了某一個符號引起的,比如斜桿。
5、檢查CSS語法是否正確
CSS的語法首先是選擇器{屬性:值;} 這條語句中出現(xiàn)的符號都是英文符號,常見的是拼寫錯誤,冒汗成了等號,丟失分號,丟失大括號等?？梢栽跒g覽器中打開開發(fā)者工具中審查,錯誤的寫法會直接體現(xiàn)出來可以利用CleanCSS工具來檢查 CSS的拼寫錯誤
6、快速找出錯誤模塊
經(jīng)?？吹接行』锇樵趯懸岔撁娴臅r候發(fā)現(xiàn)底下的元素突然跑到了已經(jīng)寫好的區(qū)域,或者嵌套關(guān)系出現(xiàn)了問題,這時候打亂了整個頁面的布局結(jié)構(gòu)，這時候我們可以使用排除法,通常在開發(fā)都是模塊化開發(fā),只要按照順序?qū)⒚總€模塊的div逐個注釋掉,直到注釋掉某個模塊后頁面顯示正常,則最后注釋掉的模塊就是錯誤發(fā)生的模塊。
7、頁面樣式初始化
我們都知道html中有些標(biāo)簽帶有默認(rèn)的內(nèi)外邊距或者間距,這些間距是我們不需要的,同時在不同的瀏覽器中某些間距解析大小還不一致,這就極大的影響我們對頁面的布局,這些屬性包括margin、padding等。因此最好在開發(fā)前根據(jù)需求將出現(xiàn)的標(biāo)簽對應(yīng)的取消他們的默認(rèn)margin、padding值,將他們的值設(shè)置為0等。
上面七條就是比較常見的頁面布局會遇到的問題，其實還有很多布局過程中會遇到的問題，經(jīng)驗豐富的開發(fā)者都有自己的一套解決辦法，平時多做項目練習(xí)就好，最后如果你對前端開發(fā)感興趣的話不妨來千鋒web前端培訓(xùn)班參加我們的前端培訓(xùn)課程的學(xué)習(xí)，為期兩周的免費試聽，更有免費學(xué)習(xí)資料可以領(lǐng)取，趕緊來找在線老師了解一下吧。
京公網(wǎng)安備 11010802030320號