Dhtml实例教程（三）
例4 使用onclick动态改变字体的颜色
DHtml举例4
我是变色龙！
在这一例子中，当您把鼠标移动到文字上时，文字颜色变为红色，当鼠标离开文字时，文字颜色变为绿色，当在文字上单击鼠标时，文字颜色变成了蓝色。
下面是我用样式单制作的一个自认为比较漂亮的Html文件。
例5 “轻松自学动态HTML”的图形标志
DHtml举例5 <br /><style> <br /><!-- <br />body {font-family:"宋体";font-size:9pt;color:#00aaff} <br />h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)} <br />h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt} <br />-- > <br /></style> <br /></head> <br /><body bgcolor="#000000"> <br /><br> <br /><table align="center" border="0" width="27%" bgcolor="#000000" cellpadding="12"> <br /><tr> <br /><td width="168"><h2 class="top">轻 松 自 学 动 态 HTML</h2> <br /><h2 class="bottom"><span style="font-size:50pt;color:lime"><i>t</i></span> <br />each youself DHtml</h2> <br /></td> <br /></tr> <br /></table> <br /></body> <br /></html> <br /><br />请注意例子中的蓝色部分，class属性是用来定义标志对使用的样式类，如<h2 class="top">……</h2>指定了 <h2></h2>标志对中使用样式类“top”，而“top”则是在<style>< style>标志对中定义的。 <br />OK，您会了吗？样式单就这么简单。</div>
</th>
</tr>
<tr class="tr1 r_one">
<th style="vertical-align:bottom ;padding-left:1.5%; border:0">
<div class="tipad"><span style="float:right">
<a href="javascript:scroll(0,0)"><img src="image/wind/read/top.gif" alt="顶端" /></a> </span>
Posted: 2005-09-23 14:27 |
<span><a class="s3" title="回复此楼" style="cursor:pointer;" onclick="postreply('回 1楼(admin) 的帖子');">1 楼</a></span>
</div></th>
</tr></table>
</div>
</form>
<div class="t3"><table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr><td align="left"></td>
<form name="jump" method="post">
<td valign="center" align="right"><select onchange="Fjump(this.options[this.selectedIndex].value)"><option value="" selected>快速跳至</option>
<option value="20">>> php培训</option>
<option value="21"> |- 培训咨询和报名</option>
<option value="38">>> 学员专区</option>
<option value="39"> |- 学员交流区</option>
<option value="14">>> 开源项目</option>
<option value="15"> |- 项目开发</option>
<option value="16"> |- OSC技术交流</option>
<option value="23"> |- CMS开源项目研究</option>
<option value="24"> |- 下载</option>
<option value="2">>> PHP和web开发</option>
<option value="3"> |- 入门和基础知识</option>
<option value="4"> |- PHP中高级</option>
<option value="22"> |- 网站SEO</option>
<option value="5"> |- PHP资源共享</option>
<option value="40"> |- YUI,ext JS</option>
<option value="7"> |- 数据库应用</option>
<option value="8"> |- 操作系统（Windows、Linux）</option>
<option value="35"> |- 英语学习</option>
<option value="36"> |- 数据结构和算法</option>
<option value="12"> |- web2.0</option>
<option value="9">>> 信息发布</option>
<option value="10"> |- 招聘和求职</option>
<option value="26">>> 娱乐论坛</option>
<option value="28"> |- BT软件＆教程发布</option>
<option value="30"> |- BT影视＆音乐</option>
<option value="6"> |- 娱乐乐园</option>
<option value="18">>> PHP世纪</option>
<option value="1"> |- 站务管理</option>
</select></td></form>
</tr>
<tr><td style="padding-top: 12px;text-align: left;"><img src="image/wind/index/home.gif" align="absbottom" /> <b><a href="index.php">PHP学会网 php培训网 PHP暑期培训 PHP寒假培训 PHP假期培训</a> » <a href="thread-htm-fid-12-page-0.html">web2.0</a></b> </td>
<td style="padding-top: 12px;text-align: right;"><a href="post-htm-action-reply-fid-12-tid-54.html"><img src="image/wind/reply.png" /></a> <a href="post-htm-fid-12.html" onMouseOver="mouseover_open('menu_post','td_post1','4');"><img src="image/wind/post.png" id="td_post1" /></a></td>
</tr>
</table></div>
<script language="JavaScript">
function Addtoie(value,title){
window.external.AddFavorite(value,title);
}
function Fjump(value){
if(value!=''){
window.location=('http://www.phpwhy.com/thread.php?fid='+value);
}
}
function CopyCode(obj){
var js = document.body.createTextRange();
js.moveToElementText(obj);
js.select();
js.execCommand("Copy");
}
function postreply(txt){
if(typeof document.FORM != "undefined"){
document.FORM.atc_title.value = txt;
document.FORM.atc_content.focus();
}
}
</script>
<link href="js/popwallpaper.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/popwallpaper.js"></script>
<div id="PopWallpaper" class="popwallpaper" style="z-index:99999; visibility: hidden; position: absolute">
<div class="top">
<h3>今日推荐</h3>
<ul>
<li id="hidden"><a href="javascript:void(0)" onclick="PopWallpaper.hidden()">隐藏</a></li>
<li id="show" style="display:none"><a href="javascript:void(0)" onclick="PopWallpaper.show()">显示</a></li>
<li id="close"><a href="javascript:void(0)" onclick="PopWallpaper.close()">关闭</a></li>
</ul>
</div>
<div class="main">
<script type="text/javascript" src="js/GetBlockInfo.js"></script>
</div>
</div>
</div>
<script language="JavaScript" src="image/global.js"></script>
<br />
<center class="gray">
<TABLE class=smalltxt width="100%">
<tr class="altbg1">
<td width="243" align="center" valign="bottom">时:01-06 19:52</td>
<td width="324" align="center" valign="bottom"><small><font color="#999999">Copyright © 2006 phpwhy.com 权<br>
<font color="#FF99CC"><a href="http://www.skyvp.cn/bbs" target="_parent"></a></font> <font color="#FF0000"><a href="http://www.miibeian.gov.cn" target="_blank">ICP05060669</a></font>
<br>
</noscript>
<br></font></small></td>
<td width="198" align="right" valign="bottom">
<a href="http://www.phpwhy.com/bbs/read.php?tid=298"><a target=blank href=http://wpa.qq.com/msgrd?V=1&Uin=93946341&Site=www.phpwhy.com&Menu=yes><img border="0" SRC=http://wpa.qq.com/pa?p=1:93946341:6 alt="曳息"></a></a> -
<a class=bold href="http://www.phpwhy.com/bbs/read.php?tid=299">系</a>
</A>
<script language="JavaScript">
function Sjump(value){
if(value!=''){
window.location=('index.php?skinco='+value);
}
}
</script> </td>
</tr>
<tr style="font-size: 0px; line-height: 0px; spacing: 0px; padding: 0px; {HEADERBGCODE}"><td colspan="3"><script language="javascript" type="text/javascript" src="http://js-1.ad2.cn/count/5/5/1/count.js" ></script>
<script language="javascript" type="text/javascript" src="http://js.users.51.la/2301748.js"></script> </td></tr>
</table>
</center><br />
<div id="footer">
<a href="javascript:scroll(0,0)">Top</a>
</div>
</body></html>
| 
