web開發技巧-網頁排版布局常見問題及解決辦法

      在前端開發過程中比較麻煩的地方其實并不是開發，而是考慮用哪些頁面布局樣式，一個好的布局排版重點突出，看起來舒适不費勁，整體簡潔大方，更重要的是能讓使用者更好的更友善的浏覽網站。今天小千就來給大家介紹幾種常見的布局問題和解決辦法，看看有沒有你用得上的。

      1: 每行文字太多

      使用者在閱讀許多行文字時間久了會引起眼睛的疲勞，在從一行到另一行時讀者不得不經常移動他們的眼睛和頭部，而這種讓人疲憊的布局模式是不受歡迎的,經網絡有關調查表明每行文字保持文字在50 - 60個字元以下,看起來最為舒适,那這就要求在進行文字描述的時候盡可能的簡潔簡短。

      2: 沒有足夠的行間距

      行間距能改善整頁中文字塊的閱讀效果，這樣做是為了當讀者閱讀下一行的時候不會找不到他們的位置.太小太密集的文字可能引起一種受壓迫感。不同的字型需要不同的行間距這很重要。或多或少需要改變版本的高度來降低頁面中文字之間的密集程度,因為頁面中的文本重點突出有引導使用者浏覽的作用,是以要權衡好文本之間的間距也是非常重要的。

      3: 太多的級别的文本沒有區分重點

      在一頁面上有太多的字型可能會使注意力不集中和不能突出重點。頁面中的文字有些是需要突出讓使用者一眼能看到的重要文字,那麼這子產品就要弱化其他的文字,比如通過文本大小,顔色,文本粗細等方式來弱化。太多種字型可能會引起使用者感覺得這個頁面中找不到重點,這可能會使使用者錯過一些重要的東西,是以通常字型的選擇器在3個甚至更少。

      4: 新手程式員對html标簽的文法規則的檢查

      HTML5的文法規則沒有之前版本的嚴格,包容性強大,但是我們盡可能的遵循他的文法規則,而關于标簽的書寫容易丢失的就是标簽中所出現的一些符号容易丢失或者寫成中文符号,比如尖括号,引号,斜杠等,在一個就是标簽之間的嵌套關系,即使是非常熟練的程式員也經常弄錯嵌套關系,有時候并不是自己寫錯了嵌套關系,而是因為丢失了某一個符号引起的,比如斜杆。

      5、檢查CSS文法是否正确

      CSS的文法首先是選擇器{屬性:值;} 這條語句中出現的符号都是英文符号,常見的是拼寫錯誤,冒汗成了等号,丢失分号,丢失大括号等。可以在浏覽器中打開開發者工具中審查,錯誤的寫法會直接展現出來可以利用CleanCSS工具來檢查 CSS的拼寫錯誤

      6、快速找出錯誤子產品

      經常看到有小夥伴在寫也頁面的時候發現底下的元素突然跑到了已經寫好的區域,或者嵌套關系出現了問題,這時候打亂了整個頁面的布局結構，這時候我們可以使用排除法,通常在開發都是子產品化開發,隻要按照順序将每個子產品的div逐個注釋掉,直到注釋掉某個子產品後頁面顯示正常,則最後注釋掉的子產品就是錯誤發生的子產品。

      7、頁面樣式初始化

      我們都知道html中有些标簽帶有預設的内外邊距或者間距,這些間距是我們不需要的,同時在不同的浏覽器中某些間距解析大小還不一緻,這就極大的影響我們對頁面的布局,這些屬性包括margin、padding等。是以最好在開發前根據需求将出現的标簽對應的取消他們的預設margin、padding值,将他們的值設定為0等。

      上面七條就是比較常見的頁面布局會遇到的問題，其實還有很多布局過程中會遇到的問題，經驗豐富的開發者都有自己的一套解決辦法，平時多做項目練習就好，最後如果你對前端開發感興趣的話不妨來千鋒成都web前端教育訓練班參加我們的前端教育訓練課程的學習，為期兩周的免費試聽，更有免費學習資料可以領取，趕緊來找線上老師了解一下吧。