關于排版布局,好的頁面排版重點突出,看起來舒適不費勁,整體簡潔大方,更重要的是能讓用戶更好的更方便的瀏覽網站,而在書寫的過程中,無論你寫的是什么代碼,都會犯一些小錯誤,而小錯誤往往不起眼難以引起注意,結果花大量的時間來調試和排錯.查看下面這份CSS網頁布局中易犯的7個小錯誤，努力的修正可能會犯的錯誤，加速你的前端開發效率。所以列舉以下網頁在排版中常見的問題

　　**1: 每行文字太多**

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

　　**2: 沒有足夠的行間距**

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

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

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

　　**4: 新手程序員對html標簽的語法規則的檢查**

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

　　**5、檢查CSS語法是否正確**

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

　　**6、快速找出錯誤模塊**

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

　　**7、頁面樣式初始化**

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

　　上面的網站布局方式只是一些常見的企業類網站頁面布局，布局的方式還有更多。實際上，布局就像是擺積木，只要遵循重要信息靠左、靠上，次要信息靠右、靠下的原則即可，并沒有規定一定要怎么布局，或者這種布局方式要比那種更好，只能說某種布局方式更為合適某個頁面而已。所以，大家多做嘗試，從你手頭正在做的項目開始，嘗試一下不同的布局方式，給你的設計增加一些創意和新鮮感。更多關于web培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。