js day15 案例02

1.图片切换

css样式

div

script

2.树形列表

css属性

div{float:left; height: 100px; line-height: 100px; }
#d1,#d3{ background-color: #ccff00; }
#d2{ cursor: pointer; background-color: #ffcc00; }

div

树形列表
<<
内容的主体

script

var d1=document.getElementById('d1');
var d2=document.getElementById('d2');
var d3=document.getElementById('d3');
d2.onclick=function(){
    if(d2.innerHTML=='<<'){
        d1.style.display='none';
        d2.innerHTML='>>';
    }else{
        d1.style.display='block';
        d2.innerHTML='<<'
    }
}

3.万年历

css样式

*{
    margin:0;
    padding:0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
div{
    width:250px;
    margin:0 auto;
    background: #EAEAEA;
    padding:10px;
}
ul{
    overflow: hidden;
}
ul>li{
    width:50px;
    height:50px;
    background: #000;
    color:#fff;
    float:left;
    margin-top: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding-top:10px;
}
ul>li>b{
    display: inline-block;
    width:30px;
}
ul>li>p>b{
    display: inline-block;
    width:228px;
}
div>p{
width:228px;
    height
    margin:0 auto;
    border:1px solid #fff;
    background: #F1F1F1;
    margin-top:5px;
}
ul>li>p{
    display: none;
}

.active{
    background: red;
}

div

       

          

             1JAN
             
1月节日元旦:1月1日至3日放假3天
          
          

             2FEB
             
2月节日春节:2月2日至8日放假7天
          
          

             3MAR
             
3月节日妇女节:3月8日妇女节，与你们无关
          
          

             4APR
             
4月节日清明:4月3日至5日放假3天
          
          

             1JAN
             
5月节日劳动节:4月30日至5月2日放假3天
          
          

             2FEB
             
6月节日端午节:6月4日至6日放假3天
          
          

             3MAR
             
7月节日小暑:7月7日小暑，不放假
          
          

             4APR
             
8月节日七夕节:8月6日七夕节,不放假
          
          

             1JAN
             
9月节日中秋节:9月10日至12日放假3天
          
          

             2FEB
             
9月节日国庆节:10月1日至7日放假7天
          
          

             3MAR
             
11月节日立冬:11月8日立冬。不放假
          
          

             4APR
             
12月节日艾滋病日:12月1日
          
    
       
       

    
  

script