CSS原来还可以这样用

         最近给学院网站添了个分栏，表面上很简单，却还含了不少技术成分。当然这东西是通过js+css实现的。首先是js的编写，不过算是简单的，重头戏是css的编写。
先附上js:        这里是是显示信息的两栏，class为activecontent表示层可见，hidedencontent反之，写在css中。

< script type = " text/javascript " >
    tabCount  =   2 ;
     function  changeTab(tabIndex)
     ... {
        for (i = 1; i <= tabCount; i++)
        ...{
            tab = document.getElementById("FenceTab" + i);   
            content = document.getElementById("TopTenContent" + i);
            marquee = document.getElementById("marquee" + i);
            marquee.start();
            if (i == tabIndex)
            ...{
                tab.className = "active";   
                content.className = "activecontent";                
            }
            else
            ...{
                tab.className = "";
                content.className = "hiddencontent";
                marquee.stop();
            }
        }
    }
</ script >

 

<% ... --begin 分栏  Author: Jawf-- %>
  < div  id ="TopTenContent1"  class ="activecontent" >
    < marquee  direction ="up"  scrollamount ="1"  scrolldelay ="15"  id =marquee1   onmouseover =marquee1.stop()  onmouseout =marquee1.start() >       
     <% ... //里面是从数据库中取公告的代码 %>
    </ marquee >
  </ div >     
  < div  id ="TopTenContent2"  class ="hiddencontent" >  
    < marquee  direction ="up"  scrollamount ="1"  scrolldelay ="15"  id =marquee2   onmouseover =marquee2.stop()  onmouseout =marquee2.start() >      
     <% ... //里面是从数据库中取通知的代码 %>
    </ marquee >
  </ div >

        这里是选择哪一栏的标记，我采用的是图片，在css中可以看得出来是切换图片 

  < div  id ="fence" >
    < li  id ="fence1" >< a  id ="FenceTab1"  onmouseover ="changeTab(1);"  onclick ="return false;"  class ="active"  href ="#" >< img  src ="common/images/spacer.gif"  alt ="学院公告"  width ="81"  height ="20"   /></ a >   </ li >
    < li  id ="fence2" >< a  id ="FenceTab2"  onmouseover ="changeTab(2);"  onclick ="return false;"  href ="#" >< img  src ="common/images/spacer.gif"  alt ="教学通知"  width ="81"  height ="20"   /></ a ></ li >
  </ div >
  <% ... --end 分栏-- %>  

附css:

/**/ /*begin 分栏 Author: Jawf*/
ul  {...} {
 margin: 0;
 padding: 0;
}
#rightbottom #fence {...} {
 height: 20px;
 width: auto;
 line-height: 20px;
 background-position: left;
 text-align: left;
}
#rightbottom li  {...} {
  display: inline;
  overflow: hidden;
  list-style-type: none;
  margin: 0px; }

#rightbottom #fence1 {...} {
 margin:2px 0px 0px 0px;
 padding:0px;
 border:0px;
 width:81px;
 height:20px;
 text-align:left; 
}
#rightbottom #fence1 a {...} {background: url(../images/fence11.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active  {...} {background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active:hover {...} {background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence2 {...} {
 margin:2px 0px 0px 0px;
 padding:0px;
 border:0px;
 width:81px;
 height:20px;
 text-align:left; 
}
#rightbottom #fence2 a {...} {background: url(../images/fence21.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active {...} {background: url(../images/fence22.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active:hover {...} {background: url(../images/fence22.gif) no-repeat left bottom;}

.activecontent
{...} {
 text-align: justify;
 padding: 2px;
 z-index: 2;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

.activecontent a  {...} {
  text-decoration: none;
  color: #00f; }

.activecontent a:hover
{...} {
    text-decoration: underline;
}

.activecontent ol
{...} {
    margin: 5px 5px 5px 25px !important;
    margin: 5px 5px 5px 30px;
    padding: 0px;
}

.activecontent li
{...} {
    margin: 0px;
    padding: 0px;
}

.hiddencontent
{...} {
    display: none;
}
/**/ /*end 分栏*/