<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第五章 练习 搜狐视屏纪录片列表</title>
<style>
ul,li,h2,img{margin:0;padding:0}
#ul1{width:275px;height:380px;background:#ccc;margin:0 auto;}
#ul1 div{height:38px;background:#dee7e7;position:relative; border-bottom:1px solid blue;
vertical-align:bottom;line-height:20px;}
.sp1{font-size:22px;float:left;background:#dee7e7;;margin-left:5px;margin-top:10px;}
.sp2{width:35px;height:20px;float:left;font-size:14px;border:1px solid #ccc;margin-right:5px;
line-height:22px;float:right;background:#dee7e7;margin-top:15px;}
div span{display:inline-block;}
#ul1 li{display:block;width:270px;height:340px;background:#dee7e7;text-indent:25px;}
#ul1 ul{text-align:center;list-style-type:circle;}
#ul1 ul li{text-align:left;height:27px;width:256px;background:#dee;
overflow:hidden;line-height:27px;border-bottom:1px dotted #fff;}
#ul1 ul li:hover{height:82px;text-align:left;overflow:hidden;width:256px;line-height:82px;
text-indent:25px;background:#fff;}
img{width:50px;height:25px;margin-right:7px}
#ul1 .m{display:none;}//对应下面的ms显示！（我弄了半天）
</style>
<script>
window.onload=function(){
var ul=document.getElementById(‘ul1‘);
var btn=document.getElementsByClassName(‘sp2‘);
var ms=ul.getElementsByClassName(‘m‘);
var us=ul.getElementsByTagName(‘ul‘);
//alert(ms.length)
ms[0].style.display=‘block‘;
for(var i=0;i<btn.length;i++){
ms[i].index=i;
btn[i].index=i;
fn(btn[i]);
}
function fn(){
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){
for(var k=0;k<ms.length;k++){
//alert(ms.length)
if(ms[k].index!=this.index){
btn[k].style.background=‘#dee7e7‘;
ms[k].style.display=‘none‘; }
else{this.style.background=‘#fff‘;
ms[this.index].style.display=‘block‘;}
}
}
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<div><span class="sp1">观看排行榜</span><span class="sp2">今天</span><span class="sp2">明天</span><span class="sp2">总结</span></div>
<li class="m">
<ul>
<li><img src="../img/di5zhang/shlb.jpg"/>1开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>2Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>3利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>4解决Eclipse java build path中Web Ap</li>
<li><img src="../img/di5zhang/shlb.jpg"/>5Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>6利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>7解决Eclipse java build path中Web Ap</li>
<li><img src="../img/di5zhang/shlb.jpg"/>8Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>9利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>10利用现有服务器搭建IP-SAN存储服务器</li>
</ul>
</li>
<li class="m">
<ul >
<li><img src="../img/di5zhang/shlb.jpg"/>11开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>12Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>13利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>14解决Eclipse java build path中Web Ap</li>
<li><img src="../img/di5zhang/shlb.jpg"/>15Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>16利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>17解决Eclipse java build path中Web Ap</li>
<li><img src="../img/di5zhang/shlb.jpg"/>18Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>9利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>10利用现有服务器搭建IP-SAN存储服务器</li>
</ul>
</li>
<li class="m">
<ul >
<li><img src="../img/di5zhang/shlb.jpg"/>21开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>22Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>23利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>24解决Eclipse java build path中Web Ap</li>
<li><img src="../img/di5zhang/shlb.jpg"/>25Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>26利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>27解决Eclipse java build path中Web Ap</li>
<li><img src="../img/di5zhang/shlb.jpg"/>8Python开发环境之pyenv环境搭建</li>
<li><img src="../img/di5zhang/shlb.jpg"/>9利用现有服务器搭建IP-SAN存储服务器</li>
<li><img src="../img/di5zhang/shlb.jpg"/>10利用现有服务器搭建IP-SAN存储服务器</li>
</ul>
</li>
</ul>
</body>
</html>
转二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li{
list-style:none;
margin:0px;
padding:0px;
}
#box{
width:200px;
height:auto;
margin:0px auto;
}
#xz{
width:196px;
height:26px;
border:2px solid #666666;
margin:0px auto;
}
#xz li{
width:30px;
height:20px;
background-color:#CCCCCC;
color:#666666;
text-align:center;
margin-left:3px;
margin-top:3px;
line-height:20px;
font-size:14px;
float:left;
}
#box li ul{
width:200px;
height:auto;
display:none;
}
#box li ul li{
width:196px;
height:26px;
position:relative;
border-left:2px solid #666666;
border-right:2px solid #666666;
border-bottom:2px solid #666666;
}
#box li ul li div{
width:20px;
height:20px;
font-size:16px;
text-align:center;
line-height:20px;
background-color:#CCCCCC;
position:absolute;
left:3px;
top:3px;
}
#box li ul li span{
width:167px;
height:20px;
line-height:20px;
font-size:14px;
background-color:#CCCCCC;
position:absolute;
right:3px;
top:3px;
}
#box li ul li.bwh1{
height:50px;
}
#box li ul li div.bwh2{
width:50px;
height:44px;
font-size:26px;
text-align:center;
line-height:44px;
}
#box li ul li span.bwh3{
width:137px;
height:44px;
}
#xz li.csj{
background-color:#000000;
color:#FFFFFF;
}
</style>
<script>
window.onload=function(){
var oXz=document.getElementById(‘xz‘);
var aLix=oXz.getElementsByTagName(‘li‘);
var oBox=document.getElementById(‘box‘);
var aUl=oBox.getElementsByTagName(‘ul‘);
arrN=[
3,
5,
4,
6,
1
];
arrT=[
[‘1这是1句话‘,‘2这是1句话‘,‘3这是1句话‘],
[‘1这是2句话‘,‘2这是2句话‘,‘3这是2句话‘,‘4这是2句话‘,‘5这是2句话‘],
[‘1这是3句话‘,‘2这是3句话‘,‘3这是3句话‘,‘4这是3句话‘],
[‘1这是4句话‘,‘2这是4句话‘,‘3这是4句话‘,‘4这是4句话‘,‘5这是4句话‘,‘6这是4句话‘],
[‘1这是5句话‘]
];
var ls=arrN.length;
var strs1=‘‘;
var strs2=‘‘;
var arr1=[];
var aLi1=null;
var arr2=[];
var aLi2=null;
var arr3=[];
var aLi3=null;
for(var w=0;w<ls;w++){
strs1+=‘<li>‘+(w+1)+‘</li>‘;
strs2+=‘<li><ul></ul></li>‘;
}
oXz.innerHTML=strs1;
oBox.innerHTML=strs2;
for(var b=0;b<ls;b++){
fn(aUl[b],arrN[b],arrT[b]);
}
aUl[0].style[‘display‘]=‘block‘;
for(var v=0;v<ls;v++){
aLi1=aUl[v].getElementsByTagName(‘li‘);
aLi2=aUl[v].getElementsByTagName(‘div‘);
aLi3=aUl[v].getElementsByTagName(‘span‘);
for(var g=0;g<aLi1.length;g++){
arr1.push(aLi1[g]);
arr2.push(aLi2[g]);
arr3.push(aLi3[g]);
}
}
var las=arr1.length;
aLix[0].className=‘csj‘;
for(var z=0;z<ls;z++){
aLix[z].indexs=z;
aLix[z].onmouseover=function(){
for(var c=0;c<ls;c++){
aUl[c].style.display=‘none‘;
aLix[c].className=‘‘;
}
for(var h=0;h<las;h++){
arr1[h].className=‘‘;
arr2[h].className=‘‘;
arr3[h].className=‘‘;
}
aUl[this.indexs].style[‘display‘]=‘block‘;
this.className=‘csj‘;
}
}
function fn(oUl,num,arr){
var aLis=oUl.getElementsByTagName(‘li‘);
var aDv=oUl.getElementsByTagName(‘div‘);
var aSp=oUl.getElementsByTagName(‘span‘);
var str=‘‘;
for(var i=0;i<num;i++){
str+=‘<li><div>‘+(i+1)+‘</div><span>‘+arr[i]+‘</span></li>‘;
}
oUl.innerHTML=str;
for(var a=0;a<num;a++){
aLis[a].index=a;
aLis[a].onmouseover=function(){
for(var s=0;s<num;s++){
aLis[s].className=‘‘;
aDv[s].className=‘‘;
aSp[s].className=‘‘;
}
this.className=‘bwh1‘;
aDv[this.index].className=‘bwh2‘;
aSp[this.index].className=‘bwh3‘;
}
}
}
}
</script>
</head>
<body>
<ul id="xz"></ul>
<ul id="box"></ul>
</body>
</html>
本文出自 “春天里！” 博客，谢绝转载！
原文地址：http://11180930.blog.51cto.com/11170930/1837354
