当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 网页背景设计全攻略(2)

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 网页背景设计全攻略(2)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 48 ::
收藏到网摘: n/a

5.复合背景

  如果你在练习上面的“照片背景”时“不小心”也设置了<body>标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的
颜色背景取而代之。它的设计方法,就不用我再多说了吧!

  6.局部背景

  前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。
  最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子:

<table border="1" width="240" height="101" bgcolor="#C0C0C0">
    <tr>
      <td width="80" height="46" bgcolor="#00FFFF"></td>
      <td width="80" height="46"></td><td width="80" height="46" bgcolor="#00FF00"></td>
    </tr>
    <tr>
      <td width="80" height="47" bgcolor="#FFFF00"></td>
      <td width="80" height="47" bgcolor="#FF0000"></td>
      <td width="80" height="47" bgcolor="#FF00FF"></td>
    </tr>
</table>

  在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
  除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。请先看一下下面的这个例子:
  <HTML><HEAD><TITLE>不仅仅是页面的背景</TITLE><STYLE TYPE="text/css"><!--BODY{BACKGROUND:#FFFFDD;COLOR:red}div{BACKGROUND:red;COLOR:white}--></STYLE></HEAD><BODY><P STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}">
  记得毛主席有这么一首诗:"<div>坐地日行八万里,巡于遥看一千河。</div>"伟人就是了不起,……几万里就出去了。</P></BODY></HTML>
  在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。
  说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断涌现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引起广大网页制作者对背景设计的注意,毕竟,背景对网页来说实在是太重要了,当然,网站还是要以内容为第一的。