Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<title>jquery hover顶部导航栏菜单</title>
+
<title>js彩色拼图导航下拉菜单</title>
<style>
<style>
-
@charset "utf-8";
+
/*默认样式：直接定义元素的样式*/
-
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,figure{margin:0;padding:0}
+
body{text-align:center;font-size:12px;font-family:微软雅黑, Tahoma, Verdana, Arial;font-weight:normal;color:#333333;margin-top:0;background-color:#f5f5f5;}
-
html{background-color:#e9ecec}
+
dl, dt, dd, ul, li, ol, p, form, img{padding:0px;margin:0px;list-style:none;border:none;}
-
table{table-layout:fixed;border-collapse:collapse}
+
a, a:link, a:active{color:#3D81EE;text-decoration:none;}
-
section,article,aside,header,footer,nav,dialog,figure{display:block}
+
a:hover{color:#F90;text-decoration:none;}
-
.clearfix:after{content:"\20";display:block;height:0;line-height:0;font-size:0;clear:both}
+
a img{border:0;}
-
body,button,input,select,textarea,td,th{color:#333;font:12px/1.5 tahoma,arial,\5b8b\4f53}
+
#navmaster{margin:0 auto;width:620px;padding:0px;}
-
h1,h2,h3,h4,h5,h6{font-size:100%}
+
#navmaster ul{list-style-type:none;margin:auto;padding:0px;}
-
address,cite,dfn,em,var{font-style:normal}
+
#navmaster ul li{display:inline;float:left;padding:0px;cursor:pointer;font-weight:700;}
-
code,kbd,pre,samp{font-family:courier new,courier,monospace}
+
#navmaster li a{font-size:16px;color:#454545;letter-spacing:2px;font-family:微软雅黑, Tahoma, Verdana, Arial;}
-
small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#06C}
+
#navmaster li a:hover{color:#fff;}
-
a:hover{text-decoration:underline;color:#06C}
+
#navmaster li.hover a{color:#fff;}
-
sup{vertical-align:text-top}
+
.M1Common{width:109px;height:58px;margin:29px 0px 0px 0px;}
-
sub{vertical-align:text-bottom}
+
.M1{background:url(/jscss/demoimg/201402/menu_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico1.png");color:#000;}
-
legend{color:#000}
+
.M1Hover{background:url(/jscss/demoimg/201402/menu_hover_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico1.png");color:#fff;}
-
fieldset,img{border:0 none}
+
.M2Common{width:138px;height:75px;margin:12px 0px 0px -23px;}
-
button,input,select,textarea{font-size:100%}
+
.M2{background:url(/jscss/demoimg/201402/menu_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico2.png");}
-
table{border-collapse:collapse;border-spacing:0}
+
.M2Hover{background:url(/jscss/demoimg/201402/menu_hover_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico2.png");}
-
input:focus{outline:none}
+
.M3Common{width:150px;height:63px;margin:24px 0px 0px -36px;}
-
.hd-main{height:60px;background:#fff;z-index:15;border-bottom:#b3b3b3 1px solid;box-shadow:0 0 5px #333}
+
.M3{background:url(/jscss/demoimg/201402/menu_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico3.png");}
-
.f-icon{background-image:url('/jscss/demoimg/201403//frame-icon.png');background-repeat:no-repeat}
+
.M3Hover{background:url(/jscss/demoimg/201402/menu_hover_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico3.png");}
-
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
+
.M4Common{width:123px;height:54px;margin:33px 0px 0px -5px;}
-
.hd-main .has-pulldown{cursor:pointer;position:relative;*z-index:10000}
+
.M4{background:url(/jscss/demoimg/201402/menu_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico4.png");}
-
.hd-main .pulldown{position:absolute;cursor:default;display:none;top:30px;left:0}
+
.M4Hover{background:url(/jscss/demoimg/201402/menu_hover_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico4.png");}
-
.hd-main .pulldown .arrow{*margin-bottom:-1px;_margin-bottom:0;height:0;width:0;font-size:0;line-height:0;border-width:7px;border-style:solid;border-color:transparent transparent #F6F6F9 transparent;_filter:chroma(color=tomato);_border-color:tomato tomato #F6F6F9 tomato;position:relative;display:block;left:20px;z-index:2}
+
.M5Common{width:121px;height:68px;margin-top:19px;}
-
.hd-main .pulldown .content{background:#F6F6F9;color:#333;text-align:left;border-radius:3px;border:rgb(175,175,175) 1px solid;border-width:0 1px 1px 1px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;z-index:1}
+
.M5{background:url(/jscss/demoimg/201402/menu_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico5.png");}
-
.hd-main .pulldown-canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;filter:alpha(opacity=0)}
+
.M5Hover{background:url(/jscss/demoimg/201402/menu_hover_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico5.png");}
-
.hd-main .logo{background-image:url('/jscss/demoimg/201403//logo.png');background-repeat:no-repeat;display:block;height:36px;width:175px;float:left;margin-left:10px;background-position:0 0;margin-top:5px;display:inline}
+
/*只用于首页*/
-
.hd-main .navs{padding:0 0 3px 25px;height:45px;float:left}
+
.downMenu ul{padding:0;margin:0;}
-
.hd-main .navs a,.hd-main .info a,.hd-main .navs a:visited,.hd-main .info a:visited,.hd-main .navs a:active,.hd-main .info a:active{color:#d8d8d8}
+
.downMenu ul li{margin-top:0;}
-
.hd-main .navs a:hover,.hd-main .navs a:active{text-decoration:none;background-color:#0f0f0f}
+
.downMenu ul li a{padding-bottom:0;padding-top:7px;margin:0;cursor:pointer;background:#e8ecf2;color:#205fa2! important;text-decoration:none;display: inline-block;height:22px;width:80px;border:1px #c2d3ed solid;border-top:none;}
-
.hd-main .navs .def-nav,.hd-main .navs .pulldown-nav,.hd-main .navs .separate{display:block;float:left;height:48px;font:18px/30px "Microsoft YaHei","Microsoft JhengHei";color:#d8d8d8;text-align:center;width:90px;line-height:48px}
+
/*首页三角形样式*/
-
.hd-main .navs .def-nav .app-url{left:185px;width:641px;top:48px}
+
.bordCss{height:0;width:0;overflow:hidden;font-size:0;line-height:0;border-color:transparent transparent transparent #FF9900;border-style:dashed dashed dashed solid;border-width:5px;border-right-width:0;display:inline-block;margin:2px 2px 0 0;}
-
.hd-main .navs .def-nav .pulldown-canvas-url{width:575px;height:109px}
+
.bordCssGreen{border-color:transparent transparent transparent #26850d;margin:2px 3px 0 0;}
-
.hd-main .navs .def-nav .app-url .arrow{left:140px}
+
.bordBottomCss{border-color:#FF9900 transparent transparent transparent;border-style:solid dashed dashed dashed;border-width:5px;border-bottom-width:0;margin:0;}
-
.hd-main .navs .app-url .content{padding:17px 0 0 22px;height:91px}
+
.bordBottomCssN{border-style:solid dashed dashed dashed;border-color:#333333 transparent transparent transparent;border-width:3px;border-bottom-width:0;margin:0 0 4px 2px;}
-
.hd-main .navs .app-url .content a,.hd-main .navs .app-url .content a:hover{color:#333}
+
.bordBottomCssNF{border-style:solid dashed dashed dashed;border-color:#ffffff transparent transparent transparent;border-width:3px;border-bottom-width:0;margin:0 0 4px 2px;}
-
.hd-main .navs .app-url .li{cursor:pointer;padding-top:8px;width:66px;height:66px;border-radius:3px;display:block;float:left;text-align:center}
+
</style>
-
.hd-main .navs .app-url .li:hover{background-color:#e0e1e5}
+
<style type="text/css">
-
.hd-main .navs .app-url .li .icon{margin:0 auto;width:35px;height:38px;display:block;background:url('/jscss/demoimg/201403//dropdown_menu.png') no-repeat}
+
body{background:#;}
-
.hd-main .navs .app-url .li:hover .icon{background-image:url('/jscss/demoimg/201403//dropdown_menu_hover.png')}
+
.downMenu ul li a{color:white!important;font-size:14px;height:24px;letter-spacing:4px;border-bottom:1px solid #fff;border-left:none;border-right:none;}
-
.hd-main .navs .app-url .tongxunlu .icon{background-position:-35px 0}
+
#divDown2 ul li a{background:#EB8932;color:white!important;width:102px;}
-
.hd-main .navs .app-url .xiangce .icon{background-position:-70px 0}
+
#divDown2 ul li a:hover{background:#F6C370;color:#000!important;}
-
.hd-main .navs .app-url .note .icon{background-position:-105px 0}
+
#divDown3 ul li a{background:#91BD41;color:white!important;width:78px;}
-
.hd-main .navs .app-url .duanxin .icon{background-position:-140px 0}
+
#divDown3 ul li a:hover{background:#B8DA6A;color:#000!important;}
-
.hd-main .navs .app-url .zhaohui .icon{background-position:-175px 0}
+
#divDown4 ul li a{background:#FEA901;color:white!important;width:114px;}
-
.hd-main .navs .app-url .youxi .icon{background-position:-210px 0}
+
#divDown4 ul li a:hover{background:#FDE374;color:#000!important;}
-
.hd-main .navs .app-url .jiankang .icon{background-position:-245px 0}
+
#divDown5 ul li a{background:#CA699C;color:white!important;width:115px;}
-
.hd-main .navs .app-url .wenzhang .icon{background-position:-280px 0}
+
#divDown5 ul li a:hover{background:#DDA6BD;color:#000!important;}
-
.hd-main .navs .app-url .li .text{height:30px;display:block;font:14px/30px "Microsoft YaHei","Microsoft JhengHei"}
+
-
.hd-main .navs .separate{margin:0;height:48px;width:2px;background:#2A2B2D}
+
-
.hd-main .navs .pulldown-nav{position:relative}
+
-
.hd-main .navs .pulldown-nav em{position:absolute;display:block;left:69px;top:18px;height:12px;width:12px;font-size:0;background-position:-89px -45px}
+
-
.hd-main .navs .pulldown-nav:hover .f-icon,.hd-main .navs .pulldown-nav:active .f-icon{position:absolute;display:block;right:11px;top:18px;height:12px;width:12px;font-size:0;background-position:-89px -55px}
+
-
.hd-main .navs .current,.hd-main .navs .current .pulldown-nav{font-weight:bold;color:#FFF;display:inline-block;width:90px;height:49px;background-color:#0f0f0f;text-align:center;line-height:48px}
+
-
.hd-main .navs .current:hover{color:#ECECEC}
+
-
.hd-main .navs .current .hover{background-color:#f6f6f6;color:#333;}
+
-
.hd-main .info,.hd-main .info ul{height:36px;float:right;text-align:right;margin-top:3px;white-space:nowrap}
+
-
.hd-main .info a{color:#d8d8d8}
+
-
.hd-main .info a:hover{color:#FFF;text-decoration:underline}
+
-
.hd-main .info .info-i{padding:0 10px;margin:10px 0;display:inline-block;*display:inline;*zoom:1;height:16px;border-right:#393939 1px solid;color:#d8d8d8;font:12px/16px "SimSun"}
+
-
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
+
-
.hd-main .info .has-pulldown{padding-right:28px}
+
-
.hd-main .info .has-pulldown .pull-arrow{position:absolute;display:block;right:10px;top:1px;height:12px;width:12px;font-size:0;background-position:-89px -45px}
+
-
.hd-main .info .no-separate{border:none}
+
-
.hd-main .info .user-name{position:relative;padding-left:24px}
+
-
.hd-main .info .user-name .name{display:inline-block;display:inline\0;white-space:nowrap;max-width:75px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
+
-
.hd-main .info .user-name .identity{position:absolute;top:0;left:0;height:16px;width:16px;background-position:-89px -88px}
+
-
.hd-main .info .user-name .is-vip{background-position:-89px -68px}
+
-
.hd-main .info .user-info,.hd-main .info .more-info{top:9px;left:auto;right:-24px;width:116px}
+
-
.hd-main .info .notice-nu{display:inline-block;padding-left:4px;background-position:-86px -109px;height:14px;-webkit-text-size-adjust:none;font-size:10px;font-style:normal}
+
-
.hd-main .info .notice-nu .f-icon{display:inline-block;padding-right:4px;background-position:right -109px;color:#FFF}
+
-
.hd-main .info .user-info .arrow{left:70px;*left:-32px}
+
-
.hd-main .info .user-info .content,.hd-main .info .more-info .content{padding:10px 0;height:180px}
+
-
.hd-main .info .more{padding:0;display:inline;line-height:inherit;background:none}
+
-
.hd-main .info .more-info .content{height:280px}
+
-
.hd-main .info .user-info .content a,.hd-main .info .more-info .content a{display:block;padding-left:33px;height:30px;line-height:30px;color:#888}
+
-
.hd-main .info .user-info .content a:hover,.hd-main .info .more-info .content a:hover{color:#333;text-decoration:none;background:#e0e1e5}
+
-
.hd-main .info .user-info .li,.hd-main .info .more-info .li{display:block;padding:2px 0;height:30px}
+
-
.hd-main .info .user-info .separate-li,.hd-main .info .more-info .separate-li{display:block;margin:3px 11px;border-top:#EBEBEC 1px solid;border-bottom:#FFF 1px solid}
+
-
.hd-main .info .more-info{right:0}
+
-
.hd-main .info .more-info .arrow{left:94px;*left:-8px}
+
</style>
</style>
</head>
</head>
<body>
<body>
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
+
<div id="navmaster">
 +
<ul>
 +
<li id="ctl01_liIndex" class="M1Common M1">
 +
<div style="padding-top:27px;"><a href="/">首&nbsp;页</a></div>
 +
</li>
 +
<li id="ctl01_liQCenter" class="M2Common M2">
 +
<div style="padding-top:44px;"><a title="问卷中心" href="#">问卷中心</a><span class="bordCss bordBottomCssN"></span></div>
 +
</li>
 +
<li id="ctl01_liPrice" class="M3Common M3">
 +
<div style="padding-top:32px;"><a style="padding:9px 0 0px 21px;" href="#">自助服务</a></div>
 +
</li>
 +
<li id="ctl01_liUseCase" class="M4Common M4">
 +
<div style="padding-top:23px;"><a href="#">样本服务</a><span class="bordCss bordBottomCssN"></span></div>
 +
</li>
 +
<li id="ctl01_liCustomer" class="M5Common M5">
 +
<div style="padding-top:37px;text-align:left;padding-left:14px;"><a style="" href="#">典型应用</a></div>
 +
</li>
 +
</ul>
 +
</div>
 +
<!--下拉菜单2开始-->
 +
<div id="divDown2" class="downMenu" pdleft="23" style="display:none;z-index:10999;position:absolute;">
 +
<ul>
 +
<li><a title="公开问卷" href="#" style="border-top:1px solid #fff;">公开问卷</a> </li>
 +
<li><a title="问卷调查" href="#">问卷模板</a> </li>
 +
<li><a title="有奖调查" href="#" target="_blank">有奖调查</a> </li>
 +
<li><a title="热门测评" href="#">热门测评</a> </li>
 +
</ul>
 +
</div>
 +
<!--下拉菜单2结束-->
 +
<!--下拉菜单4开始-->
 +
<div id="divDown4" class="downMenu" pdleft="5" style="display:none;z-index:10999;left:933px;position:absolute;top:130px;">
 +
<ul>
 +
<li><a title="服务介绍" href="#" style="border-top:1px solid #fff;">服务介绍</a> </li>
 +
<li><a title="服务价格" href="#">服务价格</a></li>
 +
<li><a title="需求&报价" href="#">需求&报价</a></li>
 +
<li><a title="流程说明" href="#">流程说明</a></li>
 +
<li><a title="流程说明" href="#">成功案例</a></li>
 +
</ul>
 +
</div>
 +
<!--下拉菜单4结束-->  
<script type="text/javascript">
<script type="text/javascript">
-
$(document).ready(function(){
+
var navmaster = document.getElementById("navmaster");
-
$(".def-nav,.info-i").hover(function(){
+
var lis = navmaster.getElementsByTagName("li");
-
$(this).find(".pulldown-nav").addClass("hover");
+
var hrefas = navmaster.getElementsByTagName("a");
-
$(this).find(".pulldown").show();
+
for (var i = 0; i < lis.length; i++) {
-
},function(){
+
lis[i].index = i + 1;
-
$(this).find(".pulldown").hide();
+
if (lis[i].className.toLowerCase().indexOf("hover") > -1) {
-
$(this).find(".pulldown-nav").removeClass("hover");
+
hoverLi(lis[i]);lis[i].isHover = true;
-
});
+
}
-
});
+
lis[i].onmouseover = function () {
 +
hoverLi(this); sb_setmenunav('divDown' + this.index, true, this);
 +
}
 +
lis[i].onmouseout = function () {
 +
sb_setmenunav('divDown' + this.index, false, this); unHoverLi(this);
 +
}
 +
lis[i].onclick = function () {
 +
var href = this.getElementsByTagName("a")[0].href;
 +
if (href)
 +
window.location = href;
 +
}
 +
}
 +
function getSpanByClassName(ele, className) {
 +
var spans = ele.getElementsByTagName("span");
 +
for (var i = 0; i < spans.length; i++) {
 +
var cName = spans[i].className || "";
 +
if (cName.toLowerCase() == className.toLowerCase()) {
 +
return spans[i];
 +
}
 +
}
 +
}
 +
function hoverLi(obj) {
 +
obj.className = "M" + obj.index + "Common M" + obj.index + "Hover";
 +
var dda = obj.getElementsByTagName("a")[0];
 +
dda.style.color = "#ffffff";
 +
var span = getSpanByClassName(obj, "bordCss bordBottomCssN") || obj.spanCursor;
 +
if (span) {
 +
span.className = "bordCss bordBottomCssNF";
 +
obj.spanCursor = span;
 +
}
 +
}
 +
function unHoverLi(obj) {
 +
if (!obj.isHover) {
 +
obj.className = "M" + obj.index + "Common M" + obj.index;
 +
var dda = obj.getElementsByTagName("a")[0];
 +
dda.style.color = "";
 +
if (obj.spanCursor) obj.spanCursor.className = "bordCss bordBottomCssN";
 +
}
 +
}
 +
function openwindowSup(url, name, iWidth, iHeight) {
 +
var url;//转向网页的地址;
 +
var name;//网页名称，可为空;
 +
var iWidth;//弹出窗口的宽度;
 +
var iHeight;//弹出窗口的高度;
 +
var iTop = (window.screen.availHeight + 30 - iHeight) / 2;//获得窗口的垂直位置;
 +
var iLeft = (window.screen.availWidth + 208 - iWidth) / 2;//获得窗口的水平位置;
 +
var param = 'height=' + iHeight + ',width=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',border=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=no,status=no';
 +
var o = window.open(url, name, param);
 +
o.focus();
 +
}
 +
function getCoordsNav(el) {
 +
var box = el.getBoundingClientRect(),
 +
doc = el.ownerDocument,
 +
body = doc.body,
 +
html = doc.documentElement,
 +
clientTop = html.clientTop || body.clientTop || 0,
 +
clientLeft = html.clientLeft || body.clientLeft || 0,
 +
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) - clientTop,
 +
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
 +
return { 'top': top, 'left': left };
 +
};
 +
function sb_setmenunav(name, vis, obj) {
 +
var d = document.getElementById(name); //要显示隐藏的div
 +
if (!d) return;
 +
var padLeft = parseInt(d.getAttribute("pdLeft") || 0);
 +
if (vis) {
 +
if (d.timeArray) {
 +
window.clearTimeout(d.timeArray);
 +
d.timeArray = 0;
 +
}
 +
d.style.display = "block";
 +
if (!d.onmouseover) {
 +
d.onmouseover = function () {
 +
sb_setmenunav(name, true);
 +
}
 +
d.onmouseout = function () {
 +
sb_setmenunav(name, false);
 +
unHoverLi(obj);
 +
}
 +
}
 +
if (obj) {
 +
var objp = obj;
 +
if (objp.parentNode.tagName.toLowerCase() == "li")
 +
objp = obj.parentNode;
 +
var xy = getCoordsNav(objp);
 +
var xias = xy.left;
 +
var yias = xy.top + objp.offsetHeight;
 +
padLeft = padLeft || 0;
 +
d.style.left = xias + padLeft + "px";
 +
d.style.top = yias + "px"; //;
 +
}
 +
}
 +
if (obj && obj.tagName.toLowerCase() == "li") {
 +
d.needSaveClass = obj;
 +
d.prevClass = obj.className;
 +
}
 +
else if (d.needSaveClass) {
 +
hoverLi(d.needSaveClass);
 +
}
 +
if (!vis) {//延时隐藏，可以移动上去
 +
if (d.spanCursor) d.spanCursor.className = "bordCss bordBottomCssN";
 +
d.timeArray = window.setTimeout(function () {
 +
d.style.display = "none"; d.style.height = "";
 +
}, 100);
 +
}
 +
}
</script>
</script>
-
<div class="hd-main clearfix" id="header">
+
<div style="text-align:center;clear:both"><br>
-
<a class="logo" href=""></a>
+
-
<div class="navs">
+
-
<a class="def-nav" href="">主页</a>
+
-
<span class="separate"></span>
+
-
<div class="def-nav current has-pulldown-special">
+
-
<a class="pulldown-nav" href=""><em class="f-icon"></em>办公</a>
+
-
<div class="pulldown app-url">
+
-
<div class="content">
+
-
<a class="li disk" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">网盘</span>
+
-
</a>
+
-
<a class="li tongxunlu" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">通讯录</span>
+
-
</a>
+
-
<a class="li xiangce" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">相册</span>
+
-
</a>
+
-
<a class="li wenzhang" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">文章</span>
+
-
</a>
+
-
<a class="li note" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">记事本</span>
+
-
</a>
+
-
<a class="li duanxin" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">短信</span>
+
-
</a>
+
-
<a class="li zhaohui" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">手机找回</span>
+
-
</a>
+
-
<a class="li youxi" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">游戏</span>
+
-
</a>
+
-
<a class="li jiankang" href="">
+
-
<span class="icon"></span>
+
-
<span class="text">健康</span>
+
-
</a>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<span class="separate"></span>
+
-
<a class="def-nav" href="">应用</a>
+
-
</div>
+
-
<div class="info">
+
-
<ul>
+
-
<li class="info-i user-name has-pulldown">
+
-
<em class="f-icon pull-arrow"></em>
+
-
<a class="f-icon identity" href="" title="未开通VIP"></a>
+
-
<span class="name top-username">李四</span>
+
-
<div class="pulldown user-info">
+
-
<em class="arrow"></em>
+
-
<div class="content">
+
-
<span class="li"><a href="">个人资料</a></span>
+
-
<span class="li"><a href="">购买容量</a></span>
+
-
<span class="li"><a href="">免费扩容</a></span>
+
-
<span class="li"><a href="">会员中心</a></span>
+
-
<span class="separate-li no-height"></span>
+
-
<span class="li"><a href="javascript:;" id="signout">退出</a></span>
+
-
</div>
+
-
</div>
+
-
</li>
+
-
<li class="info-i default-text">
+
-
<a class="notice" href="" id="notificationTrigger">通知</a>
+
-
<em class="f-icon notice-nu" id="noticeNoParent">
+
-
<b class="f-icon" id="noticeNo">0</b>
+
-
</em>
+
-
</li>
+
-
<li class="info-i no-separate default-text has-pulldown">
+
-
<em class="f-icon pull-arrow"></em>
+
-
<span class="more" hideFocus="hideFocus">更多</span>
+
-
<div class="pulldown more-info">
+
-
<em class="arrow"></em>
+
-
<div class="content">
+
-
<span class="separate-li no-height"></span>
+
-
<span class="li"><a href="">收藏工具</a></span>
+
-
<span class="li"><a href="">历史记录</a></span>
+
-
<span class="li"><a href="">版本更新</a></span>
+
-
<span class="li"><a href="">帮助中心</a></span>
+
-
<span class="li"><a href="">问题反馈</a></span>
+
-
<span class="li"><a href="">服务协议</a></span>
+
-
<span class="li"><a href="">权利声明</a></span>
+
-
</div>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
+
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 03:31, 8 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> js彩色拼图导航下拉菜单


Retrieved from "http://2014.igem.org/Team:LZU-China/tempfortest"