网页背景设计全攻略(2)

奇葩TMD朵朵开

奇葩TMD朵朵开

2016-01-29 12:26

网页背景设计全攻略(2),网页背景设计全攻略(2)
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
  在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。
  说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断涌现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引起广大网页制作者对背景设计的注意,毕竟,背景对网页来说实在是太重要了,当然,网站还是要以内容为第一的。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)
展开更多 50%)
分享

猜你喜欢

网页背景设计全攻略(2)

Html CSS布局 Div+CSS XHTML
网页背景设计全攻略(2)

网页背景设计全攻略

Web开发
网页背景设计全攻略

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页背景设计技巧

Web开发
网页背景设计技巧

弹出网页窗口设计全攻略

Html CSS布局 Div+CSS XHTML
弹出网页窗口设计全攻略

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页设计中如何让CSS控制网页背景?

Web开发
网页设计中如何让CSS控制网页背景?

《行会2》全攻略

电脑网络
《行会2》全攻略

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Flash鼠绘新手入门教程:花草的绘制方法

Flash鼠绘新手入门教程:花草的绘制方法

精通VC与Matlab联合编程(五)

精通VC与Matlab联合编程(五)
下拉加载更多内容 ↓