>  기사  >  웹 프론트엔드  >  如何用DIV+CSS来构建内嵌页面跟随按钮变化_html/css_WEB-ITnose

如何用DIV+CSS来构建内嵌页面跟随按钮变化_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:29:521322검색

如何用DIV+CSS来构建内嵌页面跟随按钮变化

效果说明图:

CSS代码:

.PartL {
 BACKGROUND: url() #ffd77b repeat-y; OVERFLOW: hidden;
}
.TabADS {
 OVERFLOW: hidden; WIDTH: 800px;
}
.TabADS UL {
 CLEAR: both; OVERFLOW: hidden; WIDTH: 800px; HEIGHT: 24px;
}
.TabADS LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(images/center1.jpg) #e4e4e4 no-repeat right 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 60px; CURSOR: pointer; COLOR: #333; PADDING-TOP: 6px; HEIGHT: 18px; TEXT-ALIGN: center
}
.TabADS .TasADSOn {
 FONT-WEIGHT: bold; BACKGROUND: url(images/center.jpg) #ffe4a6 no-repeat right 50%; CURSOR: pointer; COLOR: #333; TEXT-ALIGN: center
}
.TabADSCon {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.TabADSCon LI {
 LINE-HEIGHT: 20px; TEXT-ALIGN: left;OVERFLOW: hidden;
}

HTML代码:


   
 
   
   
 
      
       
       

         

               
  •         onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);">功能一
               
  •         onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">功能二
               
  •         onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">功能三
               
  •         onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">功能四
               
  •         onmouseover="setTimeout('Show_TabADSMenu(1,4)',200);">功能五
             

       

       

         

               

  •           
               

  •          

         
         
         
         
  

  
        
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.