手风琴效果框架

来源：互联网发布：逆战朱雀宏数据编辑：程序博客网时间：2024/06/05 02:37
<!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>
0 0