手风琴效果框架

最新推荐文章于 2019-12-25 19:55:22 发布
mr_orange_klj
最新推荐文章于 2019-12-25 19:55:22 发布
阅读量465
点赞数
分类专栏： html
本文链接：https://blog.csdn.net/mr_orange_klj/article/details/42777809
版权
html 专栏收录该内容
20 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="This is my page"/>
<link rel="shortcut icon" href=" img/favicon.ico" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
html,body{
height:100%;
font-family:"Microsoft YaHei";
overflow: hidden;
}
.myheader {
float: left;
width: 100%;
height: 50px;
position: absolute;
min-width:850px;
}
.main {
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
float: left;
width: 100%;
padding-top:50px;
}
.main-left {
float: left;
height: 100%;
left: 0;
background-color: #f5f5f5;
width: 200px;
border:1px solid #e5e5e5;
}
.main-right {
height: 100%;
width: 100%;
left: 200px;
padding-left: 200px;
border:1px solid #e5e5e5;
}

.header-right {
line-height: 50px;
float: right;
height: 50px;
width: 50px;
}
.frame-container {
height: 100%;
width: 100%;
background-color: #FFF;
padding-left:5px;
padding-top:5px;
padding-right: 5px;
}
.left-bar{
   width:100%;
   padding:0;
   margin:0;
   list-style-type: none;
}
.left-bar li{
   float:left;
   width:100%;
}
.left-bar li a{
   float:left;
   height:40px;
   line-height: 40px;
   padding-left: 50px;
   border-bottom:1px solid #e5e3e9;
   background-color: white;
}
.left-bar .active a{
  background-color: #428bca;
  color:white;
}
.left-bar .active a:visited{
  background-color: #428bca;
  color:white;
}
.left-bar .active a:link{
  background-color: #428bca;
  color:white;
}
.left-bar .active a:hover{
  background-color: #428bca;
  color:white;
}
.left-bar a:visited{
   float:left;
   height:40px;
   line-height: 40px;
}
.left-bar a:link{
   width:100%;
}
.left-bar a:hover{
   background-color: #e5e3e9;
   text-decoration: none;
}
.left-bar .sliderbar{
   display: none;
   border-bottom: 1px solid #e5e3e9;
}
.left-bar .sliderbar ul{
   padding:0;
   list-style-type: none;
}
.left-bar .sliderbar a{
   height:30px;
   padding-left: 50px;
   line-height: 30px;
   border:none;
}
.left-bar .sliderbar active a{
   background-color: #428bca;
}
</style>
  <meta charset="utf-8">
  </head>
  <script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/interface/ajax.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript">

$(document).ready(function(){
    $(".slider").click(function(){
       $(this).next().slideToggle();
       
    });
    $(".left-bar .sliderbar a").click(function(){
       $(".left-bar li").removeClass("active");
       $(this).parent().addClass("active");
    });
    $(".left-bar .first-bar").click(function(){
       $(".left-bar li").removeClass("active");
       $(this).parent().addClass("active");
    });
});
</script>

<body>
   <div class="myheader">
       
     <div class="header-right"><a href="quit.jsp">退出</a></div>
          
   </div>
<div class="main">
  <div class="main-left">  
    <ul class="left-bar">  
      <li class="active"><a class="first-bar" href="admin/default.jsp" target="iframe" >首页</a></li>  
      <li class='slider'><a  href="javascript:;" target="iframe">aaa<span style="float:right;margin-top:13px;margin-right: 5px" class="glyphicon glyphicon-chevron-down"></span></a></li>
      <li class="sliderbar">
        <ul>
          <li><a href="javascript:;">safsa</a></li>
          <li><a href="javascript:;">safsa</a></li>
          <li><a href="javascript:;">safsa</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="main-right">
    <div class="frame-container"><iframe name="iframe" src="admin/default.jsp" style="width:100%; height:100%;float:left; border:none"></iframe></div>
    
  </div>
</div>  


  </body>
</html>