以下是 jquery仿FLASH筋斗云动态菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery仿FLASH筋斗云动态菜单</title>
<LINK rel=stylesheet type=text/css href="css/style.css" media=screen>
<SCRIPT type=text/javascript src="js/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/lavalamp.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/xixi.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</SCRIPT>
</head>
<body>
<br><br>
<center>
<DIV id=wrapper>
<UL class=lavaLamp>
<LI><A href="#">家门口</A></LI>
<LI><A href="#">DIY不累</A></LI>
<LI><A href="#">享家生活</A></LI>
<LI><A href="#">家教无法</A></LI>
<LI><A href="#">杂七杂八</A></LI>
<LI><A href="#">童心童乐</A></LI>
<LI><A href="#">翻翻衣橱</A></LI>
<LI><A href="#">留言板</A></LI>
<LI><A href="#">门牌号</A></LI>
</UL>
<A title="Rss Feed" href="#"><IMG style="FLOAT: right" src="images/RSS_icons.png"></A>
</DIV>
<br />
<p></p>
<p>
</p>
<p></p></center>
</body>
</html>
JS代码(lavalamp.min.js):
(function($){
$.fn.lavaLamp=function(o){
o=$.extend({
fx:"linear",speed:500,click:function(){
}
}
,o||{
}
);
return this.each(function(){
var b=$(this),noop=function(){
}
,$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current-cat",this)[0]||$($li[0]).addClass("current-cat")[0];
$li.not(".back").hover(function(){
move(this)}
,noop);
$(this).hover(noop,function(){
move(curr)}
);
$li.click(function(e){
setCurr(this);
return o.click.apply(this,[e,this])}
);
setCurr(curr);
function setCurr(a){
$back.css({
"left":a.offsetLeft+"px","width":a.offsetWidth+"px"}
);
curr=a}
;
function move(a){
$back.each(function(){
$(this).dequeue()}
).animate({
width:a.offsetWidth,left:a.offsetLeft}
,o.speed,o.fx)}
}
)}
}
)(jQuery)
JS代码(xixi.js):
jQuery.easing={
easein:function(B,C,A,E,D){
return E*(C/=D)*C+A}
,easeinout:function(B,C,A,F,E){
if(C<E/2){
return 2*F*C*C/(E*E)+A}
var D=C-E/2;
return -2*F*D*D/(E*E)+2*F*D/E+F/2+A}
,easeout:function(B,C,A,E,D){
return -E*C*C/(D*D)+2*E*C/D+A}
,expoin:function(B,C,A,F,E){
var D=1;
if(F<0){
D*=-1;
F*=-1}
return D*(Math.exp(Math.log(F)/E*C))+A}
,expoout:function(B,C,A,F,E){
var D=1;
if(F<0){
D*=-1;
F*=-1}
return D*(-Math.exp(-Math.log(F)/E*(C-E))+F+1)+A}
,expoinout:function(B,C,A,F,E){
var D=1;
if(F<0){
D*=-1;
F*=-1}
if(C<E/2){
return D*(Math.exp(Math.log(F/2)/(E/2)*C))+A}
return D*(-Math.exp(-2*Math.log(F/2)/E*(C-E))+F+1)+A}
,bouncein:function(B,C,A,E,D){
return E-jQuery.easing.bounceout(B,D-C,0,E,D)+A}
,bounceout:function(B,C,A,E,D){
if((C/=D)<(1/2.75)){
return E*(7.5625*C*C)+A}
else{
if(C<(2/2.75)){
return E*(7.5625*(C-=(1.5/2.75))*C+0.75)+A}
else{
if(C<(2.5/2.75)){
return E*(7.5625*(C-=(2.25/2.75))*C+0.9375)+A}
else{
return E*(7.5625*(C-=(2.625/2.75))*C+0.984375)+A}
}
}
}
,bounceinout:function(B,C,A,E,D){
if(C<D/2){
return jQuery.easing.bouncein(B,C*2,0,E,D)*0.5+A}
return jQuery.easing.bounceout(B,C*2-D,0,E,D)*0.5+E*0.5+A}
,elasin:function(B,D,A,H,G){
var E=1.70158;
var F=0;
var C=H;
if(D==0){
return A}
if((D/=G)==1){
return A+H}
if(!F){
F=G*0.3}
if(C<Math.abs(H)){
C=H;
var E=F/4}
else{
var E=F/(2*Math.PI)*Math.asin(H/C)}
return -(C*Math.pow(2,10*(D-=1))*Math.sin((D*G-E)*(2*Math.PI)/F))+A}
,elasout:function(B,D,A,H,G){
var E=1.70158;
var F=0;
var C=H;
if(D==0){
return A}
if((D/=G)==1){
return A+H}
if(!F){
F=G*0.3}
if(C<Math.abs(H)){
C=H;
var E=F/4}
else{
var E=F/(2*Math.PI)*Math.asin(H/C)}
return C*Math.pow(2,-10*D)*Math.sin((D*G-E)*(2*Math.PI)/F)+H+A}
,elasinout:function(B,D,A,H,G){
var E=1.70158;
var F=0;
var C=H;
if(D==0){
return A}
if((D/=G/2)==2){
return A+H}
if(!F){
F=G*(0.3*1.5)}
if(C<Math.abs(H)){
C=H;
var E=F/4}
else{
var E=F/(2*Math.PI)*Math.asin(H/C)}
if(D<1){
return -0.5*(C*Math.pow(2,10*(D-=1))*Math.sin((D*G-E)*(2*Math.PI)/F))+A}
return C*Math.pow(2,-10*(D-=1))*Math.sin((D*G-E)*(2*Math.PI)/F)*0.5+H+A}
,backin:function(B,C,A,F,E){
var D=1.70158;
return F*(C/=E)*C*((D+1)*C-D)+A}
,backout:function(B,C,A,F,E){
var D=1.70158;
return F*((C=C/E-1)*C*((D+1)*C+D)+1)+A}
,backinout:function(B,C,A,F,E){
var D=1.70158;
if((C/=E/2)<1){
return F/2*(C*C*(((D*=(1.525))+1)*C-D))+A}
return F/2*((C-=2)*C*(((D*=(1.525))+1)*C+D)+2)+A}
,linear:function(B,C,A,E,D){
return E*C/D+A}
}
;
CSS代码(style.css):
#respond INPUT#submit{BORDER-BOTTOM:#888888 1px solid;BORDER-LEFT:#888888 1px solid;BACKGROUND:#99cc33 0px 0px;COLOR:#ffffff;BORDER-TOP:#888888 1px solid;CURSOR:pointer;BORDER-RIGHT:#888888 1px solid}
HTML{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
BODY{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px;color:#DDD}
H1{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
H2{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
H3{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
H4{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
H5{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
H6{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
ADDRESS{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
BLOCKQUOTE{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
DD{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
DL{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
HR{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
FORM{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px;}
UL{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
.resize{WIDTH:500px;HEIGHT:150px}
.replybtn{BORDER-BOTTOM:#aaaaaa 1px solid;BORDER-LEFT:#aaaaaa 1px solid;PADDING-BOTTOM:4px;PADDING-LEFT:8px;PADDING-RIGHT:8px;BACKGROUND:#e5f4fd 0px 0px;COLOR:#666666;BORDER-TOP:#aaaaaa 1px solid;FONT-WEIGHT:bold;BORDER-RIGHT:#aaaaaa 1px solid;PADDING-TOP:4px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px}
.topad{BORDER-BOTTOM:#f0f0f0 1px solid;TEXT-ALIGN:center;BORDER-LEFT:#f0f0f0 1px solid;LINE-HEIGHT:100px;WIDTH:460px;BACKGROUND:#fcfcfc 0px 0px;HEIGHT:100px;COLOR:#eaeaea;MARGIN-LEFT:115px;FONT-SIZE:1.6em;BORDER-TOP:#f0f0f0 1px solid;BORDER-RIGHT:#f0f0f0 1px solid}
.postad{MARGIN-TOP:12px}
.postad A{WIDTH:566px;DISPLAY:block;BACKGROUND:url(http://www.diymom.cn/image/oneqoo.gif) 0px 0px;HEIGHT:90px}
.postad A:hover{BACKGROUND:url(http://www.diymom.cn/image/oneqoo.gif) 0px -92px}
.wp-caption{BORDER-BOTTOM:#dddddd 1px solid;TEXT-ALIGN:center;BORDER-LEFT:#dddddd 1px solid;BACKGROUND-COLOR:#fbfbfb;MARGIN:10px;BORDER-TOP:#dddddd 1px solid;BORDER-RIGHT:#dddddd 1px solid;PADDING-TOP:4px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px}
.aligncenter{DISPLAY:block;MARGIN-LEFT:auto;MARGIN-RIGHT:auto}
DL.aligncenter{DISPLAY:block;MARGIN-LEFT:auto;MARGIN-RIGHT:auto}
.wp-caption-text{TEXT-ALIGN:center;PADDING-BOTTOM:9px;PADDING-LEFT:9px;PADDING-RIGHT:9px;FONT-SIZE:12px;PADDING-TOP:9px}
#comments IMG{BORDER-BOTTOM:#dcdcdc 1px solid;BORDER-LEFT:#dcdcdc 1px solid;PADDING-BOTTOM:3px;PADDING-LEFT:3px;PADDING-RIGHT:3px;BACKGROUND:#fafafa 0px 0px;BORDER-TOP:#dcdcdc 1px solid;BORDER-RIGHT:#dcdcdc 1px solid;PADDING-TOP:3px}
HTML{FONT-SIZE:62.5%}
BODY{LINE-HEIGHT:1.8em;FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,arial,helvetica,sans-serif;BACKGROUND:#000000;FONT-SIZE:1.2em}
H1{MARGIN:0px}
H2{MARGIN:0px}
H3{MARGIN:0px}
H4{MARGIN:0px}
H5{MARGIN:0px}
H6{MARGIN:0px}
H1{FONT-SIZE:2em}
H2{FONT-SIZE:1.8em}
H3{BORDER-BOTTOM:#eeeeee 1px solid;MARGIN-BOTTOM:12px;COLOR:#80be06;FONT-SIZE:1.4em}
H4{BORDER-BOTTOM:#eeeeee 1px solid;MARGIN-TOP:13px;COLOR:#99cc33;FONT-SIZE:1.4em}
H5{FONT-SIZE:1.3em}
H6{FONT-SIZE:1.2em}
A{COLOR:#598d32;TEXT-DECORATION:none}
A:hover{COLOR:#80be06;TEXT-DECORATION:none}
A IMG{BORDER-BOTTOM:medium none;POSITION:relative;BORDER-LEFT:medium none;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;BORDER-TOP:medium none;BORDER-RIGHT:medium none;PADDING-TOP:0px}
UL{LIST-STYLE:none none outside}
UL LI{}
A.more-link{}
sidebar UL.sidebar UL.p{PADDING-BOTTOM:0.6em;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0.2em}
CODE{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,"Courier New",Courier,monospace}
BLOCKQUOTE{BORDER-LEFT:#dddddd 4px solid;MARGIN:1em 0px 0px;BACKGROUND:#f5f5f5 0px 0px}
BLOCKQUOTE P{PADDING-BOTTOM:1em;PADDING-LEFT:1em;PADDING-RIGHT:1em;PADDING-TOP:1em}
BLOCKQUOTE BLOCKQUOTE{MARGIN:0px 1em;WIDTH:auto;BACKGROUND:#ffffff 0px 0px;FLOAT:none}
DD{PADDING-BOTTOM:0px;PADDING-LEFT:2em;PADDING-RIGHT:0px;PADDING-TOP:0px}
FORM{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,Arial,Helvetica,sans-serif;FONT-SIZE:12px}
INPUT{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,Arial,Helvetica,sans-serif}
TEXTAREA{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,Arial,Helvetica,sans-serif}
P IMG{BORDER-BOTTOM:#dcdcdc 1px solid;BORDER-LEFT:#dcdcdc 1px solid;PADDING-BOTTOM:8px;PADDING-LEFT:8px;PADDING-RIGHT:8px;MAX-WIDTH:100%;BACKGROUND:#fafafa 0px 0px;BORDER-TOP:#dcdcdc 1px solid;BORDER-RIGHT:#dcdcdc 1px solid;PADDING-TOP:8px}
IMG.centered{DISPLAY:block;MARGIN-LEFT:auto;MARGIN-RIGHT:auto}
IMG.alignright{BORDER-BOTTOM:#ededed 1px solid;BORDER-LEFT:#ededed 1px solid;PADDING-BOTTOM:4px;MARGIN:3px 0px 2px 10px;PADDING-LEFT:4px;PADDING-RIGHT:4px;DISPLAY:inline;BORDER-TOP:#ededed 1px solid;BORDER-RIGHT:#ededed 1px solid;PADDING-TOP:4px}
IMG.alignleft{BORDER-BOTTOM:#ededed 1px solid;BORDER-LEFT:#ededed 1px solid;PADDING-BOTTOM:4px;MARGIN:3px 10px 2px 0px;PADDING-LEFT:4px;PADDING-RIGHT:4px;DISPLAY:inline;BORDER-TOP:#ededed 1px solid;BORDER-RIGHT:#ededed 1px solid;PADDING-TOP:4px}
.alignleft{FLOAT:left}
.alignright{FLOAT:right}
.clear{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;CLEAR:both;PADDING-TOP:0px}
SMALL{FONT-SIZE:11px}
.small{FONT-SIZE:11px}
.xsmall{COLOR:#8f8f8f;FONT-SIZE:10px}
.lavaLamp{POSITION:relative;BACKGROUND-COLOR:white;FLOAT:left}
.lavaLamp LI{TEXT-ALIGN:center;LINE-HEIGHT:34px;LIST-STYLE-TYPE:none;WIDTH:83px;FLOAT:left}
.lavaLamp LI.back{Z-INDEX:1;POSITION:absolute;WIDTH:9px;BACKGROUND:url(../images/bgtab.gif) no-repeat 0px 0px;HEIGHT:42px}
.lavaLamp LI A{Z-INDEX:2;POSITION:relative;FONT-VARIANT:small-caps;WIDTH:84px;DISPLAY:block;HEIGHT:42px;COLOR:#555555;FONT-SIZE:1.2em;TEXT-DECORATION:none}
.lavaLamp LI A:hover{COLOR:#ffffff}
.lavaLamp LI.current-cat A{COLOR:darkgreen}
.post{BORDER-BOTTOM:#eeeeee 1px solid;BORDER-LEFT:#eeeeee 1px solid;PADDING-BOTTOM:10px;PADDING-LEFT:20px;PADDING-RIGHT:20px;MARGIN-BOTTOM:16px;BORDER-TOP:#eeeeee 1px solid;BORDER-RIGHT:#eeeeee 1px solid;PADDING-TOP:20px}
.post H2{CLEAR:both}
.post H2 A{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,Geneva,Arial,Helvetica,sans-serif;COLOR:#80be06;FONT-SIZE:24px}
.post H2 A:hover{COLOR:#eeeeee;TEXT-DECORATION:none}
.post UL LI{LINE-HEIGHT:15px;MARGIN-BOTTOM:5px;HEIGHT:15px;FONT-SIZE:13px;PADDING-TOP:5px}
.post UL LI A{PADDING-LEFT:21px;DISPLAY:block;BACKGROUND:url(images/bullet.gif) no-repeat 0px 0px}
.post UL LI A:hover{BACKGROUND:url(images/bullet.gif) no-repeat 0px -15px;FONT-WEIGHT:bold}
.entry-date{MARGIN:10px 0px;COLOR:#757575;FONT-SIZE:12px}
.entry-meta{COLOR:#757575;MARGIN-LEFT:20px;FONT-SIZE:0.9em}
.entry-content{MARGIN:10px}
#comments-display{PADDING-BOTTOM:0px;PADDING-LEFT:10px;PADDING-RIGHT:10px;PADDING-TOP:0px}
#comments OL{PADDING-BOTTOM:0px;LIST-STYLE-TYPE:decimal;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
#comments OL LI{BORDER-BOTTOM:#eeeeee 1px solid;PADDING-BOTTOM:3px;PADDING-LEFT:10px;PADDING-RIGHT:10px;MARGIN-BOTTOM:10px;BACKGROUND:#fafafa 0px 0px;PADDING-TOP:3px}
#comments SPAN.comment-author{FONT-SIZE:16px}
H4#comments-count{}
.comment-left{TEXT-ALIGN:right;COLOR:#888888}
.comment-right{}
#respond{PADDING-BOTTOM:0px;PADDING-LEFT:10px;PADDING-RIGHT:10px;PADDING-TOP:10px}
#wrapper{TEXT-ALIGN:left;WIDTH:985px;height:42px;clear:both;BACKGROUND:#ffffff 0px 0px;}
#top{PADDING-BOTTOM:0px;MARGIN:0px 10px;PADDING-LEFT:0px;PADDING-RIGHT:0px;CLEAR:both;PADDING-TOP:0px}
#topleft{MARGIN:10px 0px;PADDING-LEFT:15px;WIDTH:358px;FLOAT:left;HEIGHT:100px}
H1#sitename{MARGIN:0px;PADDING-TOP:30px}
H1#sitename A{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,"Myriad Web","Myriad Pro",Myriad,Arial,Helvetica,sans-serif;COLOR:#80be06;FONT-SIZE:1.5em;TEXT-DECORATION:none}
H1#sitename A:hover{COLOR:#666666}
#topleft P{PADDING-BOTTOM:0px;MARGIN-TOP:1px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,"Myriad Web","Myriad Pro",Myriad,Arial,Helvetica,sans-serif;FLOAT:right;COLOR:#222222;FONT-SIZE:16px;PADDING-TOP:0px}
#topright{WIDTH:966px;BACKGROUND:#80be06 0px 0px;FLOAT:left}
UL#categories{TEXT-ALIGN:right;LINE-HEIGHT:14px;PADDING-RIGHT:16px}
UL#categories B{DISPLAY:inline;COLOR:#696969}
UL#categories LI{PADDING-BOTTOM:0px;PADDING-LEFT:1px;PADDING-RIGHT:1px;DISPLAY:inline;PADDING-TOP:0px}
UL#categories UL{PADDING-BOTTOM:0px;PADDING-LEFT:1px;PADDING-RIGHT:1px;DISPLAY:inline;PADDING-TOP:0px}
UL#categories A{FONT-SIZE:1em;FONT-WEIGHT:normal;TEXT-DECORATION:none}
UL#categories A:hover{COLOR:#000000}
#search{TEXT-ALIGN:right;PADDING-BOTTOM:3px;PADDING-LEFT:3px;PADDING-RIGHT:3px;BACKGROUND:#80be06 0px 0px;FLOAT:right;PADDING-TOP:3px}
#search INPUT#s{BORDER-BOTTOM:#ffffff 1px solid;BORDER-LEFT:#ffffff 1px solid;WIDTH:160px;FLOAT:left;HEIGHT:19px;COLOR:#666666;FONT-SIZE:13px;BORDER-TOP:#ffffff 1px solid;BORDER-RIGHT:#ffffff 1px solid}
#search INPUT#searchsubmit{BORDER-BOTTOM:#ffffff 1px solid;BORDER-LEFT:#ffffff 1px solid;PADDING-BOTTOM:0px;PADDING-LEFT:5px;PADDING-RIGHT:5px;BACKGROUND:#80be06 0px 0px;FLOAT:left;HEIGHT:23px;COLOR:#ffffff;BORDER-TOP:#ffffff 1px solid;CURSOR:pointer;BORDER-RIGHT:#ffffff 1px solid;PADDING-TOP:0px}
#header{PADDING-BOTTOM:0px;PADDING-LEFT:10px;PADDING-RIGHT:10px;CLEAR:both;PADDING-TOP:0px}
#homecontent{PADDING-BOTTOM:0px;PADDING-LEFT:10px;PADDING-RIGHT:10px;CLEAR:both;PADDING-TOP:0px}
#container{PADDING-BOTTOM:0px;PADDING-LEFT:10px;PADDING-RIGHT:10px;CLEAR:both;PADDING-TOP:0px}
#headerleft{WIDTH:639px;BACKGROUND:#eeeeee 0px 0px;FLOAT:left;HEIGHT:242px;COLOR:#ffffff;OVERFLOW:hidden}
#headerleft A.readmore{COLOR:#ffffff;FONT-WEIGHT:normal;TEXT-DECORATION:none}
#headerleft A.readmore:hover{COLOR:#ffffff;TEXT-DECORATION:none}
A.readmore{TEXT-DECORATION:none}
A.readmore:hover{TEXT-DECORATION:none}
#headerleft UL{PADDING-BOTTOM:30px;PADDING-LEFT:10px;PADDING-RIGHT:10px;PADDING-TOP:10px}
#topnews_rightnarrow{WIDTH:300px}
.topnews-meta{PADDING-BOTTOM:20px;COLOR:#696969;FONT-SIZE:10px}
.topnews-meta A{FONT-SIZE:1.2em;FONT-WEIGHT:normal;TEXT-DECORATION:none}
.topnews-meta A:hover{TEXT-DECORATION:none}
.topnews-excerpt{HEIGHT:120px;OVERFLOW:hidden}
H2#topnews-title A{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,Geneva,Arial,Helvetica,sans-serif;COLOR:#ffffff;FONT-SIZE:24px}
#headerright{WIDTH:320px;MARGIN-BOTTOM:16px;FLOAT:right}
#featured{PADDING-BOTTOM:16px;PADDING-LEFT:10px;PADDING-RIGHT:10px;CLEAR:both;FONT-SIZE:1em;PADDING-TOP:0px}
#featured A:hover{TEXT-DECORATION:none}
#featured .box{BORDER-BOTTOM:#ebebeb 1px solid;BACKGROUND:#ffffff 0px 0px;BORDER-TOP:#ebebeb 1px solid;BORDER-RIGHT:#ebebeb 1px solid}
#featured H2{LINE-HEIGHT:1.2em;MARGIN:0px;FONT-SIZE:1.4em}
#featured P{LINE-HEIGHT:1.6em;MARGIN:0px;COLOR:#000000;FONT-SIZE:1.2em;PADDING-TOP:0px}
.featuredleft{POSITION:absolute}
.featuredright{POSITION:absolute;PADDING-BOTTOM:0px;PADDING-LEFT:0px;WIDTH:209px;PADDING-RIGHT:0px;DISPLAY:block;COLOR:#262626;FONT-SIZE:1em;FONT-WEIGHT:normal;PADDING-TOP:0px;LEFT:454px;opacity:0.9}
.featuredright A{TEXT-DECORATION:none}
.featuredright A:hover{TEXT-DECORATION:none}
#featured UL{LIST-STYLE:none none outside;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
#featured UL LI{POSITION:relative;BORDER-LEFT:#ebebeb 1px solid;PADDING-BOTTOM:10px;BACKGROUND-COLOR:#ffffff;PADDING-LEFT:10px;WIDTH:50px;PADDING-RIGHT:10px;DISPLAY:block;FLOAT:left;HEIGHT:322px;OVERFLOW:hidden;CURSOR:pointer;PADDING-TOP:10px}
#featured UL LI DIV{TEXT-ALIGN:justify;DISPLAY:block}
#featured .block1{WIDTH:659px}
#homeleft{WIDTH:629px;FLOAT:left}
#content{WIDTH:629px;FLOAT:left}
#homeleft P{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0.2em}
.bread{POSITION:absolute;TEXT-ALIGN:center;PADDING-BOTTOM:0px;MARGIN:-13px 0px 0px 15px;PADDING-LEFT:5px;PADDING-RIGHT:5px;DISPLAY:block;FLOAT:left;COLOR:#555555;FONT-SIZE:1.1em;PADDING-TOP:0px}
.bread P{PADDING-BOTTOM:0px;BACKGROUND-COLOR:#ffffff;PADDING-LEFT:0px;PADDING-RIGHT:0px;FLOAT:left;FONT-SIZE:1.3em;FONT-WEIGHT:bold;PADDING-TOP:0px}
#homeleft H4{TEXT-ALIGN:center;PADDING-BOTTOM:0px;BACKGROUND-COLOR:#ffffff;MARGIN-TOP:-18px;PADDING-LEFT:8px;WIDTH:121px;PADDING-RIGHT:8px;DISPLAY:block;MARGIN-BOTTOM:0px;FLOAT:right;FONT-SIZE:1.4em;PADDING-TOP:0px}
#homeleft H4 A{COLOR:#555555;FONT-WEIGHT:bold}
#homeleft H4 A:hover{COLOR:#80be06;TEXT-DECORATION:none}
#homeleft H2{FONT-FAMILY:"微软雅黑","Microsoft YaHei",Verdana,Geneva,Arial,Helvetica,sans-serif;FLOAT:none;FONT-SIZE:17px}
#homeleft .date{PADDING-LEFT:200px;BACKGROUND:url(images/comment.gif) no-repeat 185px 6px;COLOR:#666666;FONT-SIZE:11px}
#homeleft UL LI{BORDER-BOTTOM:#eeeeee 1px solid;BORDER-LEFT:#eeeeee 1px solid;PADDING-BOTTOM:10px;MARGIN:0px 0px 16px;PADDING-LEFT:10px;WIDTH:608px;PADDING-RIGHT:10px;BACKGROUND:#ffffff 0px 0px;HEIGHT:131px;BORDER-TOP:#eeeeee 1px solid;BORDER-RIGHT:#eeeeee 1px solid;PADDING-TOP:10px}
UL#cat-excerpts{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
#homeright{WIDTH:320px;FLOAT:right}
#footer{PADDING-BOTTOM:5px;MARGIN:0px 10px;PADDING-LEFT:10px;PADDING-RIGHT:10px;BACKGROUND:#80be06 0px 0px;COLOR:#ffffff;CLEAR:both;PADDING-TOP:5px}
#footer A{COLOR:#ffffff;FONT-WEIGHT:normal;TEXT-DECORATION:none}
#footer A:hover{COLOR:#333333;TEXT-DECORATION:none}
.sidebar{WIDTH:320px;FLOAT:right}
.sidebar UL.sidebar{LIST-STYLE:none none outside;PADDING-BOTTOM:0px;MARGIN:0px 0px 16px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:1.2em;PADDING-TOP:0px}
.sidebar UL.sidebar LI{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;COLOR:#666;PADDING-TOP:0px}
.sidebar UL.sidebar H2{POSITION:absolute;TEXT-ALIGN:center;PADDING-BOTTOM:0px;BACKGROUND-COLOR:#ffffff;MARGIN-TOP:-20px;PADDING-LEFT:8px;WIDTH:120px;PADDING-RIGHT:8px;DISPLAY:block;FLOAT:left;COLOR:#555555;FONT-SIZE:1.1em;PADDING-TOP:0px}
.sidebar UL.sidebar UL{PADDING-BOTTOM:0px;MARGIN-TOP:2px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
.sidebar UL.sidebar LI{BORDER-BOTTOM:#eeeeee 1px solid;BORDER-LEFT:#eeeeee 1px solid;PADDING-BOTTOM:10px;MARGIN:0px;PADDING-LEFT:10px;WIDTH:93%;PADDING-RIGHT:10px;BACKGROUND:#ffffff 0px 0px;FLOAT:left;FONT-SIZE:12px;BORDER-TOP:#eeeeee 1px solid;BORDER-RIGHT:#eeeeee 1px solid;PADDING-TOP:10px}
.sidebar UL.sidebar UL LI{BORDER-BOTTOM:0px;BORDER-LEFT:0px;PADDING-BOTTOM:0px;LINE-HEIGHT:15px;PADDING-LEFT:0px;WIDTH:50%;PADDING-RIGHT:0px;MARGIN-BOTTOM:5px;FLOAT:left;HEIGHT:15px;COLOR:#80be06;BORDER-TOP:0px;BORDER-RIGHT:0px;PADDING-TOP:0px}
.sidebar UL.sidebar UL LI A{PADDING-BOTTOM:0px;PADDING-LEFT:24px;PADDING-RIGHT:0px;DISPLAY:block;BACKGROUND:url(images/bullet.gif) no-repeat 0px 0px;PADDING-TOP:0px}
.sidebar UL.sidebar UL LI A:hover{BACKGROUND:url(images/bullet.gif) no-repeat 0px -15px}
#fragment-1 UL LI{}
UL.ui-tabs-nav{LIST-STYLE:none none outside;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;BACKGROUND:url(images/grey.png) repeat-x left bottom;PADDING-TOP:0px}
UL.ui-tabs-nav LI{BORDER-BOTTOM:#efefef 1px solid;BORDER-LEFT:#efefef 1px solid;PADDING-BOTTOM:0px;PADDING-LEFT:17px;PADDING-RIGHT:17px;BACKGROUND:#fafafa 0px 0px;FLOAT:left;HEIGHT:30px;BORDER-TOP:#efefef 1px solid;FONT-WEIGHT:bold;BORDER-RIGHT:#efefef 1px solid;PADDING-TOP:0px}
UL.ui-tabs-nav LI.ui-tabs-selected{BORDER-BOTTOM:#ffffff 1px solid;BORDER-LEFT:#ebebeb 1px solid;PADDING-BOTTOM:0px;PADDING-LEFT:26px;PADDING-RIGHT:26px;BACKGROUND:#ffffff 0px 0px;BORDER-TOP:#ebebeb 1px solid;BORDER-RIGHT:#ebebeb 1px solid;PADDING-TOP:0px}
.ui-tabs-hide{DISPLAY:none}
.ui-tabs-nav:after{DISPLAY:block;CLEAR:both;CONTENT:" "}
.ui-tabs-nav A{PADDING-BOTTOM:0px;PADDING-LEFT:2px;PADDING-RIGHT:2px;FLOAT:left;PADDING-TOP:0px}
.ui-tabs-nav A SPAN{PADDING-BOTTOM:0px;PADDING-LEFT:2px;PADDING-RIGHT:2px;FLOAT:left;PADDING-TOP:0px}
.ui-tabs-nav A{MARGIN:4px;OUTLINE-STYLE:none;PADDING-LEFT:0px;OUTLINE-WIDTH:0px;WHITE-SPACE:nowrap;TEXT-DECORATION:none}
.ui-tabs-nav A:link{COLOR:#aaaaaa}
.ui-tabs-nav A:visited{COLOR:#aaaaaa}
.ui-tabs-nav .ui-tabs-selected A{Z-INDEX:2;POSITION:relative}
.ui-tabs-nav .ui-tabs-selected A:link{COLOR:#598d32;FONT-SIZE:14px;CURSOR:text;FONT-WEIGHT:bold}
.ui-tabs-nav .ui-tabs-selected A:visited{COLOR:#598d32;FONT-SIZE:14px;CURSOR:text;FONT-WEIGHT:bold}
.ui-tabs-nav .ui-tabs-disabled A:link{COLOR:#598d32;FONT-SIZE:14px;CURSOR:text;FONT-WEIGHT:bold}
.ui-tabs-nav .ui-tabs-disabled A:visited{COLOR:#598d32;FONT-SIZE:14px;CURSOR:text;FONT-WEIGHT:bold}
.ui-tabs-nav A:hover{CURSOR:pointer}
.ui-tabs-nav A:focus{CURSOR:pointer}
.ui-tabs-nav A:active{CURSOR:pointer}
.ui-tabs-nav .ui-tabs-unselect A:hover{CURSOR:pointer}
.ui-tabs-nav .ui-tabs-unselect A:focus{CURSOR:pointer}
.ui-tabs-nav .ui-tabs-unselect A:active{CURSOR:pointer}
.ui-tabs-panel{BORDER-BOTTOM:#ebebeb 1px solid;BORDER-LEFT:#ebebeb 1px solid;PADDING-BOTTOM:10px;PADDING-LEFT:10px;PADDING-RIGHT:10px;HEIGHT:170px;OVERFLOW:hidden;BORDER-TOP:#ebebeb;BORDER-RIGHT:#ebebeb 1px solid;PADDING-TOP:10px}
.ui-tabs-panel UL{BACKGROUND:#ffffff 0px 0px}
.ui-tabs-panel LI{LINE-HEIGHT:15px;WIDTH:50%;MARGIN-BOTTOM:11px;FLOAT:left;HEIGHT:15px;FONT-SIZE:13px;OVERFLOW:hidden}
.ui-tabs-panel LI A{PADDING-LEFT:20px;WIDTH:80%;DISPLAY:block;BACKGROUND:url(images/bullet.gif) no-repeat 0px 0px}
.ui-tabs-panel LI A:hover{BACKGROUND:url(images/bullet.gif) no-repeat 0px -15px;FONT-WEIGHT:bold}
* HTML .ui-tabs-nav{DISPLAY:inline-block}
:first-child + HTML .ui-tabs-nav{DISPLAY:inline-block}
.topnews_image{WIDTH:174px;FLOAT:left;MARGIN-RIGHT:10px}
.featured_image{POSITION:absolute;WIDTH:430px;HEIGHT:322px}
.postnav{PADDING-BOTTOM:3px;PADDING-LEFT:10px;WIDTH:607px;PADDING-RIGHT:10px;MARGIN-BOTTOM:16px;FLOAT:left;COLOR:#666666;FONT-SIZE:1.2em;FONT-WEIGHT:bold;PADDING-TOP:3px}
.prev{FLOAT:left}
.next{FLOAT:right}
.note{LINE-HEIGHT:30px;FLOAT:left;HEIGHT:30px;COLOR:#ffffff;MARGIN-LEFT:10px;FONT-SIZE:13px;OVERFLOW:hidden}
.note A{COLOR:#ffffff;FONT-WEIGHT:bold}