![]() |
先来看一个简单的网页文档的源代码
|
<html> <head> <title>网页特效库Butong.net - 让你的网站更精彩</title> </head> <body> 欢迎来到网页特效库 </body> </html> |
文档以<html>开始,以</html>结束的。这两个标签给告诉浏览器该文档是用HTML代码编写的,整个文档都在<html>与</html>内,一个典型的HTML网页文档被分为两个主要的部分:<head></head>和<body></body>。<head>与</head>之间包含关于文档的信息,比如它的标题和描述内容等信息。<body>与</body>之间包含实际的文档内容(显示在浏览器窗口中的部分)。
上面我们简单的了解了html网页文档的结构,我们再来看看怎么将网页特效插入到网页中。
打开下面的网页特效
非常精彩的导航菜单,推荐!( http://www.butong.net/navigation/061016/index.htm )
再用记事本或网页编辑器打开你的网页
根据提示先将一段代码复制到网页源代码中的<head>与</head>之间(一般直接复制到</head>的前面就可以了)
| <html> <head> <title>网页特效库Butong.net - 让你的网站更精彩</title> <style> /* 先把这个 xmenu 的样式放到css里 */ .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;} </style> <script> /* 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#66CCFF'; //这是鼠标移上去时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='black'; //文字颜色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //这是鼠标离开时的背景颜色 style.border='1px solid #336699'; //边框 style.color='#ffffff'; //文字颜色 filters[0].play(); } } } } } </script> </head> <body> 欢迎来到网页特效库 </body> </html> |
然后将一段代码复制到网页源代码中的<body>与</body>之间(一般直接复制到<body>的后面就可以了)
| <html> <head> <title>网页特效库Butong.net - 让你的网站更精彩</title> <style> /* 先把这个 xmenu 的样式放到css里 */ .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;} </style> <script> /* 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#66CCFF'; //这是鼠标移上去时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='black'; //文字颜色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //这是鼠标离开时的背景颜色 style.border='1px solid #336699'; //边框 style.color='#ffffff'; //文字颜色 filters[0].play(); } } } } } </script> </head> <body> <table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr> <td onclick="location.href='http://www.butong.net';">精彩网页特效Butong.net</td> <td>Name</td> <td>Is</td> <td>LeX</td> <td>Rus</td> <td>!!!</td> </tr> </table> <script>attachXMenu(xmenu0); </script> </body> </html> |
最后保存文档,再在浏览器中打开,就会看到精彩特效了。
如在网页中加入特效代码后,没有效果或效果与本站网页特效演示页面不一样,请浏览下面的帮助文档:
为什么在网页中加入了特效代码后没有效果? (http://www.butong.net/help_2.htm)