在製做網頁過程當中,常常須要考慮頁面中的留白問題,由於咱們設計時,按大多數用戶顯示器的設置來製做內容區,即橫向分辨率的設置是1024像素,但是用戶設置是多樣化的好比有的用戶是1280、1440、1600、1680等,內容區以外會有不少的留白,爲了美觀起見,不可避免地須要對留白區進行一些處理。
下面是通常的作法。
一、用一個圖片來作背景,其他的地方填充顏色。
①背景圖很大,不鋪;
②背景圖片很長,只是橫向鋪而縱向不鋪;
③一張圖片橫向縱向都鋪。
根據效果選擇,關鍵是背景圖片的處理。
二、留白的地方要多樣化,能夠用多個垂直疊放的DIV來處理,中間內容區域都設置爲996px,DIV裏面的背景圖能夠按照1所列的方法,這樣的效果是比較理想的,就是選擇和處理背景圖片須要一些功夫。
三、採用腳本控制,判斷用戶設置的橫向分辨率若是大於1024,則DIV顯示,不然就不顯示。
先把一些處理寫成樣式,而後
if(screen.width>=1024){
document.write("<style type='text/css'>樣式表的內容</style>");
}
或者應用Jquery進行屬性的修改.css
有時候根據須要進行背景變換,那麼能夠經過腳原本實現。
function ChangeBG(SSelect)
{
if(SSelect == 'color')
{
//改變背景色
document.body.style.backgroundColor="顏色代碼";
}
if(SSelect == 'p_w_picpath')
{
//改變背景圖片
document.body.style.backgroundImage="url(圖片路徑和名稱)";
}
}
在對DIV進行背景鋪設時,也能夠用腳原本控制顯示背景。
隨機背景:
var BgPic = [];
BgPic[0] = "圖片路徑和名稱1";
BgPic[1] = "圖片路徑和名稱2";
BgPic[2] = "圖片路徑和名稱3";
var IRand = Math.round( Math.random() * 3 );
document.write('<style>body{background:url(' + BgPic[IRand] + ');background-repeat:repeat-x;background-color:#e7e7e7; }</style>');dom