CSS/HTML网页设计

第一部分 HTML 语法

第一章 认识HTML
HTML的英文全名为HyperText Makeup Language,译为超文标记语言。

第二章 HTML的基本概念
文件注释标记


第三章 文字版面的编辑

3-1 版面控制标记

3-1-1 取消文字换行标记
在不同大小的浏览器窗口中，每行所显示的方案及段落也将有所不同。若要取消方案因窗口大小而产生的换行，就可以使用标记。
例：

ＩＢＭ Ｌｏｔｕｓ教育培训是一个系统工程。主要通过ＬＡＥＣ即ＩＢＭ Ｌｏｔｕｓ 授权教育中心，ＣＬＥＣ即 ＣＬＥ 教育中心、Ｎｏｔｅｓ大学等来为广大Ｌｏｔｕｓ Ｄｏｍｉｎｏ／Ｎｏｔｅｓ （包括相关知识管理产品）用户及爱好者进行系列培训，以更好服务社会。


3-1-2 换行标记

例：
清平调

云想衣裳花想容，

春风拂槛露华浓，


3-1-3 段落标记

由

标记所标识的文字，代表同一个段落的文字。
例：

文字

3-1-4 保留原始排版方式标记

 要将HTML文件中的文字编排方式，通过浏览器显示时，保留原始的文件排版方式，只需在该文章前加入
标记，即可使浏览显示文件原始排版方式。
 

 清平调
 云想衣裳花想容，
 春风拂槛露华浓，
 
 
 3-1-5 水平分隔线标记

 属性 功能
 size 水平线的粗细，以pixe1为单位表示。
 width 水平线的宽度，以pixe1为单位表示。 
 Align 水平线的对齐方式 
 color 水平线的颜色
 Noshade 不显示3D阴影 
 
 3-1-6 空格符号 
 
 3-1-7 居中对齐标记
 
 清平调

 云想衣裳花想容，

 春风拂槛露华浓，

  
 
 3-2 标题文字的建立
 3-2-1 标题文字标记 
 格式：
标题1
 
标题2
 …
 
标题2
 
 上标 
 下标 
 
 3-3-4 特殊符号的表示方法
 
 ---------------------------------
 符号 HTML表示方法
 ---------------------------------
 < <
 ---------------------------------
 > >
 ---------------------------------
 & &
 ---------------------------------
 " "
 ---------------------------------
 
 第五章 表格的建立
 
 5-2-3 内框宽度----cellspacing 
 
 5-2-4 表格内方案与框距离----cellpadding
 
 5-4-4 行的文字水平对齐方式---ALIGN
 
 5-4-5 行的文字垂直对齐方式---VALIGN
 
 5-5-5 水平延伸单元格---COLSPAN
 
 5-5-6 垂直延伸单元格---ROWSPAN
 
 
 第七章 建立超级链接
 
 7-1 相对路径与绝对路径
 “.” ---代表目前所在的目录
 “..”---代表上一层目录
 “/” ---用与链接路径中各目录名称
 
 例：相对：./image/sea.gif = image/sea.gif
 绝对：/ch7/image/sea.gif
 
 7-3 超链接到其它位置的设置 
 7-3-1 通过http 协定
 
 
 
 
 
 
 按下
 查询火车时刻超连结後，

 将连结到台湾铁路管理局。

 
 
 
 
 7-3-2 通过ftp 协定
 
 
 
 
 
 
 按下
 中山大学超连结後，

 将连结到中山大学的FTP站。

 
 
 
 
 7-3-3 通过telnet链接
 
 
 
 
 
 
 按下
 成大资工超连结後，

 将透过telnet连结到成大资工的BBS站。

 
 
 
 
 第八章 窗口框架的建立
 8-1-2 窗口框架的基本结构
 框架的基本结构,主要是利用标记与标记来定义。其中用于定义一个窗口框架组件，而则用于定义框架中的子窗口组件。语法如下：
 
 
 
 
 …
 
 
 *注意：不可包含在标记中，否则将无法使用。
 
 8-2-1 窗口的水平分割---ROWS
 
 
 
 …
 
 
 
 
 
 …
 
 
 8-2-2 窗口的垂直分割---COLS
 
 例ch8_3.htm 数值设置
 
 
 
 
 
 
 
 
 例ch8_4.htm 百分比设置
 
 
 
 
 
 
 
 
 8-2-3 窗口框架的高级设计
 
 例ch8_5.htm 建立嵌套窗口框架
 
 
 
 
 
 
 
 
 
 
 8-2-5 框架的隐藏---FRAMEBORDER
 
 0代表不显示框线，1代表显示框线， 其默认值为1.
 例ch8_9.htm 建立嵌套窗口框架
 
 
 
 
 
 
 
 
 8-3 子窗口的设置
 8-3-1 指定子窗口显示网页---SRC
 
 
 8-3-2 定义子窗口名称---NAME
 
 例ch8_8.htm
 
 
 
 
 
 
 
 
 8-3-3 控制框架流动条---SCROLLING
 例ch8_10.htm
 
 
 
 
 
 
 
 
 8-3-4 子窗口大小的调整---NoResize
 希望用户不能随意更改子窗口大小，可设置NoResize
 
 
 8-4 超链接TARGET属性与框架的应用
 8-4-1 网页显示子窗口---TARGET属性
 建立一个超链接，当用户单击此超链接时，将在名为main的子窗口中，显示ch8_7_1.htm,语法如下：
 第一个超链接
 
 例ch8_11.htm
 
 
 
 
 
 
  
 
 
 
 例ch8_11_1.htm
 
 
 
 
 
 
第一个超级链接
 
第二个超级链接
 
第三个超级链接
 
 
 
 设置在上一层框架显示网页
 例： ch8_13.htm 和 ch8_13_1.htm、 ch8_13_2.htm 、ch8_13_3.htm 、ch8_13_4.htm 
 
 第九章 APPLET、网页动态更新与多媒体
 
 9-1-1 在网页中引用Applet
 Applet组件
 
 
 
 ……
 
 
 例ch9_1.htm
 
 
 
 
 
 
 Applet组件的使用
 


  
  
  
 
 
 
 
 
 
 
 --------
 |程序说明|
 --------
 ------------------------------------------------------------------------------------------
 | 参数名称 | 说 明 |
 ------------------------------------------------------------------------------------------
 | message | 显示于Applet组件的信息 |
 -------------------------------------------------------------------------------------------
 | msecond | 指定Applet组件显示信息的延迟 |
 -------------------------------------------------------------------------------------------
 | bgcolor | Applet组件的背景颜色。可使用的颜色设置值有white/black/blue/cyan/darkGray|
 | | gray/green/lightGray/magenta/orange/pink/red/yellow |
 -------------------------------------------------------------------------------------------
 | fontcolor | Applet组件中显示文字颜色。可使用的颜色设置值有white/black/blue/cyan/ |
 | | darkGray/gray/green/lightGray/magenta/orange/pink/red/yellow |
 -------------------------------------------------------------------------------------------
 | fontsize | Applet组件的显示文字大小。 |
 -------------------------------------------------------------------------------------------
 
 9-2 网页动态更新
 按指定的几秒后，自动更新所显示的网页网址。语法如下：
 
 *注：标记必须放在标记中
 
 9-3 多媒体网页
 
 9-3-1 多媒体网页的制作简介
 
 9-3-2 音乐文件的播放（.au .mid .wav）
 例：ch9_4.htm
 
 
 
 
 
 
 
 
 网页音乐的播放
 


 当您单击
 甜美音乐 
 时，将自动打开Windows Media Player窗口并播放音乐
 
 
 
 
 9-3-3 影像文件的播放(.mov .mpg .avi)
 例：ch9_5.htm
 
 
 
 
 
 
 
 
 网页电影的放映
 


 当您单击
 本市交通
 时，将自动打开Windows Media Player窗口并播放短片
 
 
  
 
 ---------------
 |将影像嵌入网页|
 ----------------
 要直接将影像嵌入网页，您可以利用标记，语法如下：
 
 例：ch9_6.htm
 
 
 
 
 
 
 
 
 自动播放网页电影
 


 
  AUTOSTART=TRUE LOOP=TRUE>
 
 
 
 
 9-3-4 音乐文件的播放
 将音乐嵌入网页
 方法同上
 例：ch9_7.htm
 
 
 
 
 
 
 
 
 播放网页背景音乐
 


  AUTOSTART=TRUE LOOP=TRUE>（不限次数自动播放）
 
 
 
 
 9-3-5 网页背景音乐的播放
 利用标记，语法如下：
 
 *Loop属性
 若设为infinite时，音乐将循环播放，直到网页关闭为止。
 
 例：ch9_8.htm
 
 
 
 
 
 
 
 
 利用"BGSOUND"标签播放背景音乐
 


 设置播放2次背景音乐后，就停止播放
 
 
 
 
 
 第二部分 CSS样式表
 
 第十章 认识CSS
 
 10-1 CSS的简介
 
 10-1-1 什么是CSS
 CSS——CSS的英文全名是Cascading Style Sheet,译为层叠样式表。
 
 10-1-2
 
 第十一章 样式表的定义与使用
 
 11-1 直接定义标记的STYLE属性
 例：ch11_1.htm
 
 
 
 
 
 
 
 

 此行文字将被定义为红色楷体的字体

 
此行文字并不会被STYLE属性所定义

 
 
 
 
 11-2 定义内部样式表
 11-2-1 在HTML文件内定义样式表
 
 ----------------------------------------------
 程序说明
 *
 避免因浏览器不支持CSS语言，而导致错误。加上标记后，不支持CSS的浏览器，会自动略过此段内容。
 *选择符1…选择符N 
 可以使用HTML标记的名称，所有HTML标记都可以作为CSS选择符。
 */*……*/
 CSS注释符号
 
 例：ch11_.htm
 
 
 
 
 
 
 
 
 
此行文字为红色楷体的字体
 
此行文字为蓝色华文隶书的字体
 
 
 
 
 组合选择符
 ==========
 
 ----------------------------------------------------------------------
 程序说明
 好处在于减少样式表的空间和重复设置的麻烦。
 例：ch11_21.htm
 
 
 11-2-2 利用CLASS类选择符定义样式
 
 
 或者
 
 
 --------------------------------------------------
 程序说明
 o *.A1…*.AN
 A1…AN为定义的类选择符名称。其适用范围是整个HTML文件中所有由CLASS类选择符所引用的设置。*符号也可以用HTML内的标记替代（标记1…标记N），范例如：Font.A1；此外*符号，在设置时也可以省略。
 o 标记1.A1…标记N.AN
 标记1…标记N为HTML的标记名称，即前面提过的*符号，也可以用HTML内的标记替代。
 
 例：ch11_3.htm
 
 
 
 
 
 
 
 
 
此行文字为红色楷体的字体
 
此行文字为浏览器默认的字体样式

 
此行文字为蓝色华文隶书的字体样式

 
 
 
 
 11-2-3 利用ID选择符定义样式
 class与ID选择符定义样式的区别在于定义样式名称前的符号。用CLASS定义时为“*.样式名称”；若为ID定义时为“#样式名称”
 
 
 
 或者
 
 
 
 
 例：ch11_4.htm
 
 
 
 
 
 
 
 
 
此行文字为红色楷体的字体
 
此行文字为浏览器默认的字体样式

 
此行文字为蓝色华文隶书的字体样式

 
 
 
 
 11-3 CSS的继承概念
 
 11-3-1 CSS的继承性质
 例：ch11_6.htm
 
 
 
 
 
 
 
 
 欢迎光临位元文化欢迎光临
 


 
 
 
 
 
 
 11-3-2 上下文选择符
 根据上下文选择符之间的关系，决定在该网页上显示哪一种样式。
 
 H1 {COLOR:RED} 
 EM {COLOR:GREEN}
 若想将上述两浏览器的设置组合成字号为1级、斜体的蓝色字，则可写成如下的语名：
 
 H1 EM {COLOR:BLUE} 
 
 使用：
 
文件内容
 
 
 例：ch11_7.htm
 
 
 
 
 
 
 
 
 
此行为文字大小1级的红色字体
 
此行为文字为绿色的斜体字体
 
此行为文字大小1级的蓝色斜体字体
 
 
 
 
 
 组合上下文选择符的使用
 例：ch11_8.htm
 
 
 
 
 
 
 
 
 
此行文字为红色斜体字
 
此行为文字大小1级的加下划线红色字体
 
此行为文字大小2级的红色斜体字体
 
 
 
 
 
 11-4 外部样式表
 
 11-4-1 嵌入外部样式表
 
 CSS文件内容：
 CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
 I {COLOR:GREEN; FONT-SIZE=50pt}
 IMG {HEIGHT:100; WEIGHT:160}
 -------------------------------------------------------------
 下面的语法，是将CSS文件嵌入HTML文件
 
 
 例：ch11_9.htm
 
 
 
 
 
 
 
 
 欢迎光临位元文化欢迎光临
 


 
 
 
 
 
 
 --------------------
 |ch11_1.css文件内容|
 --------------------
 CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
 I {COLOR:GREEN; FONT-SIZE=50pt}
 IMG {HEIGHT:100; WEIGHT:160}
 
 11-4-2 连接外部样式表
 除了以嵌入外部样式表的方式达到在HTML文件中引样式表的目的外，您还可以使用连接的方式，使用外部样式表。而连接样式表简单来说，当浏览器读取到HTML文件内有设置格式的标记时，将会向所连接的外部样式表索取样式，语法如下：
 
 
 例：ch11_10.htm
 
 
 
 
 
 
 
 
 
 
 欢迎光临位元文化欢迎光临
 


 
 
 
 
 
 
 --------------------
 |ch11_1.CSS文件内容|
 --------------------
 CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
 I {COLOR:GREEN; FONT-SIZE=50pt}
 IMG {HEIGHT:100; WEIGHT:160}
 
 第十二章 文字与排版样式的使用
 
 12-1 长度、百分比单位的介绍
 
 12-2 文字样式属性的介绍
 
 12-2-1 font-family 字体设置属性
 
 font-family:字体一,字体二，…
 上述语法定义使用好几种不同的字体，并用（,）隔开。当浏览器找不到字体一时，将使用字体二替代，以此类推。
 font-family:楷体,幼园,华文细黑 
 
 例：ch12_1.htm
 
 
 
 
 
 
 
 
 font-family字体属性的应用
 

 智者不失人，亦不失言。 —孔子
 
 
 
 
 
 12-2-2 font-style 字体效果属性
 
 font-style：normal|italic(斜体)|oblique（歪斜体）
 （注：|表示或的意思）
 例：ch12_3.htm
 
 
 
 
 
 
 
 
 font-style字体效果属性的应用
 

 惟仁者能好人，能恶人。　－孔子
 
 
 
 
 
 12-2-3 font-variant 文字变体属性
 利用 small-caps属性值，可以将中文字字体转换为较小的中文字体；而小写的英文字体将转换为大写且字体较小的英文字。
 
 font-variant:normal|small-caps
 
 例：ch12_4.htm
 
 
 
 
 
 
 
 
 font-variant文字变体属性的应用
 


 It is never too late to mend. 亡羊补牢，犹未晚矣。
 
 

 It is never too late to mend. 亡羊补牢，犹未晚矣。
 
 
 
 
 
 12-2-4 font-weight 字体粗细属性
 
 font-variant:normal|bold|bolder|lighter|100-900
 --------------------------------------------------------
 设置值 | 说明 |
 --------------------------------------------------------
 Normal |浏览器默认的字体为7，字体粗细约为400 |
 --------------------------------------------------------
 bold |粗体，字体粗细约为700 |
 --------------------------------------------------------
 bolder |粗体再加粗，字体粗细约为900 |
 --------------------------------------------------------
 lighter |比默认字体还细 |
 --------------------------------------------------------
 100-900 |共有九个层次（100、200…，900），数字 |
 |越小字体越细，数字越大字体越粗。 |
 --------------------------------------------------------
 
 例：ch12_5.htm
 
 
 
 
 
 
 
 
 font-weight属性的应用
 


















 
 
lighter
 
normal
 
bold
 
bolder
 
 
 
字体粗细为100
字体粗细为400
 
字体粗细为500
字体粗细为800
 
 
 
字体粗细为200
 
字体粗细为600
字体粗细为900
 
 
 
字体粗细为300
 
字体粗细为700
 
 
 
 
 
 12-2-5 font-size 文字大小属性
 
 font-size:绝对大小|相对大小
 
 绝对大小：以pt为单位。见例：ch12_6.htm
 相对大小：利用%或者em。见例：ch12_7.htm
 
 例：ch12_6.htm
 
 
 
 
 
 
 
 
 设置font-size属性以绝对方式的应用
 
 

 
文字大小设置为30点
 
文字大小设置为xx-small
 
文字大小设置为x-small
 
文字大小设置为small
 
文字大小设置为medium
 
文字大小设置为large
 
文字大小设置为x-large
 
文字大小设置为xx-large
 
 
 
 
 例：ch12_7.htm
 
 
 
 
 
 
 
 
 设置font-size属性以相对方式的应用
 
 

 
 
font-size设为12pt，即文字大小为12点
 
font-size设为150%，即文字大小为12pt*150%=18pt
 
font-size设为2em，即文字大小为12pt*2=24pt
 
font-size设为larger，即文字大小＞12pt
 
font-size设为smaller，即文字大小＜12pt
 
 
 
 
 12-2-7 text-decoration 文字效果属性
 
 例：ch12_9.htm
 
 
 
 
 
 
 
 
 text-decoration文字效果属性的应用
 
 

 
求学问并无捷径 "此行文字加下划线"

 
求学问并无捷径 "此行文字上加顶线"

 
求学问并无捷径 "此行文字中间加上删除线"
 

 
 
 
 12-2-8 text-transform 文字转换属性
 例：ch12_10.htm
 
 
 
 
 
 
 
 
 text-transform文字转换属性的应用
 
 

 
there is no royal road to learing.

 
 
there is no royal road to learing.

 
 
THERE IS NO ROYAL ROAD TO LEARING.
 
 

 
 
 
 
 12-3 排版样式属性的介绍
 
 12-3-1 text-indent 首行缩进属性
 
 例：ch12_11.htm
 
 
 
 
 
 
 
 
 text-indent首行缩进属性的应用
 
 
"首行缩进25pt"。For every meal you take, should think it's not
 easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 

 
"首行缩进5em"。For every meal you take, should think it's not
 easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 

 
"首行缩进3cm"。For every meal you take, should think it's not
 easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 

 
"首行缩进30%"。For every meal you take, should think it's not
 easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 

 
 
 
 首行凸出的应用
 
 例：ch12_12.htm
 
 
 
 
 
 
 
 
 text-indent首行凸出属性的应用
 
 
"首行凸出20pt，整段缩进30pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.
 一粥一饭，当思来处不易，请惜福哦！
 
 
"首行凸出2em，整段缩进5em"。For every meal you take,
 should think it's not easy to get.Do appreciate blessings.
 一粥一饭，当思来处不易，请惜福哦！
 
 
"首行凸出1cm，整段缩进3cm"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 
"首行凸出10%，整段缩进30%"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 
 
 
 12-3-2 letter-spacing 字符间距属性
 
 例：ch12_13.htm
 
 
 
 
 
 
 
 
 letter-spacing字符间距属性的应用
 
 
"字符间距为5pt"。For every meal you take, should think it's not
 easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 

 
 
"字符间距为-1pt"。For every meal you take, should think it's not
 easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 

 
 
 
 12-3-3 line-height 行距属性
 例：ch12_14.htm
 
 
 
 
 
 
 
 
 line-height行距属性的应用
 
 

 
"此段落字符为12pt，行距为18pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 

 
"此段落字符为14pt，行距为21pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 

 
"此段落字符为16pt，行距为24pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 
 
 
 
 行距属性应用二
 例：ch12_15.htm
 
 
 
 
 
 
 
 
 line-height行距属性的应用
 
 

 
"此段落字符为14pt，行距为21pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 

 
"此段落字符为14pt，行距为21pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 

 
"此段落字符为14pt，行距为21pt"。For every meal you take, 
 should think it's not easy to get.Do appreciate blessings.　
 一粥一饭，当思来处不易，请惜福哦！
 
 
 
 
 
 12-3-4 text-align 水平对齐属性的应用
 例：ch12_16.htm
 
 
 
 
 
 
 
 
 text-align水平对齐属性的应用
 
 

 
无用之用是为大用 -庄子

 
 
无用之用是为大用 -庄子

 
 
无用之用是为大用 -庄子

 
 
For every meal you take, should think it's not easy to get.
 Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
 
 

 
 
 
 12-3-5 vertical-align 垂直对齐属性
 
 例：ch12_17.htm
 
 
 
 
 
 
 
 
 vertical-align垂直对齐属性的应用
 







































 
 
设置vertical-align属性
显示结果
 
设置vertical-align属性
显示结果
  
 
vertical-align:sub
 
C+O2-->CO2
  
vertical-align:super
 
a2+b2
 =c2
  
  
 
vertical-align:top
 
  
vertical-align:text-top
 
  
  
 
vertical-align:middle
 
  
vertical-align:baseline
 
  
  
 
vertical-align:bottom
 
  
vertical-align:text-bottom
 
  
 
 
 
 
 
 第十三章 背景与颜色的使用
 
 13-1 设置颜色方法
 
 13-1-4 实例应用
 例：ch13_1.htm
 
 
 
 
 
 
 
 
 在CSS内设置颜色的方法
 












 
在CSS内设置颜色的方法
 
语法
显示的文字均为红色
 
以十六进制数(#rrggbb)表示
color:#ff0000
 
患难见知己 
 
以十六进制数(#rgb)表示
color:#f00
 
患难见知己
 
rgb函数以整数方法表示
color:rgb(255,0,0)
 
患难见知己
 
rgb函数以百分比方法表示
 
color:rgb(100%,0%,0%)
患难见知已
 
以颜色名称表示
color:red
 
患难见知己
 
 
 
 
 
 13-2 背景颜色与背景图片的设置
 
 13-2-1 background-color 背景颜色属性
 background-color:|transparent
 ---------------------------------------------------
 设置值 | 说明 
 ---------------------------------------------------
  |
 ---------------------------------------------------
 transparent |表透明的意思
 ---------------------------------------------------
 
 例：ch13_2.htm
 
 
 
 
 
 
 
 background-color背景颜色属性的应用
 












 
设置背景颜色的方法
 
语法
 
以透明方式显示
 
background-color:transparent
 
以十六进制数(#rrggbb)表示
 
background-color:#00ffff
 
rgb函数以整数方法表示
 
background-color:rgb(0,250,0)
 
rgb函数以百分比方法表示
 
background-color:rgb(70%,50%,0%)
 
以颜色名称表示
 
background-color:red
 
 
 
 
 
 
 13-2-2 background-image 背景图片的应用
 
 background-image:|none
 
 ---------------------------------------------------
 设置值 | 说明 
 ---------------------------------------------------
  | 图文件的位置与名称
 ---------------------------------------------------
 none |不加载图片
 ---------------------------------------------------
 
 语法：background-image:url(fish.gif)
 
 13-3 background-repear 背景