avooo: 各种教程

显示标签为“各种教程”的博文。显示所有博文

2009年4月2日星期四

Blogger教学课程

Blogger模板教学课程——1概说及基本结构
 Blogger 模板教学程---2.CSS外观解说
 Blogger 模板教學課程---3HTML內容架構
 怎么（如何）打造漂亮blogspot模板教学课程系列专辑

相关系列：

CSS属性列表
 CSS教程，简单易懂，一看就会系列专辑
 了解更多信息！

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

怎么在文章中添加代码呢
 怎么给站点加入漂亮rss订阅数图标
 怎么给站点加入上下卷轴的公布栏（文章）
在评论栏留言怎么通过高亮区分作者与网友

相关系列

CSS教程，简单易懂，一看就会系列专辑
 Blogger教学课程
 了解更多信息！

属性名称

字体属性（Font）
font-family
font-style
font-variant
font-weight
font-size

颜色和背景属性
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position

文本属性
Word-spacing
Letter-spacing
Text-decoration

Vertical-align

Text-transform

Text-align
Text-indent
Line-height

边距属性
Margin-top
Margin-right
Margin-bottom
Margin-left

填充距属性
Padding-top
Padding-right
Padding-bottom
Padding-left

边框属性
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Border-color
Border-style
Border-top
Border-right
Border-bottom
Border-left
Width
Height
Float
Clear

分级属性
Display
White-space
List-style-type
List-style-image
List-style-position
List-style

鼠标（Cursor）属性

属性含义

使用什么字体
字体是否斜体
是否小体大写
字体的粗细
字体的大小

定义前景色
定义背景色
定义背景图案
重复方式
设置滚动
初始位置

单词之间间距
字母之间间距
文字装饰样式

垂直方向位置

文本转换

对齐方式
首行缩进方式
文本的行高

顶端边距
右侧边距
底端边距
左侧边距

顶端填充距
右侧填充距
底端填充距
左侧填充距

顶端边框宽度
右侧边框宽度
底端边框宽度
左侧边框宽度
一次定义宽度
设置边框颜色
设置边框样式
一次定义顶端
一次定义右侧
一次定义底端
一次定义左侧
定义宽度属性
定义高度属性
文字环绕
哪一边环绕

定义是否显示
怎样处理空白
加项目编号
加图案
第二行起位置
一次定义列表

自动
定位“十”字
默认指针
手形
移动
箭头朝右方
箭头朝右上方
箭头朝左上方
箭头朝上方
箭头朝右下方
箭头朝左下方
箭头朝下方
箭头朝左方
文本“I”形
等待
帮助

属性值

所有的字体
Normal、italic、oblique
Normal、small-caps
Normal、bold、bolder、lithter等
Absolute-size、relative-size、length、percentage等

颜色
颜色
路径
Repeat-x、repeat-y、no-repeat
Scroll、Fixed
Percentage、length、top、left、
right、bottom等

Normal
同上
None|underline|overline|line-
through|blink
Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Capitalize|uppercase|
lowercase|none
Left|right|center|justify
|
Normal|||

Length|percentage|auto
同上
同上
同上

Length|percentage
同上
同上
同上

Thin|medium|thick|length
同上
同上
同上
同上
Color
None|dotted|dash|solid等
Border-top-width|color等
同上
同上
同上
Length|percentage|auto
Length|auto
Left|right|none
Left|right|none|both

Block、inline、list-item、none
Normal、pre、nowrap
Disc、circle、square等
|none
Inside、outside
||

Auto
Crosshair
Default
Hand
Move
e-resize
Ne-resize
Nw-resize
n-resize
Se-resize
Sw-resize
s-resize
w-resize
Text
Wait
Help

了解更多信息！

CSS教程，简单易懂，一看就会系列专辑

CSS教程5、CSS滤镜13、Xray属性

CSS教程，简单易懂，一看就会系列专辑
看过上一篇CSS教程5、CSS滤镜12、Wave属性来了解：
CSS教程5、CSS滤镜13、Xray属性

Xray就是X射线的意思。
　　Xray属性，顾名思义，这种属性产生的效果就是使对象看上去有一种X光片的感觉。它的表达式很简单：

　　Filter：Xray

　　我们还是先来看一个页面（如下图）：

如果在上面的页面中加入Xray属性，也就是在<head>的<Style>中，增添下面这一句代码：

　　Filter：Xray

　　您再看这个页面就会是另一种效果了：（如下图）

看，是不是就像给它拍了一张X光片一样。

基本结束
相关系列：
CSS属性列表
 CSS教程，简单易懂，一看就会系列专辑
 Blogger教学课程

了解更多信息！

CSS教程5、CSS滤镜12、Wave属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜11、Shadow属性
CSS教程5、CSS滤镜12、Wave属性

Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下：

　　Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，
　　　　　　Phase=偏移量，Strength=强度）

　　我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
　　Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。　　LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。　　　Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。
　　说了一大堆，我们还是先看一个实例吧。比如下面这幅图片

下面我们对上面这个页面加上Wave效果，代码如下：

<html> <head> <title> wave css</title> <style>//*定义CSS 样式开始*// 　　　 　　　</style> 　　　</head> 　　　<body> 　　　<div class=“wave”>//*定义DIV区域内为Wave类*// 　　　<p style=“font-family：lucida handwriting；　　　　　　　font-size=72pt； font-weight：bold；　　　　　　　color：rgb(189,1,64)；”>Leaf 　　　//*设置字体名称、大小、粗细、颜色*// 　　　</div> 　　　<p><img src=“ss01044.jpg”> //*导入图片*// 　　　　　</body> 　　</html>

这段代码实现的效果如下图：

如果把Wave的参数随便做一下改动，就会达到多种效果，请看另外一种效果：（如下图）：

其实这种效果只是增大了freq参数的值，减小了Strength、LightStrength的值就可以了。您也可以多试试，改变其他的参数值，还可以达到许多不同的效果来。
　　本节主要讲述了Wave属性的应用，下一节将向您介绍Xray属性。CSS教程5、CSS滤镜13、Xray属性

了解更多信息！

CSS教程5、CSS滤镜11、Shadow属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜10、Mask属性
CSS教程5、CSS滤镜11、Shadow属性

Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：

　　Filter：Shadow（Color=color，Direction=direction）

　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。
　　这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。　　也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？
　　光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）：

Shadow效果　

Dropshadow效果

这样一对比，就可以很明显的看出两者的不同。
　　Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。
　　本例的代码如下：

<html> <head> <title> shadow</title> <style>//*开始设置CSS样式*// 　　　 　　 </style> </head> <body> <div class=“shadow”>//*区域内为Shadow类*// 　　 <p style=“font-family：bailey；font-size：48pt；　　　　　　　　font-weight：bold；color：#FF9900；”> 　　　 Hongen Online//*定义字体名称、大小、粗细、前景色*// 　　</div> 　　　<div class=“dropshadow”>//*区域内为Dropshadow类*// 　　　<p style=“font-family：bailey；font-size：48pt；　　　　　　　　 font-weight：bold；color：#FF9900；”> 　　　 Hongen Online//*定义字体样式与Shadow类的一样*// 　　　</div> 　　　</body> 　　</html>

本节讲述了Shadow属性的应用，下一节将向您介绍Wave（波纹）属性。
CSS教程5、CSS滤镜12、Wave属性

了解更多信息！

CSS教程5、CSS滤镜10、Mask属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜　9、Invert属性
CSS教程5、CSS滤镜10、Mask属性

Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单：

　　Filter：Mask（Color=颜色）

　　只有一个Color参数，用来指定使用什么颜色作为掩膜。
　　同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）：

原图

Mask属性效果图

加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下：

<html> <head> <title> mask filter </title> <style>//*设置CSS样式开始*// 　　　  　　　 </style> </head> <body> <div> <p> wenyleaf </p> </div> </body> </html>

其实，您就算在代码中去掉对字体前景色的定义，得到的效果还是一样的。因为有了Mask属性的定义，它遮罩下的字体颜色的设置就已经失去了意义。
　　还有一点需要您注意的地方，mask属性对图片文件的支持还是不够，不能达到应该有的效果。
　　本节讲解了Mask属性的应用，下一节将向您介绍Shadow（阴影）属性。
CSS教程5、CSS滤镜11、Shadow属性

了解更多信息！

CSS教程5、CSS滤镜　9、Invert属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜8、Gray属性
CSS教程5、CSS滤镜　9、Invert属性

Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
　　它的表达式也很简单：

　　Filter：Invert

　　我们再来看一下加上Invert属性前后的图片效果变化（如下图）：

原图

Invert属性效果图

我们看到Invert属性实际上达到的是一种“底片”的效果。
　　自己拿别的图来试试吧。本节介绍的是Invert属性，下一节将向您介绍Mask属性。　
CSS教程5、CSS滤镜10、Mask属性

了解更多信息！

CSS教程5、CSS滤镜8、Gray属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜7、Glow属性这篇：
CSS教程5、CSS滤镜8、Gray属性

Gray属性把一张图片变成灰度图。它的表达式很简单：

　　Filter：Gray

　　其实这个属性没什么好讲的，只需在您定义的IMG样式中加入一句代码：

　　{Filter：Gray}就一切OK了。
　　下面两幅图分别代表未加Gray属性和添加了Gray属性的效果：

原图

转成gray属性后的效果图

本节讲述的内容比较简单，下一节将向您介绍Invert转化属性。CSS教程5、CSS滤镜　9、Invert属性

了解更多信息！

CSS教程5、CSS滤镜7、Glow属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜6、FlipH、FlipV属性
CSS教程5、CSS滤镜7、Glow属性

当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：

　　Filter：Glow（Color=color，Strength=strength）

　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。让我们先来看一下加上Glow属性的效果图：

怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下：

<html> <head> <title>filter glow</title> <style>//*开始设置CSS样式*// 　　　  　　　 </style> </head> <body> <div class=“leaf”>//*leaf类样式*// 　　　 <p style=“font-family：lucida handwriting；　　　　　　　　　font-size：54pt；font-weight：bold；color：#003366；”> 　　　　Leaf Mylove//*设置字体名称、大小、粗细、颜色*// 　　　 </div> 　　　 <div class=“weny”>//*weny类样式*// 　　　 <p style=“font-family：bailey； font-size：48pt；　　　　　　　　　font-weight：bold；color：#99CC66；”> 　　　 //设置字体名称、大小、粗细、颜色*// 　　　 Weny Good! 　　　 </div> </body> </html>

您还可以随意修改颜色值，看看其他的发光效果是怎样的。
　　本节主要讲了Glow属性的应用，下一节将向您介绍Gray属性。CSS教程5、CSS滤镜8、Gray属性

了解更多信息！

CSS教程5、CSS滤镜6、FlipH、FlipV属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜5、DropShadow属性这篇：
CSS教程5、CSS滤镜6、FlipH、FlipV属性

Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：

　　Filter：FlipH

　　Filter：FlipV

　　我们先来看一幅图：

下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：

<html> <head> <title>flip css</title> <style>//*设置CSS样式开始*// 　　　 　　　　 </head> <body> <div> <p style=“font-family：bailey；font-size：36pt；　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”> 　　　 Leaf Village 　　 //*定义字体名称、大小、粗细、颜色*// 　　 </div>> 　　 <img src=“ss05058.jpg” 　　 //*导入一张图片*// 　　 </body> 　　</html>

代码产生的两个效果分别如下图：

　水平翻转　垂直翻转

翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。
CSS教程5、CSS滤镜7、Glow属性

了解更多信息！

CSS教程5、CSS滤镜5、DropShadow属性

CSS教程，简单易懂，一看就会系列专辑
看过了CSS教程5、CSS滤镜4、Chroma属性现在来了解以下：
CSS教程5、CSS滤镜5、DropShadow属性

DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式：

　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive）

　　该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
　　Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。
　　同样，我们先来看一个例子（见下图）：

看，图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子。
　　实际上在这里应用的就是CSS的DropShadow属性，我们来看一下它的代码：

<html> <head> <title>dropshadow </title> <style>//*定义CSS样式*// 　　　 　　　//*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF，　　　投影坐标为向右偏移15个像素，向下偏移10个像素*// 　　　</style> </head> <body> <div> <p style=“font-family：matisse itc；font-size：64；　　　　　　　　font-weight：bold；color：#CC00CC；”> 　　　//*定义字体名称、大小、粗细、颜色*// 　　　Love Leaf 　　 </div> </body> </html>

和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件。
　　不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。

　　本节讲述了Dropshadow属性的应用，下一节将向您介绍FlipH、FlipV的属性应用。
CSS教程5、CSS滤镜6、FlipH、FlipV属性

了解更多信息！

CSS教程5、CSS滤镜4、Chroma属性

CSS教程，简单易懂，一看就会系列专辑
看过CSS教程5、CSS滤镜3、blur属性，来了解：
CSS教程5、CSS滤镜4、Chroma属性

Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：

　　Filter：Chroma（color=color）

　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：

图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：

<html> <head> <title>chroma filter</title> <style>  </style> </head> <body> <div> <p>LEAVES <em>LOVE</em></p> </div> </body> </html>

通过上面代码中对chroma的属性设置，使绿色透明。显示效果如下图：

我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）：

另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。

　　本节我们讲述了chroma属性的应用，下一节将向您介绍Dropshadow属性。CSS教程5、CSS滤镜5、DropShadow属性

了解更多信息！

CSS教程5、CSS滤镜3、blur属性

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程5、CSS滤镜2、alpha属性
CSS教程5、CSS滤镜3、blur属性

假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
　　先来看一下blur属性的表达式：

　　filter：blur（add=add，direction，strength=strength）

　　我们看到blur属性有三个参数：add、direction、strength。
　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：

Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
　　还是看一个例子吧。点击这里看效果　

　　看起来是不是有些像万花筒，在这个例子中加入了一些JavaScript的语句，代码如下：

<html> <head> <title>blur css</title> <script> 　　　function handlechange(obj) 　　　//*设置一个循环函数handlechange，对象是obj*// 　　　{ with(obj.filters(0))//*Obj的filter属性*// 　　　 { if (strength<255)//*设置循环条件*// id ="“img1”" src="“ss01087.jpg”" style="“filter：blur(strength="1)”" onfilterchange="“handlechange(this)”>">

注：在javascript中blur属性是这样定义的：
　　　　[oBlurfilter=] object.Filters.blur

　　这个例子是Blur属性的一个比较复杂的例子，下面我将向您介绍两个较简单的blur属性效果。

通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）：

怎么样，是不是有些印象派的意思，这种效果的实现代码如下：.

<html> <head> <title>filter blur</title> <style>//*CSS样式定义开始*// 　　　 　　　</style> </head> <body> 　　　<div style=“width:702； height: 288”> 　　　<p style=“font-family:lucida handwirting italic；　　　 font-size:72；font-style:bold；color:rgb(55,72,145)；” > 　　　 LEAF 　　　//*定义字体名称、大小、样式、前景色*// 　　　</div> </body> </html>

我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：

用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
　　这一节我们介绍了Blur属性，下一节将向您介绍Chroma属性。CSS教程5、CSS滤镜4、Chroma属性

了解更多信息！

CSS教程5、CSS滤镜2、alpha属性

CSS教程，简单易懂，一看就会系列专辑
上一篇说到CSS教程5、CSS滤镜1、概述，现在来说：
CSS教程5、CSS滤镜2、alpha属性

alpha是来设置透明度的。先来看一下它的表达格式：

　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）

　　哇，怎么这么长。是啊，不过这些参数都各有其用。
　　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
　　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
　　从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：

实现上面这种效果的代码如下：

<html> <head> <title>alpha</title> <style>//*定义CSS样式*//  　　</style> 　　</head> 　　<body> 　　<div> 　　<p style=“font-size：48；font-weight：bold；color：red；”> 　　Beautiful //*定义字体属性，前景色为红色*// 　　</div> 　　<img src=“ss01076.jpg”> 　　//*导入一张图片*// 　　</body> 　　</html>

如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示：

　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为　　　线形*//

　　这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。

以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。
　　下一节我们将介绍blur（模糊）属性。CSS教程5、CSS滤镜3、blur属性

了解更多信息！

CSS教程5、CSS滤镜1、概述

CSS教程，简单易懂，一看就会系列专辑
看过了 CSS教程4、CSS定位2.空间定位再来了解：
CSS教程5、CSS滤镜1、概述

好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。
　　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：

　　 filter：filtername（parameters）

　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。
　　也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表：

上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。
　　看了上面长长的列表，是不是觉得很困难呀？不要紧，我们接下来一个一个的介绍这些属性在CSS中是怎样实现的（很简单哟^_^）。
　　下一节我们将首先学习Alpha透明属性的应用。CSS教程5、CSS滤镜2、alpha属性

了解更多信息！

CSS教程4、CSS定位2.空间定位

CSS教程，简单易懂，一看就会系列专辑
看过CSS教程4、CSS定位1.动态转换，再来了解：
CSS教程4、CSS定位2.空间定位

在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
　　我们看到例子中的两幅图片和一段文字分别处于不同的空间位置，文字覆盖在那朵花的图片上，而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢？这里利用了CSS定位的z-index属性，代码如下：

<html> <head> <title>zindex</title> <style type=“text/css”> 　　　  　　　　</style> </head> <body> 　　　　<img src=“ss01010.jpg” class=“pile” id=“image” 　　　　 style=“z-index:1”> 　　　　 //*导入一张图片，使它为pile类，z-index属性定义为１，位置处于最下方　　　　　　*// 　　　　<div class=“pile” id=“text1” 　　　　style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。　　　　</div >//*定义一段文字的颜色和z-index属性为2，处于中间位置*// 　　　<img src=“075.gif” class=“pile1” id=“image” 　　　　style=“z-index:3”> 　　　　 //*导入第二张图片，使它为“pile1”类，z-index属性为3，位置处于最上　　　　　　方*// 　　　　　</body> 　　　</html>

通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
　　下一章我将带您进入CSS滤镜的精彩世界。CSS教程5、CSS滤镜1、概述

了解更多信息！

CSS教程4、CSS定位1.动态转换

CSS教程，简单易懂，一看就会系列专辑
上一篇CSS教程3.CSS属性6、鼠标属性
CSS教程4、CSS定位1.动态转换

通过在CSS中设置属性，我们可以准确的定义一个页面的样式，如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义，使您的页面从这两个方面都展现的非常完美，更加富有动感。
　　另外，在讲解之前，我们首先介绍两个定义：相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。
　　实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表（见下图）：

我们在下面举一个例子，其中带了一点Script的内容，我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧，请点击这里
　　看，通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下：

<html> <head> <title>dingwei css</title> <style type=“text/css”> 　　 </style> </head> <body> <p style=“font-family:行书体；font-size:15pt；color:#cc33cc”> 请选择一幅图片： //*设置字体大小、名称、颜色*// <div id=“container1”> 　　　 <dd><img src=“ss01065.jpg” width=“185”height=“280”> 　　　//*导入一张图片，标识符为container1*// <p style=“font-family:行书体；color:#cc9933；font-size:12pt”> 　　　　名称：大漠 //*设置字体名称、颜色、大小*// </dd> </div> <div id=“container2”> <dd><img src=“ss01095.jpg” width=“185”height=“280”> 　　　//*导入另一种图片，标识符为container2*// <p style=“font-family:行书体；color:#3366cc；font-size:12pt”> 　　　　　名称：大海　　　 </dd> 　　　 </div> 　　　 <form name=“myform”>//*定义两个按钮*// 　　　 <input type=“button” value=“大漠” 　　　　　　　　　onclick=“container1.style.visibility=‘visible’；　　　　container2.style.visibility=‘hidden’”> 　　　 //*定义鼠标点击事件图片1为可见，图片2为不可见*// <input type=“button” value=“大海”；　　　　container1.style.visibility=‘hidden’；　　　　onclick=“container2.style.visibility=‘visible’；　　　　container1.style.visibility=‘hidden’”> 　　　　//*定义鼠标点击事件图片1为不可见，图片2为可见*// 　　　　</form> 　　　　</body> 　　</html>

代码虽然长了一些，但结构很简单，您只要用心看注释，很容易理解的。下一节我将向您继续介绍一个CSS定位的例子。CSS教程4、CSS定位2.空间定位

了解更多信息！

CSS教程3.CSS属性6、鼠标属性

CSS教程，简单易懂，一看就会系列专辑
看过了CSS教程3.CSS属性5、分级属性再来了解：
CSS教程3.CSS属性6、鼠标属性

我们知道，当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。
　　用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。
　　在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表：

我们来看一个例子吧，请看下面这段代码：

<html> <head> <title>changemouse</title> </head> <body> <h1 style=“font-family:文鼎新艺体简”>鼠标效果</h1>//*设置字体*// 　　　 <p style=“font-family:行书体；font-size:16pt；color:red”> 请把鼠标移到相应的位置观看效果。</p>//*设置字体的名称、大小、颜色*// <div style=“font-family:行书体；font-size:24pt；color:green；”> //*设置该区域内的字体名称、大小、绿色*// <p><span style=“cursor:hand”>手的形状</span><br> //*设置鼠标属性为手的形状*// <span style=“cursor:move”>移动</span><br>//*设置鼠标属性为移动*// 　　　　<span style=“cursor:ne-resize”>反方向</span><br> 　　　　//*设置鼠标属性为反方向*// 　　　　<span style=“cursor:wait”>等待</span><br>//*设置鼠标属性为等待*// 　　　　<span style=“cursor:help”>求助</span>//*设置鼠标属性为求助*// </p> </div> </body> </html>

上述代码产生的效果请您点击这里

　　CSS的属性就讲到这里，我们看到它的属性还是比较多的，但是您只要搞清楚它们都是什么意思，应用起来就会很方便。在您应用的时候，还可以参照我为您提供的？？？？。
　　下一章将向您介绍CSS定位。 CSS教程4、CSS定位1.动态转换

了解更多信息！

订阅：博文 (Atom)

链接表导航

av000

博客归档

2009年4月2日星期四

Blogger教学课程

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

CSS属性列表

CSS教程，简单易懂，一看就会系列专辑

CSS教程5、CSS滤镜13、Xray属性

CSS教程5、CSS滤镜12、Wave属性

CSS教程5、CSS滤镜11、Shadow属性

CSS教程5、CSS滤镜10、Mask属性

CSS教程5、CSS滤镜　9、Invert属性

CSS教程5、CSS滤镜8、Gray属性

CSS教程5、CSS滤镜7、Glow属性

CSS教程5、CSS滤镜6、FlipH、FlipV属性

CSS教程5、CSS滤镜5、DropShadow属性

CSS教程5、CSS滤镜4、Chroma属性

CSS教程5、CSS滤镜3、blur属性

CSS教程5、CSS滤镜2、alpha属性

CSS教程5、CSS滤镜1、概述

CSS教程4、CSS定位2.空间定位

CSS教程4、CSS定位1.动态转换

CSS教程3.CSS属性6、鼠标属性

图文导航

avooo推荐淘宝皇冠网购店铺

给站长留言

我关注的博客

内容汇总

链接表 导航

订阅

av000

博客归档

2009年4月2日星期四

图文导航

avooo推荐淘宝皇冠网购店铺

给站长留言

我关注的博客

内容汇总

链接表导航