右侧悬浮菜单实例代码

最新推荐文章于 2022-04-09 10:08:17 发布

iteye_1789

最新推荐文章于 2022-04-09 10:08:17 发布

阅读量194

点赞数

文章标签： javascript ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta content="text/html; charset=gbk" http-equiv="Content-Type"> <TITLE> Navigation Bar </TITLE> <link type="text/css" rel="stylesheet" href="style/chat007.css" mce_href="style/chat007.css"> <link type="text/css" rel="stylesheet" href="style/Muyu007.css" mce_href="style/Muyu007.css"> <mce:script type="text/javascript"></mce:script> </HEAD> <BODY> <div> test 11 11 11 11 11 </div> <div id="divQQbox" class="QQbox" style="width: 150px; top: 297.4px;"> <div style="display: none;" mce_style="display: none;" οnmοuseοut="hideMsgBox(event);" id="divOnline" class="Qlist"> <div class="t"> </div> <div class="con"> <ul> <li><a target="_blank" href="http://chatserver.comm100.cn/ChatWindow.aspx?siteId=80015513&planId=28&visitType=1&byHref=1" mce_href="http://chatserver.comm100.cn/ChatWindow.aspx?siteId=80015513&planId=28&visitType=1&byHref=1"> <img border="0px" alt="Live Chat" src="http://chatserver.comm100.cn/BBS.aspx?siteId=80015513&planId=28" mce_src="http://chatserver.comm100.cn/BBS.aspx?siteId=80015513&planId=28" id="comm100_EmailImage"> </a> </li> <li> <a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45">网站首页</a> </li> <li> <a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45">服务领域</a> </li> <li> <a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45">关于我们</a> </li> </ul> </div> <div class="b"> </div> </div> <div οnmοuseοver="OnlineOver();" id="divMenu" style="display: block;" mce_style="display: block;"><img alt="在线咨询" class="press" src="qq_1.gif" mce_src="qq_1.gif"> </div> </div> <mce:script type="text/javascript"></mce:script> </BODY> </HTML> .QQbox{ z-index:999; width: 150px; right: 3px; top: 175px; position: absolute; color: #000; display: block; } .QQbox .Qlist a { font-size: 12px; color: #000; text-decoration: none; line-height: 25px; width: 150px; display: block; height: 25px; } .QQbox .Qlist a:hover { color: #069; text-decoration: underline; display: block; } .QQbox .press{ right: 0; border: none; cursor: pointer;width: 26px; height: 136px;position: absolute;} .QQbox .Qlist{ width: 150px; background: url(../images/siderIM_bg.gif) padding:5px; display: block; } .QQbox .Qlist .b{ float: right; height: 6px; width: 150px; font-size: 1px; } .QQbox .Qlist .infobox{ text-align:center; background-repeat:no-repeat; padding:5px; line-height:14px; color:#000; font-weight:700; } .QQlistLi01 { overflow: hidden; height: 25px; width: 150px; display: block; } .QQbox .Qlist .t{ height:34px; background-image: url(../images/chatbg1.png); background-repeat: repeat; display: block; } .QQbox .Qlist .b{ height:20px; overflow:hidden; background-image: url(../images/chatbg3.png); background-repeat: no-repeat; } .QQbox .Qlist .con{ width: 100%; padding: 10px 0px 10px 0px; background-image: url(../images/chatbg2.png); background-repeat: repeat-y; display: block; overflow: hidden; height: 160px; } .QQbox .Qlist .con h2{ height: 22px; font: bold 12px/22px "宋体"; background: url(../images/siderIM_bg.gif) repeat-y -163px 0; border: 1px solid #3a708d; text-align: center; color:#fff;} .QQbox .Qlist .con ul li{ display: block; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 15px; height: 25px; line-height: 25px; width: 150px; overflow: hidden; left: 0px; clear: both; float: left; position: relative; }

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,div{margin:0;padding:0;border:0;} .index { background-repeat: repeat-x; background-position: center top; color: #FFF; font-family: Arial, Helvetica, sans-serif, "微软雅黑"; font-size: 12px; margin-top: -30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; z-index: 1; background-image: url(../images_muyu/index_bg_body.png); } .pagebody { width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .pageHead { width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; overflow: hidden; height: 206px; z-index: 100; position: absolute; background-image: url(../images_muyu/menubg_muyu007.com.png); background-repeat: no-repeat; background-position: center top; text-align: center; } .muyubanner { overflow: hidden; height: 380px; width: 960px; top: 170px; position: absolute; z-index: 10; } .muyubanner2 { overflow: hidden; height: 384px; width: 960px; } .index_aboutus { margin: 20px; height: 140px; width: 920px; top: 5px; position: relative; } .index_aboutusNy { width: 420px; line-height: 35px; font-size: 14px; float: left; top: 20px; position: relative; left: 10px; } .shouzida { font-family: "微软雅黑"; font-size: 28px; } .index_word { overflow: hidden; height: 94px; width: 960px; margin-top: 0px; position: relative; } .pagebodyIndex { width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; overflow: hidden; height: 1912px; background-image: url(../images_muyu/indexbg.jpg); background-repeat: no-repeat; background-position: center 200px; z-index: 5; padding-top: 206px; font-family: "微软雅黑"; } .pagebodyIndexfoot { width: 1000px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; overflow: hidden; height: 236px; background-image: url(../images_muyu/index_footbg.png); background-repeat: no-repeat; background-position: center top; } .pagebodyIndexfootNy { width: 960px; overflow: hidden; height: 110px; margin-top: 10px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; position: relative; font-family: "微软雅黑"; } .pagebodyIndexfootNy1 { width: 960px; overflow: hidden; height: 50px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; position: relative; } .pagebodyIndexfootNy1a { width: 700px; overflow: hidden; height: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; float: left; clear: left; } .pagebodyIndexfootNy1b { width: 250px; overflow: hidden; height: 50px; position: relative; float: right; clear: right; margin: 0px; } .pagebodyIndexfootNy2 { width: 960px; overflow: hidden; height: 60px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; position: relative; text-align: center; color: #999; } .pagebodyIndexfootbg { width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; overflow: hidden; height: 236px; background-image: url(../images_muyu/index_footbgline.png); background-repeat: repeat-x; background-position: center top; } .button007 { background-image: url(../images_muyu/buttonbg1.png); background-repeat: no-repeat; background-position: left top; text-align: center; height: 30px; line-height:30px; width: 107px; position: relative; } .button007b { background-image: url(../images_muyu/buttonbg1.png); background-repeat: no-repeat; background-position: left top; text-align: center; height: 30px; line-height:30px; width: 107px; position: relative; } .button007 a { height: 30px; width: 107px; top: 0px; color: #FFF; text-decoration: none; display: block; } .button007b a { height: 30px; width: 107px; top: 0px; color: #FFF; text-decoration: none; display: block; } .button007 a:hover { height: 30px; width: 107px; color: #FFF; text-decoration: none; background-image: url(../images_muyu/buttonbg2.png); background-repeat: no-repeat; background-position: left top; } .button007b a:hover { height: 30px; width: 107px; color: #FFF; text-decoration: none; background-image: url(../images_muyu/buttonHover.gif); background-repeat: no-repeat; background-position: left top; } .button007aabout2 { width: 120px; position: absolute; height: 30px; display: block; float: left; left: 530px; top: 90px; } .button007fuwu { width: 100%; position: relative; height: 70px; } .button007fuwu1 { width: 120px; position: absolute; height: 30px; display: block; float: left; left: 35px; } .button007fuwu2 { width: 120px; position: absolute; height: 30px; display: block; float: left; left: 275px; } .button007yuanying { width: 120px; position: absolute; height: 30px; display: block; float: left; left: 630px; top: 90px; } .button007fuwu3 { width: 120px; position: absolute; height: 30px; display: block; right: 180px; float: right; } .index_kehu {s position: relative; height: 570px; width: 960px; } .index_news { position: relative; height: 200px; width: 910px; padding-top: 18px; padding-right: 20px; padding-bottom: 20px; padding-left: 30px; } .index_news1 { position: relative; height: 170px; width: 280px; float: left; margin-top: 10px; } .index_news2 { float: right; height: 150px; width: 370px; position: relative; right: 230px; } .index_newsbut { position: absolute; height: 30px; width: 120px; left: 320px; top: 190px; } .index_news2 ul li a { font-size: 14px; color: #3496D3; text-decoration: none; } .index_news2 ul li a:hover { font-size: 14px; color: #FFF; text-decoration: underline; } .index_news2 ul li { height: 32px; width: 100%; list-style-type: none; line-height: 32px; } .index_fuwu { height: 150px; width: 890px; position: relative; margin-top: 220px; overflow: hidden; padding-top: 22px; padding-right: 20px; padding-bottom: 0px; padding-left: 45px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .index_fuwu ul li { margin: 0px; padding: 0px; height: 27px; display: block; width: 210px; line-height: 27px; position: relative; } .index_fuwu ul li a { color: #FFF; text-decoration: none; text-indent: 15px; display: block; height: 27px; width: 210px; font-size: 12px; line-height: 27px; } .index_fuwu ul li a:hover { color: #2DACDF; text-decoration: none; background-repeat: no-repeat; background-position: 4px 12px; height: 27px; width: 210px; background-image: url(../images_muyu/dot007.gif); line-height: 27px; } .index_fuwu01 { height: 150px; width: 230px; text-align: left; position: relative; float: left; } .index_fuwu02 { height: 150px; width: 230px; text-align: left; position: relative; float: right; right: 420px; top: 0px; clear: right; } .Muyulink { font-size: 10px; line-height: 16px; text-decoration: none; overflow: hidden; height: 22px; margin-top: 8px; } .muyulink li { float: left; list-style-type: none; position: relative; } .muyulink li a { float: left; font-size: 10px; color: #666; text-decoration: none; } .muyulink li a:hover { float: left; font-size: 10px; color: #CCC; text-decoration: none; }