以下是html网页特效代码,点击运行按钮可查看效果
*{ margin:0;padding:0;}
body{ font:normal 12px verdana, arial, helvetica, sans-serif; text-
align:center;}
#warpper{ position:absolute; left:100px; top:100px;}
h5{ float:left;}
a{ text-decoration:underline; cursor:pointer; font-weight:bold;}
dl{ height:18px; line-height:18px; background:#f7f7f7; padding:0 10px;}
dt,.normal{ float:left; padding:0 10px; border-right:1px solid #ccc; text-
decoration:none; width:auto; cursor:pointer;}
dt.over{ position:relative;border:1px solid #86e5f0; padding:0 10px 15px
10px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000;
color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; }
li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
dl dd{ position:absolute; width:500px; left:0;top:37px!important; border:1px
solid #86e5f0; background:#caf1f1;
filter:progid:dximagetransform.microsoft.shadow(strength=4, direction=120,
color=#cccccc); padding:10px 0;}
.block{ display:block;}
.none{ display:none;}
function $(str){ return document.getelementbyid(str);}
function $$(str){ return document.getelementsbytagname(str);}
function changemenu(thisobj,num){
if(thisobj.classname=="over") return false;
var tabobj=thisobj.parentnode.getattribute("id");
var obj_dt=$("warpper").getelementsbytagname("dt");
for(var i=0;i<obj_dt.length;i++){
if(i==num){
thisobj.classname="over";
$("c"+(i+1)).classname="block";
}
else{
obj_dt[i].classname="normal";
$("c"+(i+1)).classname="none";
}
}
}
- a
-
- adidas
- aee/爱意
- af
- af棒球帽
- agatha
- albion/奥尔滨
- amd
- andox
- artini
- 爱普生
- b
-
- fasfs
- fsdfsd
- c[ch]
-
- fasfs
- fsdfsd
- fdsfas
- d
-
- fasfs
- fsdfsd
- fdsfas
- fasdffsd
- e
-
- fasfs
- fsdfsd
- fdsfas
- fasdffsd
- fasdfsaf
- f
-
- jb51.net
- alixixi
- fancl
- fancl
- fancl
- fancl
- fancl
- fancl
- fancl
- fancl
- fancl
- fancl
拼音检索:
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]