自己整理的腾讯网站的新闻导航【鼠标经过就切换分类】

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
     < style > ...
        *{...}{margin:0;padding:0;}
        body {...}{
            margin:0 auto;
            padding:0;
            color:black;
            background-color:white;
            font-size:12px;      
            line-height:150%;
            text-align:center;
            }
        div,form,img,ul,ol,li,dl,dt,dd {...}{margin:0;padding:0;border:0;}
        dt,dd{...}{clear:both;}
        h1,h2,h3,h4,h5,h6 {...}{margin:0;padding:0;color:blue;}
        textarea,input{...}{
            font-size:12px;
            margin:0;padding:0;
            }
        h1{...}{
            font-size: 22px;
            color:#000;
            font-weight: bold;
            }
        table,td,tr,th{...}{font-size:12px;}
        /**//* 链接&&文字式样 */
        a:link {...}{color:black;text-decoration:none;}
        a:visited{...}{color:black;text-decoration:none;}
        a:hover{...}{color:#C2130E;text-decoration:underline;}
        a:active{...}{color:#C2130E;}

        a.lblack,a.lblack:link,a.lblack:visited {...}{color:black;text-decoration: underline;}
        a.lblack:hover{...}{color:#C2130E}
        a.lwhite,a.lwhite:link,a.lwhite:visited {...}{color:white;}
        a.lwhite:hover{...}{text-decoration: underline;}
        a.lred,a.lred:link,a.lred:visited {...}{color:#C2130E;}
        a.lred:hover{...}{text-decoration: underline;}
        a.lblue,a.lblue:link,a.lblue:visited {...}{color:blue;}
        a.lblue:hover{...}{text-decoration: underline;}

        .tblue{...}{color:blue;}
        .tred{...}{color:#BF1212;}
        .twhite{...}{color:white;}
        .torange{...}{color:#FF6600;}
        /**//* 常用文字边框相关式样*/
        .px12{...}{font-size:12px;}
        .px14{...}{font-size:14px;}
        .bolds{...}{font-weight: bold;}
        .blackborder{...}{border:1px solid black;}
        .underlines,a.underlines:link,a.underlines:visited {...}{text-decoration: underline;}
        /**//* 常用布局式样 */
        .dis{...}{display:block}
        .undis{...}{display:none}
        .lefts{...}{float:left;}
        .rights{...}{float:right;}
        .tbcenter{...}{margin:0 auto;}
        .txtcenter{...}{text-align:center;}
        .clr{...}{font-size:0;width:1px;clear:both;visibility:hidden;line-height:1px;}
        /**//*New Nav*/
        /**//*R:新闻排行*/
        #NewsTop{...}{margin-bottom:16px;clear:both;}
        #NewsTop p{...}{float:left;line-height:21px;}
        #NewsTop p.topTit{...}{width:80px;font-weight:bold;}
        #NewsTop p.topC0{...}{width:40px;border-left:1px solid #F2F2F2;background:#DCDCDC;cursor:pointer;}
        #NewsTop p.topC1{...}{width:40px;border-left:1px solid #F2F2F2;background:#C2130E;color:#fff;}
        #NewsTop #NewsTop_tit{...}{border-bottom:3px solid #C2130E;height:21px;}
        #NewsTop #NewsTop_cnt{...}{
            height:260px;
            padding-top:7px;
            line-height:26px;
            text-align:left;
            padding-left:32px;
            background:url(http://img1.qq.com/pinglun/pics/6787/6787026.gif) no-repeat 12px 13px;;
        }
        #NewsTop #NewsTop_cnt a{...}{color:#666;text-decoration:underline;}
        #NewsTop #NewsTop_cnt a:hover{...}{color:#C2130E;}     </ style >

</ head >
< body >
< div  id ="NewsTop" >
             < div  id ="NewsTop_tit" >
                 < p  class ="topTit"  style ="width:80px" > 新闻排行 </ p >
                 < p  class ="topC0" > 国内 </ p >
                 < p  class ="topC0" > 国际 </ p >
                 < p  class ="topC0" > 社会 </ p >
                 < p  class ="topC0" > 网评 </ p >  
                 < p  class ="topC0" > 博客 </ p >
             </ div >
             < div  id ="NewsTop_cnt" >  
                 < span  title ="Don't delete me" ></ span >
                 < span >
                     < a  target ="_blank"  href ="http://news.qq.com/a/20080323/000337.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000073.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000156.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000223.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000041.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000280.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000651.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000020.htm" > 北京新闻题目11111111111高考 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/001034.htm" > 我国东北将新闻题目11111111111有弱降水 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000414.htm" > 新闻题目11111111111 </ a >< br >

                 </ span >                     
                 < span >
                     < a  target ="_blank"  href ="http://news.qq.com/a/20080324/000043.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000377.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000029.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000148.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000164.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000419.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000241.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000159.htm" > 俄50新闻题目11111111111选 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000326.htm" > 美新闻题目11111111111重灾区(图) </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000509.htm" > 美新闻题目11111111111群 </ a >< br >

                 </ span >
                 < span >
                     < a  target ="_blank"  href ="http://news.qq.com/a/20080323/000470.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000574.htm" > 新闻题目11111111111” </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000106.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000240.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000237.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000161.htm" > 新闻题目11111111111图) </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000704.htm" > 新闻题目11111111111刑 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080324/000002.htm" > 女新闻题目11111111111救(图) </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000659.htm" > 女新闻题目1111111新闻题目11111111111尸 </ a >< br >< a  target ="_blank"  href ="http://news.qq.com/a/20080323/000561.htm" > 私新闻题目11111111111 </ a >< br >

                 </ span >
                 < span >
                     < a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=815299" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=815382" > 新闻题目11111111111爱上对方 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=816114" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=815606" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=816141" > 小学校新闻题目1111111新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=815093" > 新闻题目11111111111审获新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=815717" > 男新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=816071" > 北新闻题目11111111111考 </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=814970" > 河新闻题目11111111111) </ a >< br >< a  target ="_blank"  href ="http://comment1.qq.com/comment.htm?site=news&amp;id=815142" > 新闻题目11111111111 </ a >< br >

                 </ span >
                 < span >
                     < a  target ="_blank"  href ="http://blog.qq.com/qzone/622006396/1205888931.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/303169848/1206004382.htm" > 新闻题目11111111111送老虎 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006474/1205381018.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006500/1205760043.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006595/1205973616.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006563/1205889131.htm" > 新闻题目11111111111 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006565/1205736656.htm" > 吴新闻题目11111111111生 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006592/1206027571.htm" > 新闻题目11111111111？ </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006302/1205999583.htm" > 新闻题目11111111111叹 </ a >< br >< a  target ="_blank"  href ="http://blog.qq.com/qzone/622006568/1204649970.htm" > 原新闻题目11111111111 </ a >< br >

                 </ span >     
             </ div >         
             < script > ...
                var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p'); 
                var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span'); 
                var len=Tags.length; 
                var flag=1;//修改默认值
                for(i=1;i<len;i++)...{
                    Tags[i].value = i;
                    Tags[i].onmouseover=function()...{changeNav(this.value)}; 
                    TagsCnt[i].className='undis';                    
                }
                Tags[flag].className='topC1';
                TagsCnt[flag].className='dis';
                function changeNav(v)...{    
                    Tags[flag].className='topC0';
                    TagsCnt[flag].className='undis';
                    flag=v;    
                    Tags[v].className='topC1';
                    TagsCnt[v].className='dis';
                }
             </ script >
</ div >

</ body >
</ html >