Effect chart
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> netizen Love sing </title> <style type=" Text/css "> <!--/*============ Global styl e Start ============*/*{margin:0;padding:0;} Body{background-color: #FFF; color: #000; font:normal 12px "XXFarEastFont-Arial", Georgia, "Times New Roman", Times, serif} img{border:0;} A:link,a:visited{color: #000; text-decoration:none;} A:hover{color: #F65100; text-decoration:underline;} Div,p,span,h1,h2,h3,h4,h5,h6,input,ul,li{text-align:left;} Ul,li{list-style-type:none;} Dt,dd{clear:both;} p{line-height:150%;} . Cred,a.cred:link,a.cred:visited,a.cred:hover{color: #F00;} . Corange,a.corange:link,a.corange:visited,a.corange:hover{color: #F65100;} /*clear both*/. Clearfix:after {content: "."; Display:block;height:0;clear:both; VisibilitY:hidden;} . clearfix {Display:inline-block} /* Hides from Ie-mac \*/* html. clearfix {height:1%;} *+html. clearfix {height:1%;} . clearfix {Display:block} /* End Hide from Ie-mac */clear{clear:both font-size:1px width:1px; height:1px; visibility:hidden;} /*============ End Global Style ============*/#sidebar {margin:0 auto;width:265px;height:auto;} #sidebar H2, #softinfo h2{font-size:14px;height:14px;padding:8px 0 7px 20px;border:1px solid #CDCCCA; letter-spacing : 1px;overflow:hidden;background-image:url (images/title-bg.gif);} #sidebar H2 span, #softinfo H2 span{color: #EF2888;} #sidebar p{margin:0 auto;margin:10px 0 10px 0;width:233px;height:36px;color: #777575; Background-color: #F7F7F7; display:block;padding:15px;border:1px solid #C5C4C1;} . num_one{display:none;height:54px;padding:8px 10px;border:1px solid #E5E5E5; border-width:1px 0px;background-color: #F4F4F4 Clear:both} num_one span{float:left;margin-right:10px;display:block;width:37px;height:48px;padding-top : 4pX;background:url (images/bg_num.gif) No-repeat;font-size:32px;color: #FFF; Text-align:center} num_one. P50{float: left;margin-right:10px;} . Num_one ul{float:left;padding:0}. Num_one ul li{padding-bottom:2px;white-space:nowrap}. Num_two{cursor:pointer; height:24px;padding:2px 8px 0;clear:both}. Num_two Span{display:block;width:17px;line-height:14px;float:left; Background:url (images/au_num01.gif) no-repeat 0% 50%;color: #FFF margin:4px 6px 0 0;font-weight:bold;text-align: Center}. Num_two a{float:left;margin-top:4px!important;margin-top:6px}. Bg{background-color: #FBFBFB;} . Bg01{background-color: #F7F7F7;} #copyright {margin:0 auto;margin-top:10px;width:960px;padding:20px 0 20px 0;text-align:center;border-top:3px Solid # DDD;} --> </style> <script language= "javascript" type= "Text/javascript" > <!--//browser-compatible Fetch node method function $ ( OBJECTID) {if (document.getElementById && document.getElementById (objectId)) {//The Consortium DOM return Document.getele Mentbyid (OBJECTID); } else if (document.all && document.all (objectId)) {//MSIE 4 DOM return document.all (objectId); else if (document.layers && Document.layers[objectid]) {//NN 4 DOM. Note:this won ' t find nested layers RET Urn Document.layers[objectid]; } else{return false; }/* Script Form www.wangyou.com */var now_show_id = 0; Function Swap (Id,bool) {//alert (bool); if (id = = now_show_id) return true; NOW_SHOW_ID =id; for (Var i=1;i<=10;i++) {if (bool) {if ($ (' B ' +i)!= null) {$ ("B" +i). style.display = bool? ' None ': ' Block '; $ ("s" +i). style.display = bool? ' Block ': ' None '; } $ ("B" +id). style.display = bool? ' Block ': ' None '; $ ("s" +id). style.display = bool? ' None ': ' Block '; } var now_id = 1; function Swap1 (id,bool) {//alert (bool); if (id = = now_id) return true; NOW_ID =id; for (Var i=1;i<=10;i++) {if (bool) {if ($ (' d ' +i)!= null) {$ ("D" +i). style.display = bool? ' None ': ' Block '; $ ("a" +i). style.display = bool? ' Block ': ' NoNe '; }} $ ("D" +id). style.display = bool? ' Block ': ' None '; $ ("a" +id). style.display = bool? ' None ': ' Block '; }/* End Script///--> </script> </pead> <body> <div id= "sidebar" > <p><span& GT, Song </span> hung People's list </p> <p> with love singing software record upload song to the Netizen to sing! The most songs each week to the top of the list of people, take love to sing Bag! </p> <div id= "S1" onmouseover= "Swap (' 1 ', 1);" class= "Num_two bg01" ><span>01</span>mp3 format--True ... </div><div id= "B1" onmouseout= "Swap (' 1 ', 0);" class= "Num_one" ><span>01</span><div class= "P50" ></div><ul><li>mp3 format--True ... </li><li> singer: 汪宇东 </li> <li> give me a vote >></li></ul></div> <div id= "s2" onmouseover= "Swap (' 2 ', 1);" Class= " Num_two BG "><span>02</span>too youn...</div><div id=" B2 "onmouseout=" Swap (' 2 ', 0); "class=" Num_one "><span>02</span><div class=" P50 "></div><ul><li>too youn... </li><li> singer:outtask...</li><li> to vote for me >></li></ul></div > <div id= "S3" onmouseover= "Swap (' 3 ', 1);" class= "Num_two bg01" ><span>03</span> original → Horror Day </div ><div id= "B3" onmouseout= "Swap" (' 3 ', 0); "class=" Num_one "><span>03</span><div class=" P50 " ></div><ul><li> original → Scary Day </li><li> singer: Sun Yu </li><li> vote for me >></li></ul></div> <div id= "S4" onmouseover= "Swap (' 4 ', 1);" class= "Num_two bg" > <span>04</span> think of your days </div><div id= "B4" onmouseout= "Swap (' 4 ', 0);" class= "Num_one" ><span >04</span><div class= "P50" ></div><ul><li> think of your days </li><li > Singer: Xin Xin </li><li> vote for me >></li></ul></div> <div id= "S5" onmouseover= " Swap (' 5 ', 1); "class=" Num_two bg01 "><span>05</span> coffee years </div><div id=" B5 "Onmouseout= "Swap (' 5 ', 0);" class= "Num_one" ><span>05</span><div class= "P50" ></div><ul> <li> Coffee Age </li><li> singer: Handsome _wu</li><li> vote for me >></li></ ul></div> <div id= "S6" onmouseover= "Swap (' 6 ', 1);" class= "Num_two BG" ><span>06</span> Body Other friends </div><div id= "b6" onmouseout= "Swap (' 6 ', 0);" class= "Num_one" ><span>06</span><div class= "P50" ></div><ul><li> Other friends </li><li> singers: With the wind Yang </li><li > Give me a vote >></li></ul></div> <div id= "S7" onmouseover= "Swap" (' 7 ', 1); "Class=" Num_two Bg01 "><span>07</span> School" </div><div id= "B7" onmouseout= "Swap (' 7 ', 0);" class= "Num_one" > <span>07</span><div class= "P50" ></div><ul><li> "School" </li> <li> Singer: Dress & violin </li><li> vote for me >></li></ul></div> <dIV id= "S8" onmouseover= "Swap" (' 8 ', 1); "class=" Num_two bg "><span>08</span> original" Classic Love letter "</div><div Id= "B8" onmouseout= "Swap (' 8 ', 0);" class= "Num_one" ><span>08</span><div class= "P50" ></div ><ul><li> original "Classic Love Letter" </li><li> singer: Prague のvae</li><li> vote for me > ></li></ul></div> <div id= "S9" onmouseover= "Swap (' 9 ', 1);" class= "Num_two bg01" ><span >09</span> Wish (original) </div><div id= "B9" onmouseout= "Swap (' 9 ', 0);" class= "Num_one" ><span>09 </span><div class= "P50" ></div><ul><li> Wish (original) </li><li> Singer: Superman love</li><li> to vote for me >></li></ul></div> <div id= "S10" onmouseover= " Swap (' 1 '); "class=" Num_two bg "><span>10</span>" Music Princess "</div><div id=" B10 "onmouseout=" Swap (' 0 ");" class= "Num_one" ><span>10</span><div class= "P50" ></div><ul><li> ":☆gina★</li><li>" </li><li> singer voted for me >></ li></ul></div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
