网络编程
位置:首页>> 网络编程>> 网页设计>> Dhtml网页实例教程(3)

Dhtml网页实例教程(3)

 来源:动态WEB脚本技术论坛 发布时间:2007-10-09 13:39:00 

标签:html,dhtml,教程

Dhtml实例教程(三)

例4 使用onclick动态改变字体的颜色


<html> 
<head> 
<title>DHtml举例4</title> 
</head> 
<body> 
<h3 align="center" onmouseover="this.style.color=’red’" onmouseout="this.style.color=’green’" onclick="this.style.color=’blue’">我是变色龙!</h3> 
</body> 
</html> 


在这一例子中,当您把鼠标移动到文字上时,文字颜色变为红色,当鼠标离开文字时,文字颜色变为绿色,当在文字上单击鼠标时,文字颜色变成了蓝色。

下面是我用样式单制作的一个自认为比较漂亮的Html文件。

例5 “轻松自学动态HTML”的图形标志


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>DHtml举例5 
<style> 
<!-- 
body {font-family:"宋体";font-size:9pt;color:#00aaff} 
h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)} 
h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt} 
-- > 
</style> 
</head> 
<body bgcolor="#000000"> 
<br> 
<table align="center" border="0" width="27%" bgcolor="#000000" cellpadding="12"> 
<tr> 
<td width="168"><h2 class="top">轻 松 自 学  动  态  HTML</h2> 
<h2 class="bottom"><span style="font-size:50pt;color:lime"><i>t</i></span> 
  each   youself  DHtml</h2> 
</td> 
</tr> 
</table> 
</body> 
</html> 


请注意例子中的蓝色部分,class属性是用来定义标志对使用的样式类,如<h2 class="top">……</h2>指定了 <h2></h2>标志对中使用样式类“top”,而“top”则是在<style>< style>标志对中定义的。 OK,您会了吗?样式单就这么简单。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com