1.圖片切換
css樣式
<style type="text/css">
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? ? ? padding:0;
? ? ? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? }
? ? ? ? ? ? li{
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? }
? ? ? ? ? ? a{
? ? ? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? }
? ? ? ? ? ? .container{
? ? ? ? ? ? ? ? width:600px;
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? ? ? border:1px solid #000;
? ? ? ? ? ? }
? ? ? ? ? ? .container>ul{
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? }
? ? ? ? ? ? .container>ul>li{
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? }
? ? ? ? ? ? .main>img{
? ? ? ? ? ? ? ? width:400px;
? ? ? ? ? ? ? ? height:400px;
? ? ? ? ? ? }
</style>
div
<div class='container'>
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <a href="#">
? ? ? ? ? ? ? ? <img src="img/home1.jpg">
? ? ? ? ? ? </a>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <a href="#">
? ? ? ? ? ? ? ? <img src="img/home2.jpg">
? ? ? ? ? ? </a>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <a href="#">
? ? ? ? ? ? ? ? <img src="img/home3.jpg">
? ? ? ? ? ? </a>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <a href="#">
? ? ? ? ? ? ? ? <img src="img/home0.jpg">
? ? ? ? ? ? </a>
? ? ? ? </li>
? ? </ul>
? ? <div class='main'>
? ? ? ? <img src="img/home1.jpg">
? ? </div>
</div>
script
<script type="text/javascript">
? ? ? ? ? ? var img=document.querySelectorAll('.container>ul>li>a>img');
? ? ? ? ? ? console.log(img);
? ? ? ? ? ? var mainImg=document.querySelector('.main>img');
? ? ? ? ? ? console.log(mainImg);
? ? ? ? ? ? for(var i=0;i<img.length;i++){
? ? ? ? ? ? ? ? img[i].onclick=function(){
? ? ? ? ? ? ? ? ? ? mainImg.src=this.src;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
</script>
2.樹形列表
css屬性
div{float:left; height: 100px; line-height: 100px; }
#d1,#d3{ background-color: #ccff00; }
#d2{ cursor: pointer; background-color: #ffcc00; }
div
<div id="d1">樹形列表</div>
<div id="d2"><<</div>
<div id="d3">內(nèi)容的主體</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
<div>
? ? ? <ul>
? ? ? ? ? <li>
? ? ? ? ? ? <b>1</b>JAN
? ? ? ? ? ? <p><b>1月節(jié)日</b>元旦:1月1日至3日放假3天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>2</b>FEB
? ? ? ? ? ? <p><b>2月節(jié)日</b>春節(jié):2月2日至8日放假7天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>3</b>MAR
? ? ? ? ? ? <p><b>3月節(jié)日</b>婦女節(jié):3月8日婦女節(jié)，與你們無關</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>4</b>APR
? ? ? ? ? ? <p><b>4月節(jié)日</b>清明:4月3日至5日放假3天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>1</b>JAN
? ? ? ? ? ? <p><b>5月節(jié)日</b>勞動節(jié):4月30日至5月2日放假3天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>2</b>FEB
? ? ? ? ? ? <p><b>6月節(jié)日</b>端午節(jié):6月4日至6日放假3天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>3</b>MAR
? ? ? ? ? ? <p><b>7月節(jié)日</b>小暑:7月7日小暑苞七，不放假</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>4</b>APR
? ? ? ? ? ? <p><b>8月節(jié)日</b>七夕節(jié):8月6日七夕節(jié),不放假</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>1</b>JAN
? ? ? ? ? ? <p><b>9月節(jié)日</b>中秋節(jié):9月10日至12日放假3天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>2</b>FEB
? ? ? ? ? ? <p><b>9月節(jié)日</b>國慶節(jié):10月1日至7日放假7天</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>3</b>MAR
? ? ? ? ? ? <p><b>11月節(jié)日</b>立冬:11月8日立冬培遵。不放假</p>
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? <b>4</b>APR
? ? ? ? ? ? <p><b>12月節(jié)日</b>艾滋病日:12月1日</p>
? ? ? ? ? </li>
? ?
? ? ? </ul>
? ? ? <p></p>
? ? </div>?
script
<script type="text/javascript">
? ? ? ? var li=document.querySelectorAll('div>ul>li');
for(var i=0;i<li.length;i++){
? ? li[i].index = i;
? ? li[i].onclick = function(){
? ? ? ? alert(this.index);
? ? ? ? if(this.classList[0] != "active"){
? ? ? ? ? ? this.classList.add("active");
? ? ? ? }else{
? ? ? ? ? ? this.classList.remove("active");
? ? ? ? }
? ? }
}
? ? ? ? var p=document.querySelector('div>p');
? ? ? ? console.log(p);
? ? ? ? for(var i=0;i<li.length;i++){
? ? ? ? ? ? li[i].onmouseover=function(){
? ? ? ? ? ? ? ? this.style.background='#fff';
? ? ? ? ? ? ? ? this.style.color='#f00';
? ? ? ? ? ? ? ? console.log(this.children[1]);
? ? ? ? ? ? ? ? p.innerHTML=this.children[1].innerHTML;
? ? ? ? ? ? }
? ? ? ? ? ? li[i].onmouseout=function(){
? ? ? ? ? ? ? ? this.style.background='#000';
? ? ? ? ? ? ? ? this.style.color='#fff';
? ? ? ? ? ? ? ? p.innerHTML='';
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
