控制框架
style=\"border-bottom:#D4D1C2 1px solid; border-right:#D4D1C2 1px solid; border-left:#D4D1C2 1px solid;border-top:#D4D1C2 1px solid\"
用CSS控制input输入框边线的颜色
<INPUT style=\"BACKGROUND-COLOR: white; BORDER-BOTTOM: #00CC33 1px solid; BORDER-LEFT: #FF00FF 1px solid; BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #0000FF 1px solid; \" value=\"3213213\">
一、动态改变文字大小
这个例子的效果是：一段文本，当鼠标在这段文本上，文字变大，鼠标离开时又恢复原样。
制作方法：
1、在Dreamweaver3中，用CSS面板定义两个CSS的class，一个取名为“style1”定义为大号字（18px）；另一个取名为“style2”，定义为小号字（12px）。获得的CSS代码如下：
<style type=\"text/css\">
<!--
.style1 { font-size:18px}
.style2 { font-size:12px}
-->
</style>
不使用Dreamweaver的网友可把上述代码直接复制到网页代码的<head>与</head>之间。
2、在这段文字的<P>标记中加入这段代码：onmouseover=\"this.className=\'style1\'\"。至此，制作完成，能产生效果的那段文字的源代码是这样的：
<p><font color=\"#FF0000\">鼠标在这段文字上，文字变大，鼠标离开时变小。</font></p>
不使用Dreamweaver的网友只要把代码改成上面这样就行了，预览一下就可看到实际效果了。
二、同时动态地改变文字的大小、颜色、加粗
这个例子的效果是：鼠标在文字上，文字的大小、颜色发生改变且加粗，鼠标离开时恢复原样。
这个例子的制作方法与例一相同，不同的只是在CSS中定义了不同的文字属性，所以制作方法不再重复。在<head>与</head>之间增加的CSS代码为：
<style type=\"text/css\">
<!--
.style1 { font: bold 16px ; color: #0000FF}
.style2 { font-size:12px; color:#00ff00}
-->
</style>
制作完成，能产生效果的那段文字的源代码是这样的：
<p class=\"style4\">鼠标在这段文字上，改变文字的大小、颜色、加粗，鼠标离开时恢复原样。</p>
三、动态改变部分文本的背景
这个例子的效果是：当鼠标移到某行文本上，这行一部分文本的背景改变了，而本行的另一段背景却不变。
这个例子与上面的例子在制作方法上有点改变，上面的例子都是对整段文本的属性进行改变，所以把触发事件加载在“P”标记上；而本例是只改变一段文本的一部分的背景颜色，所以应先用\"Span\"标记把要改变背景的文本括起来，然后把触发事件加载到“Span”标记上。
本例在<head>与</head>之间增加的CSS代码为：
<style type=\"text/css\">
<!--
.style1 { background: #99CCFF}
.style2 { background: #FFFFFF}
-->
</style>
制作完成，能产生效果的那段文字的源代码是这样的：
<p><span class=\"style6\">当鼠标移到这段文本上，背景改变了，</span>而本行的另一段背景却不变。</p>
四、给超级链接动态加图标
这个例子的效果是：当鼠标移到某个超级链接上，它的左边会出现一个图象，鼠标移开，图象消失。
本例在制作方法上与上例相同，都是改变文本的背景，但在制作时要注意几点：
1、在设置CSS的背景时是选择图象背景，并在设置图象背景的“repeat”参数时要选择“no-repeat”（不平铺）；
2、在设置超级链接时，在其左边要预留出图象的位置；
3、触发事件要加载在超级链接上。
本例在<head>与</head>之间增加的CSS代码为：
<style type=\"text/css\">
<!--
.style1 { background: url(image/dot.gif) no-repeat; }
.style2 { background: #FFFFFF}
-->
</style>
制作完成，能产生效果的那个超级链接的源代码是这样的：
<a href=\"#\">将鼠标移动过来</a>
|
