Web前端技術分享：網頁排版佈局常見問題彙總

      頁面佈局的選擇是使用者能夠直觀感受到的第一印象，簡潔大方能夠讓使用者更快速的在網站找到想要的資源，但往往一些新手 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前端開發感興趣的同學關注小千，後期會繼續分享更多web前端知識。

      本文來自千鋒教育，轉載請註明出處。