網頁製作中的背景處理

  在製作網頁過程中,經常需要考慮頁面中的留白問題,因爲我們設計時,按大多數用戶顯示器的設置來製作內容區,即橫向分辨率的設置是1024像素,可是用戶設置是多樣化的比如有的用戶是1280、1440、1600、1680等,內容區之外會有很多的留白,爲了美觀起見,不可避免地需要對留白區進行一些處理。
  下面是一般的做法。
  1、用一個圖片來做背景,其餘的地方填充顏色。
    ①背景圖很大,不鋪;
    ②背景圖片很長,只是橫向鋪而縱向不鋪;
    ③一張圖片橫向縱向都鋪。
    根據效果選擇,關鍵是背景圖片的處理。
  2、留白的地方要多樣化,可以用多個垂直疊放的DIV來處理,中間內容區域都設置爲996px,DIV裏面的背景圖可以按照1所列的方法,這樣的效果是比較理想的,就是選擇和處理背景圖片需要一些功夫。
  3、採用腳本控制,判斷用戶設置的橫向分辨率如果大於1024,則DIV顯示,否則就不顯示。
  先把一些處理寫成樣式,然後
  if(screen.width>=1024){
     document.write("<style type='text/css'>樣式表的內容</style>");
  }
  或者應用Jquery進行屬性的修改.

  有時候根據需要進行背景變換,那麼可以通過腳本來實現。
  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>');

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章