设置网页背景 - CSS/DIV布局专题讲解 - 第2课 - CSS,Javascript,jQuery,视频教程

设置网页背景 - CSS/DIV布局专题讲解 - 第2课

本节课时长12分36秒，下载文件14.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

任何一个网上的页面，它背景的颜色、基调往往是给用户的第一印象，因此在页面中控制背景通常是网站设计时一个很重要的步骤。本课在合理运用文字、图片等的基础上，重点介绍CSS控制背景颜色、图片等的方法。

1.背景颜色

256×256×256种RGB色彩组成了整个绚丽多姿的网络，任何一个页面都有它的背景色来突出其基调，微软的蓝色、Google的白色、世纪坛的墨绿、圣诞网站的火红等等都给人们留下很深刻的印象。我们在这里主要通过实例，介绍CSS设置页面背景颜色的方法。希望大家能够掌握以下两个方面的内容：

页面背景色
用背景色给页面分块

2.背景图片

不单单是各种颜色，网页背景同样也可以使用图片。通过CSS可以对背景图片进行很精确的控制，包括位置、重复方式等等。我们在这里围绕背景图片的使用，对CSS的编写方法作进一步介绍。希望大家能够掌握以下几个方面的内容：

页面的背景图
背景图的重复
背景图片的位置
固定背景图片
添加多个背景图片
背景样式综合设置

3. 背景综合一：我的个人主页

个人主页是网络上记录自己、展现自己的一种很好的形式，很多用户在网上都拥有自己的页面。个人主页可以作为宣传自己的方式，也可以用来写网络日记，汇总学习心得，记录每天生活的点点滴滴。

我们在这里通过制作几米风格的个人主页，进一步学习CSS控制网页背景在实际中的运用方法，本例的最终效果如图所示。

4. 背景综合二：古词《念奴娇赤壁怀古》

通过添加各种标记，可以让页面拥有多个背景，如果运用得当还可以得到各种效果。我们在这里以古词为例，进一步巩固页面背景的使用方法。本例最终效果如图所示。

47,447

这篇文章发表于 2007年06月05日星期二 7:00 am，并被分类于CSS/DIV布局专题讲解。您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。

欢迎您发表留言

28条留言

At 2010.04.30 12:41, 思远留言:

老师您好！学习过程中遇到一些问题，想请教一下，谢谢！
一、1.background-image:url(背景图像路径)，其中的“背景图像路径”需不需要加单引号或双引号，加和不加有什么区别？
2.从网上了解了一些关于“路径”的知识，知道背景图像的路径要使用相对于文档的”相对路径”，但是请问另一种路径:”站点根目录相对路径”有什么实际的应用吗？

二、background属性的写法需要注意顺序吗？
“background:color image repeat attachment position;”这种顺序是否正确？

[回复]
At 2010.03.19 10:34, 王娇留言:

请问这本教材的书名全称是什么？

[回复]
At 2009.10.21 14:49, 超人留言:

这个课程讲得一般。我最欣赏的其实是图文的结合。做得比较好。

[回复]
- At 2009.10.23 12:27, chance 留言:
  
  超人，
  
  谢谢您的鼓励，欢迎常来这里交流！
  
  [回复]
At 2009.09.15 12:38, 彩虹毒药留言:

什么是DIV+CSS+AJAX的开发我怎么这么模糊呢?我看了咱们的书上写的AJAX就介绍了能够自由拖动布局区的网页,老师能否给我具体的讲解一下? 感激不尽或者发我邮箱里面也可以谢谢

[回复]
- At 2009.09.15 22:27, chance 留言:
  
  彩虹毒药,
  
  AJAX虽然并不复杂，但是如果没有一些程序开发的基础，并非一两句话能解释清楚的，如果可能，还是按部就班，从基础学起，这样比较稳妥。
  
  [回复]
At 2009.09.14 19:31, sweetaln 留言:

温老师，怎么下载不了呢？
上网不方便，想集中下载学习~~~~可以提供方便吗？谢谢温老师！

[回复]
At 2009.09.07 13:39, cp_hacer 留言:

教程很好，我找了很久才找到

[回复]
- At 2009.09.15 22:02, chance 留言:
  
  cp_hacer ，
  
  谢谢您的鼓励，有任何问题欢迎来这里交流！
  
  [回复]
At 2009.05.23 20:55, 肖凯留言:

请问老师你们这视频有没有源文件啊讲的太快了

[回复]
At 2009.03.19 22:19, 猎人凤留言:

老师们辛苦了，为什么我想看看CSS/DIV布局专题讲解的视频教学看不了，我买的书附的光盘却能看呢？

[回复]
- At 2009.03.20 14:46, chance 留言:
  
  猎人凤，
  
  谢谢您喜欢我们的书！
  
  我这里试验了一下，可以播放，可能是偶然的网络故障？您换个时间在试试看？
  
  [回复]
At 2009.02.07 14:36, 鱼头留言:

很喜欢前沿视频想买书？怎么买 ..希望尽快回复谢谢

[回复]
- At 2009.02.12 21:09, chance 留言:
  
  鱼头，
  
  谢谢您喜欢我们的内容。
  
  要买书，建议你您在网上书店购买，很方便，还可以打折：
  
  http://learning.artech.cn/20070802.css-div-buy-book-online.html
  
  [回复]
At 2009.02.06 14:34, 风雨无阻留言:

非常感谢，这书对我太有用了

[回复]
- At 2009.02.12 20:48, chance 留言:
  
  风雨无阻，
  
  谢谢您的鼓励，很高兴我们的工作对对读者有所帮助！
  
  [回复]
At 2008.11.11 09:27, 你们的书留言:

老师辛苦了你们的书不错

[回复]
- At 2008.11.11 14:15, chance 留言:
  
  你好，
  
  谢谢您的鼓励，希望我们的书对您学习有所帮助！
  
  [回复]
At 2008.11.07 11:50, jkjk 留言:

如果是在一个div中填充比div大的图片，让图片显示充满整个div应该怎么办？

[回复]
- At 2008.11.07 12:20, chance 留言:
  
  jkjk，
  
  如果你是希望用背景的方式在一个div中填充图像，那么是不能伸缩的。CSS中只能设定重复方式和位置，但是不能缩放背景图像。
  
  [回复]
At 2008.02.04 11:04, ··· 留言:

我想卖你们的书。。有没CSS+DIV的教程DV啊

[回复]
- At 2008.02.04 11:10, chance 留言:
  
  你好，
  
  您是说“卖”还是“买”？如果要“卖”，那得过了节，和出版社的发行的人问一问才知道。要买的话，就没问题了，你说的DV是什么？是这里的视频教程吗？书里光盘中有的。
  
  谢谢你喜欢我们的书！有问题来这里交流！
  
  [回复]
At 2008.01.03 23:41, 伟大的土拨鼠留言:

谢谢

[回复]
- At 2008.01.04 13:00, chance 留言:
  
  伟大的土拨鼠，你好！
  
  喜欢就常来看看哦！
  
  [回复]
At 2008.01.03 15:19, 香水留言:

我很喜欢＂前沿视频教室＂我在这里学到了很我工作中要用的东西．．．

老师！您辛苦了．

[回复]
- At 2008.01.03 15:34, chance 留言:
  
  谢谢香水同学的鼓励：）有什么具体的案例吗？写信告诉我们，或者在这里和大家分享一下吧！
  
  [回复]
  - At 2009.02.07 14:35, 鱼头留言:
    
    很喜欢前沿视频，里面的东西对我实在是太有用了我要买书请问在哪里买呢
    
    [回复]
    - At 2009.02.12 21:07, chance 留言:
      
      鱼头，
      
      谢谢您喜欢我们的内容。
      
      要买书，建议你您在网上书店购买，很方便，还可以打折：
      
      http://learning.artech.cn/20070802.css-div-buy-book-online.html
      
      [回复]

前沿视频教室————最好的CSS和Web设计与开发的视频教程