js 淘宝首页的拼音排序效果
无标题文档
dl,dd,dt {
margin:0;
padding:0;
}
#qq {
width:600px;
overflow:hidden;
height:500px;
margin:0 auto;
background:#fafafa;
padding:15px;
}
#qq span {
display:block;
width:80px;
height:25px;
line-height:25px;
float:left;
}
dl {
width:500px;
line-height:25px;
overflow:hidden;
height:200px;
padding-left:1px;
position:relative;
}
dd {
float:left;
border-left:1px solid #ccc;
margin-left:-1px;
padding:1px 5px 0;
display:inline;/*format ie6 双倍边距*/
}
dt {
width:99%;
height:100px;
border:1px solid #f00;
position:absolute;
left:0;
top:26px;
}
dd a{display:block;padding:1px 5px 0 5px;font-weight:bold;}
.first {border:0 none;margin-left:0;}
.qq {
border:1px solid #f00;
border-bottom:0 none;
z-index:20;
padding:0 4px 0 5px;
position:relative;
margin-left:-1px;
background:#fff;
}
dd:hover dt {display:block;}
function ww(id){
document.getElementById("cc").style.display="";
var xx= document.getElementById(id).innerHTML;
document.getElementById("cc").innerHTML=xx+"的内容";
}
function mm(){
document.getElementById("cc").style.display="none";
}
音序
- abc
- ghi
- xyz
- klu
- vbm
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]