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.οncοntextmenu=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; } /*闁搞儳鍋撻悥锝夊籍鐎n厽锟�*/ .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; /*濞e浂鍠楅弫绯眣闁兼枼鍓濆鏇熺▔閿燂拷*/ 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;/*濞e浂鍠楅弫绯眣闁肩绱曢獮澶嬬▔閿燂拷*/ 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.最后附上贴图