网页制作中的背景处理

  在制作网页过程中,经常需要考虑页面中的留白问题,因为我们设计时,按大多数用户显示器的设置来制作内容区,即横向分辨率的设置是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 == ‘image‘) 
    
    //改变背景图片
      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>‘);

 

本文出自 “CSharp” 博客,请务必保留此出处http://dawn0919.blog.51cto.com/2954252/1431696

网页制作中的背景处理,布布扣,bubuko.com

网页制作中的背景处理

上一篇:vue根据状态改变文字颜色


下一篇:PHP-设计模式-单例模式