DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 制作的網頁在浏覽時下方有多余的空白如何消除
制作的網頁在浏覽時下方有多余的空白如何消除
編輯:前端技巧     

在使用dreamweaver或者frontpage來制作HTML網頁時,我們有可能會遇到這樣的問題:在軟件中好好的網頁一旦放到浏覽器中,就會在網頁的下方莫名其妙的多出來或多或少的空白。那麼這種空白又要怎麼去消除呢?
起先我以為只要在網頁的代碼中加一個CSS來約束一下網頁的高度就行了,事實證明這樣是行不通的。

原因:

首先我們要知道,用軟件來寫網頁的話,大多數都是通過圖形化的界面來“堆”網頁,這樣堆網頁的話,在創建層或者表格的時候,軟件給層或者表格定義的高度往往會超出我們所想要的高度,但是在軟件上是看不出來的;然而,當我們在浏覽器中打開網頁的時候,我們就會發現,軟件中不存在的空白就會在浏覽器中顯示出來。

而不能僅僅通過添加一個html{height:XX px;}來約束網頁的高度,是因為在網頁中,嵌套在元素內部的其他元素的特性會具有更高的優先級。例如:你如果在同一個網頁中有如下代碼:body{font-size:10px;} p {font-size:9px;}那麼該網頁<p>元素中字體大小就應該是9px而不是10px了。由於這個規則的存在,網頁中層的總高度大於html{height:XX px;}中XX的值時,html{height:XX px;}也就自然沒有作用了。

解決方式:

像這種用軟件寫的網頁代碼,通過去尋找CSS中關於層或者表格高度的定義,然後修改高度的值,就能去掉網頁中不必要的空白了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved