iframe分栏窗口

2019/7/23 18:00:50 人评论 次浏览 分类:学习教程

iframe分栏窗口实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/workspace.css"/>        
    
    <style> 
    .navPoint { 
        color:white;
        cursor:hand;
        font-size:12px;
        font-family:"微软雅黑", "黑体";
        } 
    </style> 
    <script type="text/javascript">
    var flag=true;
    function switchSysBar(){ 
        if (flag){ 
            document.all("img1").src="images/l.png";
            document.all("frmTitle").style.display="none" ;
            flag=false;
        } else { 
            document.all("img1").src="images/l.png";
            document.all("frmTitle").style.display="" ;
            flag=true;
        } 
    } 
    
    function changeMenu(id,url,pId){
        $("li").each(function(i){
           if(id=="menu"+(i+1)){
              $(this).attr("class","fl on");
              location.href="/back/selectPurview.action?id="+pId;
           }else{
              $(this).attr("class","fl");
           }
        });
    }
         
      //退出
      function goToExit(){
          window.location.href="/backLogin/goToExit.action";
      }
      
    </script>
</head>

<body style="overflow:scroll;">
<div class="top" style="height:85px;">       
        <div class="current fr" style="width:220px;white-space:nowrap;margin-top: 5px;">
                当前用户:<font color="#ff5200">llj</font>
                [<a href="javascript:goToExit();">退出登录 </a>]
        </div>
        <div class="nav fl" style="margin-top:30px;margin-left:5px;width:100%;">
            <ul>                   
                    <li class="fl onfl" id="menu1">
                             <a class="navSelf" href="javascript:changeMenu('menu1','left.jsp','2')">系统管理</a>
                    </li>                 
                    <li class="fl on" id="menu2">
                             <a class="navSelf" href="javascript:changeMenu('menu2','left.jsp','309')">财政操作管理</a>
                    </li>             
                    <li class="fl" id="menu3">
                             <a class="navSelf" href="javascript:changeMenu('menu3','left.jsp','88')">新闻内容管理</a>
                    </li>                 
                    <li class="fl" id="menu4">
                             <a class="navSelf" href="javascript:changeMenu('menu4','left.jsp','333')">电商运营管理</a>
                    </li>             
            </ul>
        </div>
    </div>
    
    <div class="line"></div>
   
    <table border="0" cellpadding="0" cellspacing="0" style=" width:100%; table-layout:fixed;">
      <tr>
        <td width="180" id="frmTitle" noWrap name="fmTitle" align="center" valign="top">
            <iframe name="leftFrame" height="800" width="180" src="left.jsp" border="0" frameborder="0" scrolling="no"></iframe>
        </td>
        <td width="8" height="800" valign="middle" background="/main_12.gif" οnclick="switchSysBar()">
            <span class="navPoint"><img src="images/l.png" name="img1" width=8 height=52 id=img1 /></span>
        </td>
        <td valign="top" height="800">
            <iframe height="800" οnlοad='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";'  name="mainFrame" height="100%" width="100%" src="main.jsp" border="0" frameborder="0" scrolling="yes"></iframe>
        </td>       
      </tr>
    </table>
</body>
</html>

==========================

css1:

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}

fieldset, img, input, button {             /*fieldset组合表单中的相关元素*/
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

ul, ol {
    list-style: none;                /*清除列表风格*/
}

input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}

select, input {
    vertical-align: middle;
}

select, input, textarea {
    font-size: 12px;
    margin: 0;
}

textarea {
    resize: none;
}

/*防止多行文本框拖动*/
img {
    border: 0;
    vertical-align: middle;
}

/*  去掉图片低测默认的3像素空白缝隙*/
table {
    border-collapse: collapse;            /*合并外边线*/
}


body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";    /*宋体,Unicode,统一码*/
    color: #666;
    background: #fff
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}

a {
    color: #666;
    text-decoration: none;
}

/* a:hover {
    color: #C81623;
} */

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em {
    font-style: normal;
    text-decoration: none;
}

/* .col-red {
    color: #C81623 !important;
} */

/*公共类*/
.w,.main-content{
    /*版心 提取 */
    width: 1200px;
    margin: 0 auto;

}

.fl {
    float: left;
}

.fr {
    float: right
}

.al {
    text-align: left
}

.tc{
    text-align: center;
}

.ar {
    text-align: right
}

.hide {
    display: none
}
.noborder {
    border: none;
}
.fs12{
    font-size: 12px;
}
.fs14{
    font-size: 14px;
}
.fs22{
    font-size: 22px;
}
.fs30{
    font-size: 30px;
}
.fs20{
    font-size: 20px;
}
.color-red{
    color: #ff3000;
}
.color-666{
    color: #666 !important;
}
.color-yellow{
    color: #fede03;
}
.color-black{
    color: #000;
}
.color-brown{
    color: #4b3401;
}
.pr{
    position: relative;
}
.pa{
    position: absolute;
}

.mt-15{margin-top: 15px}

css2:

@charset "utf-8";
/* CSS Document */
.code{width:100%;height:auto;}
.top{height:66px;width:100%;background:url(../images/workspace/tup.jpg) no-repeat top right #3d87c6;}
.line{width:100%;height:6px;border-top:1px solid #3777ae;border-bottom:1px solid #fff; background:#5fa6e2;overflow:hidden;}

.nav{width:auto;height:34px; margin-top:32px; margin-left:96px;}
.nav ul{height:34px; display:inline;}
.nav ul li{padding-left:9px; overflow:hidden;display:block;}
.nav ul li,.nav ul li a,.nav ul li.on,.nav ul li.no a{height:34px;font-size:14px; font-family:"微软雅黑"; font-weight:900; color:#fff; background:url(../images/workspace/nav.jpg);}
.nav ul li a{background-position: right top;padding:0px 15px 0 7px;line-height:38px;display:block;float:left;}

.nav ul li.on{background-position:0 -34px;}
.nav ul li.on a{background-position:right -34px;color:#367abb;}

.current{color:#fff; margin:10px 15px 0 0; display:inline;}
.current a{color:#fff;}
.current a:hover{ text-decoration:underline;}
/*main==============================================================================================*/
.main{ width:100%;height:auto;}
.mainLeft{width:172px;height:auto; background:#c5c5c5;}
.leftNavCode{width:172px;height:auto; background:#eee;}

.menuitem{height:40px; background:#eee;position:relative;border-top:1px solid #fff; border-bottom:1px solid #d6d6d6;}
.imgCode{margin-left:15px; display:inline; margin-top:10px;}
.TextIcon{height:20px;float:left; margin:5px 0 0 12px; line-height:33px;}

.leftNav{padding-bottom:10px; background:#f8f8f8;border-bottom:1px solid #d5d3d3;}
.leftNav ul{padding-top:10px;}
.leftNav ul li{height:28px;line-height:28px;}
.leftNav ul li a{ no-repeat;padding-left:25px; height:13px;color:#666; display:block;height:28px; width:147px;float:left;}
.leftNav ul li a span{background:url(../images/workspace/jiao1.jpg);height:28px;width:6px; margin-right:12px;}
.leftNav ul li a:hover{color:#3590d0; background: #e5e4e4;}
.leftNav ul li a:hover span{background:url(../images/workspace/jiao.jpg) no-repeat; }

.shrink{ width:8px;height:720px; background:#c5c5c5;}
.shrink span.open{width:8px;height:200px; background:url(../images/workspace/san.jpg) no-repeat left bottom; display:block; cursor:pointer;}

.left_menu_on {width: 10px;padding: 0;}
        
.mainRight{width:auto;height:700px;background:url(../images/workspace/bg.jpg);padding:10px 20px;}
.ThreeNavigation{width:204px;height:500px;border-radius:5px;box-shadow:1px 2px 3px #ccc; background:#f7f7f7;behavior:url(../js/PIE.htc); position:relative; margin-right:10px;}
.codeTop{border-radius:5px 5px 0 0;behavior:url(../js/PIE.htc);height:30px; background:#e6e7e8;_margin:3px 0 0 3px; line-height:30px; padding-left:15px; font-weight:900;color:#666;}
.ThreeContent{padding:12px;}
.rightTable{border-radius:5px; box-shadow:1px 2px 3px #ccc; background:#f7f7f7; width:auto;height:auto;behavior:url(../js/PIE.htc); position:relative;}
.tableCodeTop{width:auto;height:30px; background:#e4e5e6; border-radius:5px 5px 0 0;behavior:url(../js/PIE.htc);_margin:3px 0 0 3px; line-height:30px; padding-left:15px; font-weight:900;color:#666;}
.tableMain{width:auto;height:auto; padding:15px;}
 

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->