设为首页优惠IDC收藏本站六狼博客六狼论坛
开启辅助访问 切换到窄版

六狼论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

新浪微博账号登陆

只需一步，快速开始

搜索
六狼论坛»首页 › WEB前端 › Html/Css › 左边菜单，右边内容
返回列表 发新帖
查看: 60|回复: 0

左边菜单，右边内容

[复制链接]
iammonster

升级  37.33%

94

主题

94

主题

94

主题

举人

Rank: 3Rank: 3

积分
312
 楼主| 发表于 2013-2-7 15:11:04 | 显示全部楼层 |阅读模式
主框架(main.html)左右两框
左边功能菜单（left.html）
右边内容（content*.html）
 
<div style="padding-right: 5.4pt; padding-left: 5.4pt; background: #e6e6e6; padding-bottom: 4px; width: 95%; padding-top: 4px;">main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>主页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
  <frameset id="frame1" rows="*" cols="265,*" framespacing="0" frameborder="yes" border="0">
    <frame src="left.html" name="leftFrame" scrolling="auto" noresize>
    <frame src="content1.html" name="mainFrame" scrolling="NO"  noresize>
  </frameset>
<noframes>
<body>
</body>
</noframes>
</html>

left.html


<html>
    <head>
        <title>左边操作菜单</title>
        <script type="text/javascript">...
            function show()...{
                var id = document.getElementById("info");
                var sub = document.getElementById("subInfo");
                if(sub.style.display == "none") ...{
                    sub.style.display="inline";                                            
                } else ...{
                    sub.style.display="none";                    
                }            
            }
        </script>
    </head>
    <body>
        <table border="0">
            <tr>
                <td>
                    <table border="0">
                        <tr><td id="info" style="cursor: hand" onClick="show()">信息维护</td></tr>
                    </table>
                    <div id="subInfo" style="display: none">
                        <table border="0">
                            <tr>
                                <td><a href="content1.html" target="mainFrame"> 修改资料</a></td>
                            </tr>
                            <tr>
                                <td><a href="content2.html" target="mainFrame"> 修改密码</a></td>
                            </tr>
                            <tr>
                                <td><a href="content3.html" target="mainFrame"> 添加子栏目</a></td>
                            </tr>
                        </table>
                    </div>
                </td>                
            </tr>
            <tr>
                <td>信息维护2</td>
            </tr>
            <tr>
                <td><a href="content2.html" target="mainFrame">功能菜单</a></td>
            </tr>
            <tr>
                <td><a href="content2.html" target="mainFrame">退出</a></td>
            </tr>
        </table>
    </body>
</html>

content*.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
<body>
<font size="12">内容1</font>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
<body>
<font size="12">内容2</font>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
<body>
<font size="12">内容3</font>
</body>
</html>
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表