案例1：導(dǎo)航條
Css部分:
? ? ? ? *{
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? ? ? ? ? color:white;
? ? ? ? }
? ? ? ? .nav{
? ? ? ? ? ? width:1000px;
? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? background:red;
? ? ? ? }
? ? ? ? ul li a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? ul li{
? ? ? ? ? ? float:left;
? ? ? ? ? ? width:100px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height:40px;
? ? ? ? }
Body部分：
首頁
公司介紹
人員招聘
Js部分：
? ? ? ? ? ? var li=document.getElementsByTagName('li');
? ? ? ? ? ? console.log(li);
? ? ? ? ? ? for(var i=0;i
? ? ? ? ? ? ? ? li[i].onmouseover=function(){
? ? ? ? ? ? ? ? ? ? this.style.background='cyan';
? ? ? ? ? ? ? ? ? ? this.firstElementChild.style.color='purple';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? li[i].onmouseout=function(){
? ? ? ? ? ? ? ? ? ? this.style.background='red';
this.firstElementChild.style.color='white';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
案例2:
? ? ? ? ? ? *{
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? ? ? ? ? }
? ? ? ? ? ? #d1,#d2,#d3{
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? }
? ? ? ? ? ? #d1,#d3,#d2{
? ? ? ? ? ? ? ? height:100px;
? ? ? ? ? ? ? ? line-height:100px;
? ? ? ? ? ? }
? ? ? ? ? ? #d1,#d3{
? ? ? ? ? ? ? ? background:yellow;
? ? ? ? ? ? }
? ? ? ? ? ? #d2{
? ? ? ? ? ? ? ? background:red;
? ? ? ? ? ? }
Body部分
LEFT
<<
RIGHT
Js部分
? ? ? ? ? ? var d1=document.getElementById('d1');
? ? ? ? ? ? var d2=document.getElementById('d2');
? ? ? ? ? ? d2.onclick=function(){
? ? ? ? ? ? ? ? if(d2.innerHTML=='<<'){
? ? ? ? ? ? ? ? ? ? d1.style.display='none';
? ? ? ? ? ? ? ? ? ? d2.innerHTML='>>';
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? d1.style.display='block';
? ? ? ? ? ? ? ? ? ? d2.innerHTML='<<';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
案例3：
Css部分
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? padding;0;
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? }
? ? ? ? ? ? table tr td{
? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? line-height:30px;
? ? ? ? ? ? ? ? border:1px solid black;
? ? ? ? ? ? }
Body部分：
商品名稱
單價(jià)
數(shù)量
小計(jì)
? ? ? ? ? ? ? ? iphone7
￥5999
? ? ? ? ? ? ? ? ? ? +
? ? ? ? ? ? ? ? ? ? 1
? ? ? ? ? ? ? ? ? ? -
￥5999
? ? ? ? ? ? ? ? iphone7
￥5999
? ? ? ? ? ? ? ? ? ? +
? ? ? ? ? ? ? ? ? ? 1
? ? ? ? ? ? ? ? ? ? -
￥5999
? ? ? ? ? ? ? ? iphone7
￥5999
? ? ? ? ? ? ? ? ? ? +
? ? ? ? ? ? ? ? ? ? 1
? ? ? ? ? ? ? ? ? ? -
￥5999
小計(jì)
￥17997
Js部分：
//實(shí)參
? ? ? ? ? ? function calc(btn){
? ? ? ? ? ? ? ? var span=btn.parentElement.querySelector('span');
? ? ? ? ? ? ? ? var n=span.innerHTML;
? ? ? ? ? ? ? ? if(btn.innerHTML=='+'){
? ? ? ? ? ? ? ? ? ? n++;
? ? ? ? ? ? ? ? }else if(n>1){
? ? ? ? ? ? ? ? ? ? n--;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? n=1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? span.innerHTML=n;
? ? ? ? ? ? ? ? var dj=btn.parentElement.previousElementSibling.innerHTML.slice(1);
var subtotal=dj*n;? btn.parentElement.nextElementSibling.innerHTML='￥'+subtotal.toFixed(2);
? ? ? ? ? ? ? ? var m1=document.getElementsByClassName('m1');
? ? ? ? ? ? ? ? for(var i=0,zong=0;i
? ? ? ? ? ? ? ? ? ? zong+=parseFloat(m1[i].innerHTML.slice(1));
? ? ? ? ? ? ? ? }
document.getElementsByClassName('mz')[0].innerHTML='￥'+zong.toFixed(2);
? ? ? ? ? ? }
案例4：
Css部分：
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? padding:0;
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? }
? ? ? ? ? ? .b{
? ? ? ? ? ? ? ? width:600px;
? ? ? ? ? ? ? ? height:600px;
? ? ? ? ? ? ? ? border:1px solid black;
? ? ? ? ? ? ? ? border-radius:10px;
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? }
? ? ? ? ? ? .top{
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? margin-top:5px;
? ? ? ? ? ? }
? ? ? ? ? ? .top img{
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? width:144px;
? ? ? ? ? ? ? ? height:144px;
? ? ? ? ? ? ? ? padding-left:5px;
? ? ? ? ? ? }
? ? ? ? ? ? .bottom{
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? ? ? width:500px;
? ? ? ? ? ? ? ? margin-top:15px;
? ? ? ? ? ? }
? ? ? ? ? ? .bottom img{
? ? ? ? ? ? ? ? width:500px;
? ? ? ? ? ? ? ? height:400px;
? ? ? ? ? ? }
Js部分：
? ? ? ? ? ? var img=document.querySelectorAll('.b>.top>a>img');
? ? ? ? ? ? var imgs=document.querySelector('.b>.bottom>img');
? ? ? ? ? ? for(var i=0)
img[i].onclick=function(){
? ? ? ? ? ? ? ? ? ? imgs.src=this.src;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
案例5：
Body部分
詠鵝
鵝释液，鵝颓影，鵝
曲項(xiàng)向天歌
白毛浮綠水
紅掌撥清波
JS部分
//獲取div和body
? ? ? ? ? ? var div=document.getElementsByClassName('color')[0];
? ? ? ? ? ? var body=document.body;
//當(dāng)鼠標(biāo)經(jīng)過div時(shí)div中標(biāo)簽的顏色變?yōu)榧t色藐石，body背景顏色變?yōu)樗{(lán)色
? ? ? ? ? ? div.onmouseover=function(){
? ? ? ? ? ? ? ? this.style.color='red';
? ? ? ? ? ? ? ? body.style.background='blue';
? ? ? ? ? ? }
//當(dāng)鼠標(biāo)經(jīng)過div時(shí)div中標(biāo)簽的顏色變?yōu)榫G色排抬，body背景顏色變?yōu)辄S色
? ? ? ? ? ? div.onmouseout=function(){
? ? ? ? ? ? ? ? this.style.color='green';
? ? ? ? ? ? ? ? body.style.background='yellow';
? ? ? ? ? ? }
案例6：
Css部分：
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? padding:0;
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? ? ? list-style: none;
? ? ? ? ? ? }
? ? ? ? ? ? .jr{
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? ? ? width:240px;
? ? ? ? ? ? ? ? margin-top:20px;
? ? ? ? ? ? }
? ? ? ? ? ? .jr div{
? ? ? ? ? ? ? ? width:50px;
? ? ? ? ? ? ? ? height:70px;
? ? ? ? ? ? ? ? background:black;
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? margin-right:10px;
? ? ? ? ? ? ? ? margin-bottom:10px;
? ? ? ? ? ? }
? ? ? ? ? ? .jr div p{
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? color:#fff；
? ? ? ? ? ? ? ? padding-top:20px;
? ? ? ? ? ? ? ? font-weight:800;
? ? ? ? ? ? }
? ? ? ? ? ? .text{
? ? ? ? ? ? ? ? width:240px;
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? }
? ? ? ? ? ? .jr div span{
? ? ? ? ? ? ? ? display: none;
? ? ? ? ? ? }
Body部分：
1月
? ? ? ? ? ? ? ? ? JAM
1月1日:元旦節(jié)
2月
? ? ? ? ? ? ? ? ? FEB
2月2日:世界濕地日,2月14日:情人節(jié)
3月
? ? ? ? ? ? ? ? ? MAR
3月3日:全國(guó)愛耳日,3月5日:青年志愿者服務(wù)日,3月8日:婦女節(jié)
4月
? ? ? ? ? ? ? ? ? APR
4月1日:愚人節(jié),4月5日:清明節(jié),4月22日:世界地球日
5月
? ? ? ? ? ? ? ? ? MAY
5月1日:勞動(dòng)節(jié),5月4日:中國(guó)青年節(jié)
6月
? ? ? ? ? ? ? ? ? JUN
6月1日:兒童節(jié),6月5日:世界環(huán)境日
7月
? ? ? ? ? ? ? ? ? JUL
7月1日:建黨節(jié),7月7日:中國(guó)人民抗日戰(zhàn)爭(zhēng)紀(jì)念日
8月
? ? ? ? ? ? ? ? ? AVG
8月1日:建軍節(jié),8月12:國(guó)際青年節(jié)
9月
? ? ? ? ? ? ? ? ? SET
9月8日:國(guó)際掃盲日,9月10日:教師節(jié)
10月
? ? ? ? ? ? ? ? ? OCT
10月1日:國(guó)慶節(jié)、國(guó)際音樂日、國(guó)際老年人日
11月
?NOV
11月8日:中國(guó)記者節(jié),11月9日:消防宣傳日
12月
???????????????????DEC
12月3日:世界殘疾人日,12月4日:全國(guó)法制宣傳日
JS部分：
????????????var div=document.querySelectorAll('.jr>div');
????????????var p=document.querySelectorAll('.jr>div>p');
????????????var span=document.querySelectorAll('.jr>div>span');
????????????var p1=document.getElementsByClassName('p1')[0];
????????????for(var i=0;i
????????????????div[i].onmouseover=function(){
????????????????????this.style.background='pink';
????????????????????this.firstElementChild.style.color='red';
????????????????????p1.innerHTML=this.lastElementChild.innerHTML;
????????????????}
????????????????div[i].onmouseout=function(){
????????????????????this.style.background='black';
????????????????????this.firstElementChild.style.color='white';
????????????????????p1.innerHTML=null;
????????????????}
????????????}
