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

网页制作中的背景处理相关推荐

  1. html中的ps,网页制作中PS图像处理的应用

    网页制作中PS图像处理的应用 photoshop是一个功能强大的图像处理软件,可以对各种格式的图像文件进行非常精细与独特的处理,不仅适用于广告用图.美术摄影作品的处理,也广泛用于网页图像元素的处理.下 ...

  2. web网页制作中常用到的图片格式及jpg,png,gif各自格式的特点

    网页制作中图片格式 常用三种格式(jpg,png,gif) 1jpg图片 是我们最常见的. jpg:可压缩的,有损图片质量的格式.虽然可压缩,它的色彩还是比较丰富. 特点:文件小.色彩丰富. 在网页中 ...

  3. html网页在指定位置嵌入表格,网页制作中表格的主要作用 网页制作中插入表格怎么调整位置...

    在网页设计中,表格有什么重要作用 1.当需要提交所有数据时,可以提交整个100个表,如果不使用表,可以逐个提交. 2.表格设计简洁美观,方形,与网页的设计非常一致. 3.网站其实是一个大版本的表格,数 ...

  4. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  5. 网页制作中规范使用DIV+CSS命名规则(转)

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header  如:#header{属性:属性值;}或.h ...

  6. 网页制作中绝对路径和相对路径的区别

    网页制作中绝对路径和相对路径的区别 http://www.veryhuo.com 烈火网 2012-10-10 投递稿件 做个开发的人,对于文件或者文件夹的定义都是有一定的规范的,比如建立一个网站前端 ...

  7. audio插入背景音乐_网页制作中的html插入背景音乐

    网页制作中的 html 插入背景音乐方法有很多,具体如下: 第一种:在页面代码中的 之间加入 src=" 音乐 url" loop="-1"> 这段代 码 ...

  8. 【转】网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思啊?请说明啊,谢谢有什么功能?...

    网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思啊?请说明啊,谢谢有什么功能? <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(" ...

  9. 网页设计中的背景流行趋势是什么?

    网页设计领域发展的非常快,每年的网站设计风格会不断的发生变化,有的设计风格过一段时间就消失了,有的设计风格会被设计师多次的去运用,最后成为了设计趋势.正确的背景风格可以为整个网站确定基调.那么,网页设 ...

最新文章

  1. spring data实现自定义的repository实现类,实现跟jpa联通
  2. MSB6006: “cmd.exe”已退出,代码为 3.
  3. ITK:重采样DICOM系列
  4. iPhone ARC 宏定义
  5. Android(java)学习笔记133:Eclipse中的控制台不停报错Can't bind to local 8700 for debugger...
  6. zend studio和dreamweaver使用小笔记
  7. 人生苦短,我用VIM!
  8. 2020成人高考计算机基础知识题库,成人高考计算机考试全套题库
  9. Java Lambda 映射 map
  10. 最少拍控制系统设计(二)纹波问题分析与无纹波系统的设计与仿真(附matlab和simulink源文件)
  11. 计算机专业答辩 ppt模板 免费,计算机毕业论文答辩(完整版).ppt
  12. Window安装Netbeans9
  13. MAC的物理地址与IP地址查询方法
  14. 第26讲-项目六-定期存款利息计算器
  15. linux文件误删恢复解决方案
  16. linux glib,我该如何安装glib?
  17. 互联网周刊:深度分析云计算
  18. Coursera--DataStructure-加州理工大学圣地亚哥分校课程
  19. 移动OA办公——Smobiler第一个开源应用解决方案,快来get吧
  20. CentOS7.5.1804安装yum流程

热门文章

  1. 大话PHP设计模式:类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...
  2. 用 Ganglia 监控基于 Biginsights 的 HBase 集群性能
  3. php通过正则提取页面相关信息
  4. 微软职位内部推荐-SW Engineer II for Azure Network
  5. 使用lua实现一个简单的事件派发器
  6. www.yzcode.com Flash广告下载,自己利用从此网站下载的Flash广告制作了自己第一个广告...
  7. 为什么谐振时电抗为0_变频串联谐振试验装置的接线原理
  8. 数据库索引的实现原理?
  9. A 01 如何理解会计中的借和贷
  10. 从选择到上传,可能是最贴心的高仿朋友圈编辑了