Jquery仿FLASH实现孙悟空筋斗云式的动态菜单
代码简介:
代码内容:
<!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> <title>Jquery仿FLASH实现孙悟空筋斗云式的动态菜单_网页代码站(www.webdm.cn)</title> <style type=text/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(http://www.webdm.cn/images/20100919/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(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px 0px } .post UL LI A:hover { BACKGROUND: url(http://www.webdm.cn/images/20100919/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(http://www.webdm.cn/images/20100919/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(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px 0px; PADDING-TOP: 0px } .sidebar UL.sidebar UL LI A:hover { BACKGROUND: url(http://www.webdm.cn/images/20100919/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 (http://www.webdm.cn/images/20100919/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(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px 0px } .ui-tabs-panel LI A:hover { BACKGROUND: url(http://www.webdm.cn/images/20100919/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 } </style> <SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/jquery.min.js"></SCRIPT> <SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/lavalamp.min.js"></SCRIPT> <SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/webdm.js"></SCRIPT> <SCRIPT type=text/javascript> $(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); </SCRIPT> </head> <body style="text-align:center"><br><br> <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="http://www.webdm.cn/"><IMG style="FLOAT: right" src="http://www.webdm.cn/images/20100919/RSS_icons.png"></A> </DIV> <p></p> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/cbd34b22-6570-485e-94f9-574e4f1ff3bd.html