先来看一个简单的网页文档的源代码
<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>
|
最后保存文档，再在浏览器中打开，就会看到精彩特效了。
如在网页中加入特效代码后，没有效果或效果与本站网页特效演示页面不一样，请浏览下面的帮助文档：
为什么在网页中加入了特效代码后没有效果？ | 
您的位置：
