程序博客网 > 异形契约 知乎

垂直手风琴5级菜单！用js+jquery动态加载菜单，附上源码hezhu和注释

来源：互联网 发布：异形契约 知乎 编辑：程序博客网 时间：2024/06/05 12:50

1.做了几天，终于做完了，原理也理解透彻了。注释加上了。数据结构则是1导航菜单2二级菜单:XX管理,XX报告,XX分析,查询3三级菜单:XX登记XX注销XX查询XX移交4四级菜单：XX查询，XX查询5五级菜单即有链接可以点击显示右边页面的。从数据库读出已经是菜单的结构顺序了，但是每个菜单均带有自己的等级。先看效果：

左边是4级菜单的第一个，右边是5级菜单的第二个；同级别菜单点开是会自动收缩其他已经展开的菜单的。

2.附上jsp代码

<%@page import="java.util.Map"%><%@page import="java.util.HashMap"%><%@ page language="java" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><c:set var="systemctx" value="${pageContext.request.contextPath}" /><!DOCTYPE><html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css"href="${systemctx }/webresource/css/font-awesome/css/font-awesome.min.css"><link type="text/css" rel="stylesheet"href="${systemctx }/webresource/css/bootstrap/bootstrap.min.css"><link rel="stylesheet"href="${systemctx }/webresource/css/style/left.css" media="screen"type="text/css" /><link rel="stylesheet" type="text/css"href="${systemctx }/webresource/css/style/commonColor.css"><!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="${systemctx }/webresource/css/bootstrap/bootstrap-ie6.min.css"><link type="text/css" rel="stylesheet" href="${systemctx }/webresource/css/bootstrap/bootstrap-ie6.css"><![endif]--><link rel="stylesheet"href="${systemctx }/webresource/css/style/index.css" media="screen"type="text/css" /><script type="text/javascript"src='${systemctx }/webresource/js/util/jquery.min.js'></script><script type="text/javascript"src='${systemctx }/itreasury/javascript/jquery/jquery.easyui.min.js'></script><script type="text/javascript"src="${systemctx }/webresource/js/util/bootstrap.min.js"></script><!--[if lte IE 6]><!-- bsie  css 补丁文件 --><script type="text/javascript"src="${systemctx }/webresource/js/util/bootstrap-ie.js"></script><!-- [endif] --><script type="text/javascript"src="${systemctx }/webresource/js/index.js"></script></head><body><div><!-- 根据菜单的id，显示对应的图标 --><% Map map = new HashMap(); map.put(30L, "fa-area-chart");map.put(33L, "fa-book");map.put(59L, "fa-calculator");map.put(45L, "fa-smile-o");request.setAttribute("map", map);%><!--展开效果--><div class="left" style="width:200px;"><!--导航菜单--><a class="left_top" href="javascript:left.closeLeft();"><div class="nav_menu"><i class="fa fa-navicon"></i><p>导航菜单</p></div> </a><div class="left-menu"><!--循环菜单列表--><c:forEach items="${loginInfo.menuList}" var="menu" varStatus="i"><c:choose><c:when test="${menu.menuLevel == 2 }"><!--菜单等级为2的--><c:set var="menuId" value="${menu.id}"></c:set><c:if test="${(i.index  != 0 ) || fn:length(loginInfo.menuList) == i.index+1}"></ul></div></div><!--这里和下面的div,div class=div3,ul class=thirdMenu对应，如果下面的循环执行完，第二次循环就执行上面的代码，进行完美格式封装--></c:if><div><div class="div2"><div class="jbsz"><i class="fa <c:out value='${map[menu.id] }'></c:out>"></i></div><p><c:choose><c:when test="${empty menu.menuURL}">${menu.menuName }</c:when><c:otherwise><a href="javascript:void(0);" rel="sub${i.index }" src="${menu.menuURL }">${menu.menuName }</a></c:otherwise></c:choose></p><i class="fa fa-chevron-down"></i></div><!--进行完美格式封装伏笔--><div class="div3"><ul class="thirdMenu"></c:when><c:otherwise><c:if test="${menu.menuLevel != 2}"><c:choose><c:when test="${menu.menuLevel == 3 }"><c:set var="menuId" value="${menu.id}"></c:set><!--进行完美格式封装--><c:if test="${(i.index  != 0 ) || fn:length(loginInfo.menuList) == i.index+1}"></span></c:if><li class="thirdMe" rel="sub${i.index }"><a href="javascript:void(0);" rel="sub${i.index }" src="${menu.menuURL } " >${menu.menuName}</a> <i class="fa fa-angle-down"></i></li><!--进行完美格式封装伏笔--><span class="div4" rel="sub${i.index }"></c:when><c:otherwise><c:if test="${menu.menuLevel != 3}"><c:choose><c:when test="${menu.menuLevel == 4 }"><c:set var="menuId" value="${menu.id}"></c:set><!--进行完美格式封装--><c:if test="${(i.index  != 0 ) || fn:length(loginInfo.menuList) == i.index+1}"></label></c:if><li class="forthMe"><a href="javascript:void(0);" rel="sub${i.index }"  src="${menu.menuURL } " >${menu.menuName}</a> <i class="fa fa-angle-down"></i></li><!--进行完美格式封装伏笔--><label class="div5"></c:when><c:otherwise><li><a rel="sub${i.index }" src="${menu.menuURL }">${menu.menuName}</a></li></c:otherwise></c:choose></c:if></c:otherwise></c:choose></c:if></c:otherwise></c:choose></c:forEach></div></div><!--中间内容--><div id="Tabbar"><!--选项卡--><div class="left-btn-div"><a href="javascript:left.moveLeft();" class="btn btn-default"><<</a></div><div class="right-btn-div"><a href="javascript:left.moveRight();" class="btn btn-default">>></a></div><ul id="bar"></ul><!--嵌入的内容--><div class="center"><!--<iframe frameborder=0 scrolling=no id="content" src=""></iframe>--></div></div></div><script type="text/javascript" src="${systemctx }/webresource/js/view/left.js"></script><script type="text/javascript">//3、4级菜单折叠下级菜单方法,但是其他的不会自动收起，没用到 function onModified(btn){   $(btn).parent().next().slideToggle('slow');    $(btn).next().toggleClass("rotateI");}  </script></body></html>


3.附上js代码

/** * Created by Administrator on 2016/8/23. */var left={}$(function(){    //打开左边菜单栏    left.openMenu();    left.openThirdMenu();    left.openForthMenu();    //打开三级菜单    left.OpenthMenu();    //中间内容    $(".tab tr td").click(function(){        $(".tab tr td").removeClass("add");        $(this).addClass("add");    });    $("#button1").click(function(){        $(this).css("background","#E35558");        $(this).css("color","#ffffff");    });    $("#button2").removeClass("add_btn");    $(".butt input").click(function(){        $(".butt input").removeClass("add_btn");        $(this).addClass("add_btn");    });    $(".nav_menu").click(function(){    left.closeLeft();    });    $("#Tabbar").css('width',$(window).width()-200);    //选项卡    left.addRemoveTabs();    left.refreshTab();});//关闭时效果——展开left.openLeft = function(){    if($('.left').css('display') == 'none'){        $('.sidebar').css('display', 'none');        $('#sidebar').css('width','200px');        $('.left').css('display', 'block');        $("#bar").css('width',$(window).width()-100);        $("#bar").css('left',140);        $(".center").css('width',$(window).width()-200);        $(".center").css('left',140);    }};//折叠已展开菜单--------------------没用left.closeLeft = function(){    if($('.sidebar').css('display') == 'none'){        $('#sidebar').css('width','60px');        $('.left').css('display', 'none');        $('.sidebar').css('display', 'block');        $("#Tabbar").css("left",60);        $("#bar").css('width',$(window).width()-60);        $(".center").css('width',$(window).width()-60);        $(".center").css('left',0);        $("#bar").css('left',0);    }};//展开时效果——展开折叠的二级菜单left.openMenu = function(){    var Accordion = function(el, multiple) {        this.el = el || {};        this.multiple = multiple || false;        var links = this.el.find('.div2');        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);    };    /*显示下层窗口*/    Accordion.prototype.dropdown = function(e) {        var $el = e.data.el;        $this = $(this);        $next = $this.next();        $next.slideToggle();        $this.parent().toggleClass('open');//上级元素后面的图标呈打开状态，再点就收起    if (!e.data.multiple) {            $el.find('.div3').not($next).slideUp().parent().removeClass('open');        }    };    var div1 = new Accordion($('.left-menu'), false);};left.openThirdMenu = function(){    var Accordion = function(el, multiple) {        this.el = el || {};        this.multiple = multiple || false;        var links = this.el.find('.thirdMe');        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);    };     Accordion.prototype.dropdown = function(e) {             var $el = e.data.el;        $this = $(this);//本点击按钮3级菜单li        $next = $this.next();//本点击按钮3级菜单下面的4级菜单span        $this.toggleClass('openThird');//加上openThird样式即图标旋转        $next.slideToggle();//折叠span        if (!e.data.multiple) {            $el.find('.div4').not($next).slideUp();//所有的div4,除了本点击按钮3级菜单下面的4级菜单span，都收起            $el.find('.div4').prev().not($this).removeClass('openThird');//所有的div4的上一级（即li）,不包括本点击按钮3级菜单li,移除openThird样式        }    };    var div1 = new Accordion($('.div3'), false);//div3不折叠};//展开时四级菜单left.openForthMenu = function(){    var Accordion = function(el, multiple) {        this.el = el || {};        this.multiple = multiple || false;        var links = this.el.find('.forthMe');        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)    };    Accordion.prototype.dropdown = function(e) {        var $el = e.data.el;        $this = $(this);//本点击按钮4级菜单li        $next = $this.next();//本点击按钮4级菜单下面的5级菜单label        $next.slideToggle();//折叠label        $this.toggleClass('openForth');//加上openForth样式即图标旋转        if (!e.data.multiple) {        //所有的div5,除了本点击按钮4级菜单下面的5级菜单label，都收起            $el.find('.div5').not($next).slideUp();//.parent().removeClass('openForth');            $el.find('.div5').prev().not($this).removeClass('openForth');//所有的div5的上一级（即li）,不包括本点击按钮3级菜单li,移除openThird样式        }    };    var div1 = new Accordion($('.div4'), false);}////折叠时的三级菜单left.OpenthMenu = function(){ var Accordion = function(el, multiple) {        this.el = el || {};        this.multiple = multiple || false;        this.el.find('.link').on('click', {            el: this.el,            multiple: this.multiple        }, this.dropdown);    }     Accordion.prototype.dropdown = function(e) {    alert("OpenthMenu");        var $el = e.data.el;        $(this).next().slideToggle();        $(this).parent().toggleClass('openth');        if (!e.data.multiple) {            $el.find('.th-menu').not($(this).next()).slideUp().parent().removeClass('openth');        }    };    var accordion = new Accordion($('.sub-menu'), false);};//选项卡left.addRemoveTabs = function(){    $(".sub-menu li a").click(function(){        var aName = $(this).attr("rel");        //显示隐藏close小图标        $("#bar li a.remove").hide();        $("#" + aName + "_close").show();        //iframe内容        $(".center iframe").hide();        $("#" + aName + "_content").show();        //当前选项卡样式        $("#bar li").removeClass("current");        $("#" + aName).parent().addClass('current');        //调用添加选项卡函数        //left.addTab($(this));    });    //点击3、4级菜单执行方法    $(".div3  li a").click(function(){        var aName = $(this).attr("rel");        //显示隐藏close小图标        $("#bar li a.remove").hide();        $("#" + aName + "_close").show();        //iframe内容        $(".center iframe").hide();        $("#" + aName + "_content").show();        //当前选项卡样式        $("#bar li").removeClass("current");        $("#" + aName).parent().addClass('current');        //调用添加选项卡函数        //获取a标签src函数，并去空格        var src=$.trim($(this).attr('src'));    //非空    if(src!=""&&src!=null){    //调用添加选项卡函数    left.addTab($(this));    }    });    $('#bar').on('click','a.Currtab',function(){       //获取tab名        var contentname = $(this).attr("id") + "_content";        //console.log(contentname);        //隐藏其他所有tabs        $(".center iframe").hide();        $("#bar li").removeClass('current');        var closename = $(this).attr("id") + "_close";        $("#bar li a.remove").hide();        $("#"+closename).show();        //显示当前tab        $("#" + contentname).show();        $(this).parent().addClass('current');    });    $("#bar").on('click','a.remove',function(){        //获取tab的id        var tabid = $(this).parent().find(".Currtab").attr("id");        //移除tab和相关内容        var contentname = tabid + "_content";        //console.log(contentname);        $("#" + contentname).remove();        $(this).parent().remove();        // if there is no current tab and if there are still tabs left, show the first one        if ($("#bar li.current").length == 0 && $("#bar li").length > 0) {            var firsttab = $("#bar li:last-child");// 查找第一个tab            firsttab.addClass("current");            var firsttabid = $(firsttab).find("a.Currtab").attr("id");// 获取第一个tab的名字和内容            $("#" + firsttabid + "_content").show();            $("#" + firsttabid + "_close").show();        }        left.refreshTab();    });};//添加选项卡left.addTab = function(link){    //console.log( $(link).attr("src"));    var Src = $(link).attr("src");    //若tab已经存在，则不会重复请求    if($('#' + $(link).attr('rel')).length != 0){    //$(".center iframe").attr('src',Src);    // left.refreshTab();    return;    }    //隐藏其他的tabs    $('#bar li').removeClass('current');    $(".center iframe").hide();    //添加一个新的选项卡    $("#bar").append("<li class='current'><a class='Currtab' id='" +        $(link).attr("rel") + "' href='javascript:void(0);'>" + $(link).html() +        "</a><a href='javascript:void(0);' id='"+$(link).attr("rel")+"_close"+"'class='remove'>"+"<img src='webresource/img/Close.png'></a></li>");    $(".center").append('<iframe frameborder=0 id="'+$(link).attr('rel')+'_content'+'" src="'+Src+'"></iframe>');    // 设置新添加的选项卡为当前tab    $("#bar li a.remove").hide();    $("#"+$(link).attr("rel") + "_close").show();    $("#" + $(link).attr("rel") + "_content").show();    //console.log($("#bar li").width());    left.refreshTab();};left.refreshTab = function(){  //获取一个右边区域的宽度  var gWidth = $("#Tabbar").width();  //console.log(gWidth);  //选项栏宽度  var uWidth = 100;  $("#bar li").each(function(){  //console.log($(this).width());    uWidth += $(this).width() +11;  });  //console.log(uWidth);  if(uWidth >0 )    $("#bar").css("width", uWidth);  if(uWidth >= gWidth){    $(".left-btn-div").show();    $(".right-btn-div").show();    left.minLeft = gWidth - uWidth-20;    $("#bar").css("left", left.minLeft);  }else{    $(".left-btn-div").hide();    $(".right-btn-div").hide();      $("#bar").css("left",0);  }};//选项栏想左移动left.moveLeft = function(){  var lcss =  $("#bar").css("left");  lcss = parseInt(lcss.substring(0,lcss.length -2));  if(lcss < 20){    lcss = lcss + 100;    if(lcss > 20) lcss = 20;    $("#bar").css("left",lcss);  }};//选项栏想右移动left.moveRight = function(){  var lcss =  $("#bar").css("left");  lcss = parseInt(lcss.substring(0,lcss.length -2));  if(lcss > left.minLeft){    lcss = lcss - 100;    if(lcss < left.minLeft) lcss = left.minLeft;    $("#bar").css("left",lcss);  }};//禁用鼠标右键document.oncontextmenu=new Function("event.returnValue=false;");document.onselectstart=new Function("event.returnValue=false;");


4.附上css样式

* {    margin:0;padding:0;list-style-type:none;}body{    overflow-y: hidden;}html {    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}/*闁兼寧绮屽畷鐔虹箔椤戣法顏卞☉鎿冧簻濞存﹢寮介敓锟�*/.sidebar h1 {    height: 45px;    line-height: 40px;    cursor: pointer;    color: #FFF;    font: 16px Open Sans;    border-bottom: 1px solid #CFCFCF;    padding-left: 10px;    padding-top: 12px;    margin: 0;}h1>i.fa.fa-bars {    padding: 10px;}h1 a{    text-decoration: none;}/*濞戞挻妲掕ぐ宥夊础閿燂拷*/.sidebar {    width: 60px;    height: 100%;    position: fixed;    border-right: 1px solid #CFCFCF;}/*濞戞搫鎷锋鍥嚕濠婂啫绀嬮柡宥呭槻缁憋拷*/.sidebar li {    list-style: none;    padding: 10px 10px 10px 20px;    position: relative;    border-bottom: 1px solid #CFCFCF;}/*.main-menu{*/    /*list-style: none;*/    /*padding: 0;*/    /*background: #6E9CD6;*//*}*/.main-menu li a {    text-decoration: none;    color: #ffffff;    font: 14px Open Sans;    position: relative;    z-index: 1000;}.sub-menu li a {    text-decoration: none;    color: #000000;    font: 14px Open Sans;    position: relative;    z-index: 1000;}/*濞存粌鐬兼鍥嚕濠婂啫绀嬮柡宥呭槻缁憋拷*/.sub-menu {    position: absolute;    left: 62px;    top: 0;    padding: 0;    width: 120px;    display: none;    text-align: left;}.sub-menu li.firstMe,.sub-menu li.firstMe a{    font-size: 14px;    font-weight: bold;    height: 20px;}.sub-menu li.link{    font-size: 13px;}li.link:hover {    cursor: pointer;}.sub-menu li:first-child{    width: 92px;    margin-left: -2px;}.sub-menu div.th-li li:first-child{    width: 90px;    margin-left: 0;}.sub-menu li a {    font-size: 13px;}.main-menu li:hover ul.sub-menu {    display: block;}.main-menu li:hover ul.sub-menu .th-menu{    display: none;}/*濞戞挸顦芥鍥嚕濠婂啫绀嬮悘鐐存礀缁辨垿寮崼鐔轰函*/ul.sub-menu li i.fa-chevron-down{    font-size: 12px;    color: #ffffff;    margin-left: 25px;}ul.sub-menu div.openth li.link a{    color: #ffffff;}ul.sub-menu div.openth li i{    color: #ffffff;}ul.sub-menu div.openth li i.fa-chevron-down{    -webkit-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transform: rotate(180deg);}div.th-menu ul li {    padding-left: 20px;}div.th-menu ul li a {    margin-left: 12px;    color: #000000;}div.th-menu ul li a:hover {    color: #ffffff;}.th-menu ul li,.th-menu ul li:first-child{    background: #F1F1F2;}.th-menu ul li:first-child{    width: 90px;    margin-left: 0;}/*濞存粌鐬兼鍥嚕濠婂啫锟�*/.left{    border-right:1px solid #C6C6C6 ;    width:200px;    height:100%;    font-size:14px;    text-align:center;    position:fixed;    background-color:#EFEFEF;}.left a{    text-decoration: none;}.left-menu{    list-style: none;    padding: 0;    width: 200px;}.left div div{    list-style: none;}.left-menu .first-one{    border-top: 1px solid #CCCCCC;}.div2{    height:40px;    line-height:40px;    cursor:pointer;    font-size:13px;    position:relative;    border-bottom:#CCCCCC 1px solid;    color:#ffffff;}.div2 p{    position: absolute;    left:50px;}.div2 p a{    color: #ffffff;}.jbsz {position:absolute;left:20px;  top:12px; top:0px\9;}.nav_menu{    width: 200px;    height: 40px;    line-height: 40px;    cursor: pointer;    font-size: 13px;    position: relative;    color:#ffffff;    z-index: 20;    border-bottom: #CCCCCC 1px solid;}.nav_menu p{    padding-top:1px;    font-weight: bold;    font-size: 16px;    position: absolute;    left:50px;}.div3{    display:none;    font-size:13px;    position: relative;    z-index: 10;}.div3 li{    border-bottom:1px solid #E1E1E1;    line-height:30px;    list-style:none;    text-align:left;    cursor: hand;}.div3 li a{    text-decoration: none;    outline: none;    position: relative;    color:black;    left:50px;    width: 182px;    display: inline-block;}.div3 ul li a:hover{    text-decoration: none;    color: #ffffff;}.left_top i{    position: absolute;    top:12px;    left:20px;    font-size:18px;    -webkit-transition: all 0.4s ease;    -o-transition: all 0.4s ease;    transition: all 0.4s ease;}.left_top i.fa-angle-left{    right:25px;    left: auto;    font-size:18px;}.div2 i{    font-size:13px;    -webkit-transition: all 0.4s ease;    -o-transition: all 0.4s ease;    transition: all 0.4s ease;}.div2 i.fa-chevron-down{    position: absolute;    right:22px;    left: auto;    top:12px;    font-size:12px;}/*濞戞挸顦芥鍥嚕濠婂啫锟�*/.div4{    display:none;    font-size:13px;    position: relative;    z-index: 10;    width: 230px;}.div4 li{    border-bottom:1px solid #E1E1E1;    line-height:30px;    list-style:none;    text-align:left;    cursor: hand;}.div4 li a{    text-decoration: none;    outline: none;    position: relative;      left:70px;    /* width: 282px; */    display: inline-block;}.div4 ul li a:hover{    text-decoration: none;    color: #ffffff;}.div5{    display:none;    font-size:13px;    position: relative;    z-index: 10;}.div5 li{    border-bottom:1px solid #E1E1E1;    line-height:30px;    list-style:none;    text-align:left;    cursor: hand;}.div5 li a{    text-decoration: none;    outline: none;    position: relative;    font-weight:100 !important;    left:65px;    width: 182px;    display: inline-block;}.div5 ul li a:hover{    text-decoration: none;    color: #ffffff;}/* .div4 li{    border-bottom:1px solid #E1E1E1;    line-height:30px;    list-style:none;    text-align:left;    cursor: hand;}.div4 li a{    text-decoration: none;    outline: none;    position: relative;    color:black;    left:50px;    width: 182px;    display: inline-block;}.div4 ul li a:hover{    text-decoration: none;    color: #ffffff;} */.thirdMe{    cursor: pointer;   /*  padding-left: 49px;  */}.thirdMe i{    position: relative;   /*   left:99px;  */    font-weight: bolder;    color: black;}ul.thirdMenu {    margin-left: -32px;}.thirdMenu ul li a{    position: relative;    left: 62px;}.special i{    position: relative;    left:34px;}.special1 i{    position: relative;    left:47px;}.special-inno i{    position: relative;    left:72px;}/*闁搞儳鍋撻悥锝夊籍鐎ｎ厽锟�*/.left-menu div.open .div2{    color:#ffffff;}.left-menu div.open i.fa.fa-chevron-down{    -webkit-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transform: rotate(180deg);}.rotateI {    -webkit-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transform: rotate(180deg);}/*濞戞挸顦芥鍥嚕濠婂啫锟�*/.thirdMenu li.openThird  a{    color:black;}.thirdMenu li.openThird  i.fa.fa-angle-down{    -webkit-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transform: rotate(180deg);}.thirdMenu li.openForth  a{    color:black;}.thirdMenu li.openForth  i.fa.fa-angle-down{    -webkit-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transform: rotate(180deg);
}/*闂侇偄顧侀妴宥夊础閿燂拷*/#Tabbar{    height: 40px;    position: fixed;    z-index: -1;    top: 0;    left: 200px;}#bar{    height: 40px;    position: absolute;    top: 0;    left: 0px;    margin:0;    padding:0;    list-style:none;}#bar li {    float: left;    display: block;    padding: 14px 5px 0 5px;    text-align: center;    height: 40px;       /*濞ｅ浂鍠楅弫绯眣闁兼枼鍓濆鏇熺▔閿燂拷*/    width: auto;}#bar li a {    color:#F6F2F4;    text-decoration:none;    font-size: 13px;    font-weight: bold;    margin-left: 5px;}/*鐟滅増鎸告晶鐘绘焻婢舵劑锟介柛妤嬫嫹*/#bar li.current a {    color:#ffffff;    text-decoration:none;    margin-left:10px;}#bar li a.remove {    color:#ffffff;    margin-left:10px;}a.remove img {    width: 9px;    border: none;}.center{    width: 100%;    position: absolute;    top: 40px;}.center p {    padding:20px 20px 100px 20px;    background: #fff;    margin: 15px;}.center iframe{    width:100%;    height: 678px;}.left-btn-div{  position:absolute;  height: 40px;  z-index:1;  background:#6E9CD6;}/*闁告帞锟�锟斤拷宸剏闁肩绱曢獮澶嬬▔閿燂拷*/.left-btn-div a{  color:white;  font-weight:700;  font-size:18px;  text-decoration: none;  /* margin-top: 21px; */  display: block;}end*//*濠⒀呭仜婵拷?y闁肩绱曢獮澶嬬▔閿燂拷*/.left-btn-div a {    color: white;    font-weight: 700;    font-size: 12px;    text-decoration: none;    display: block;    width: 25px;    height: 40px;    padding: 12px 4px;    background: transparent;}/*end*/.right-btn-div{  position:absolute;  background:#6E9CD6;  z-index:1;  height: 40px;/*濞ｅ浂鍠楅弫绯眣闁肩绱曢獮澶嬬▔閿燂拷*/  right:0;}/*闁告帞锟�锟斤拷宸剏闁肩绱曢獮澶嬬▔閿燂拷*/.right-btn-div a{  color:white;  font-weight:700;  font-size:18px;  text-decoration: none;  /* margin-top: 21px; */  display: block;}end*//*濠⒀呭仜婵拷?y闁肩绱曢獮澶嬬▔閿燂拷*/.right-btn-div a {    color: white;    font-weight: 700;    font-size: 12px;    text-decoration: none;    display: block;    width: 25px;    height: 40px;    padding: 12px 4px;    background: transparent;}.left-btn-div a.btn,.right-btn-div a.btn{border-radius: 0px;}.left-btn-div a.btn-default:hover,.left-btn-div a.btn-default:link,.left-btn-div a.btn-default:visited,.left-btn-div a.btn-default:active {    background-color: #6E9CD6;}.right-btn-div a.btn-default:hover,.right-btn-div a.btn-default:link,.right-btn-div a.btn-default:visited,.right-btn-div a.btn-default:active {    background-color: #6E9CD6;}/*end*/


5.最后附上贴图
                                             
        0        0           
	
				
		









 异形契约 知乎
    		异形契约 知乎



原创粉丝点击



		

热门IT博客


清酒 知乎清酒 知乎




起点作家写作软件起点作家写作软件




软件测试 量化 考核




房地产网络销售做什么




新人网络作家




文章管理系统源码




封闭式基金折价率数据




火焰字制作软件




html5小游戏源码下载




淘宝女中年上衣运动单




家居装修 3d模型 知乎




免费java短信发送接口




51单片机p0口上拉电阻




淘宝追加评论期限




apns pusher for mac




py交易是什么意思网络




美工学徒主要干什么




jquery数组增加元素




android编程权威指南2




如何彻底清除电脑数据



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    招商中正白酒指数分级
    察举制和九品中正制
    食物中毒
    甲醛中毒
    化学脑中毒
    中毒症状
    中毒
    酮症酸中毒
    水中毒
    脑中毒
    中毒性红斑
    铅中毒
    四季豆中毒
    硫化氢中毒
    煤气中毒
    汞中毒
    木耳中毒
    中毒韩国
    中毒 韩国
    中毒图片
    毒蕈中毒
    食物中毒症状
    食物中毒的症状
    一氧化碳中毒
    甲醛中毒症状12种表现
    柿子酸奶中毒
    甲醛中毒症状表现
    代谢性酸中毒
    呼吸性碱中毒
    食物中毒吃什么药
    食物中毒怎么办
    有机磷农药中毒
    亚硝酸盐中毒
    男童吃野蘑菇中毒
    情绪激动可能导致中毒
    辣木籽吃过后全家中毒
    吃柿子喝酸奶会中毒吗
    怎样判断自己是否甲醛中毒
    柿子不能和什么一起吃会中毒
    中水
    中水渔业


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里