一种大气简单的Web管理（陈列）版面设计

浏览数：27 / 时间：2015年06月09日

在页面的设计中，多版面是一种常见的设计样式。本文命名一种这样的样式，可以简单描述为一行top，一列左目录，剩余的右下的空间为内容展示区。这样的样式，便于快速定位到某项内容或功能。

在基本的HTML语法中，iframe可以提供多版面，方法简易，然而，本文主要在于推介一种利用Div实现版面控制的方法，这种方法可以利用div带来的更大灵活性。

        首先，展示下最终实现的效果。

       主页面采用这样的frame.css样式控制。

#framecontentTop
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background-color: #D2E6FA;
}

#framecontentLeft
{
    position: fixed;
    top: 100px;
    left: 0;
    height: 100%;
    width: 150px;
    overflow: hidden;
    vertical-align: top;
    background-color: #D2E6FA;
}

#maincontent
{
    position: fixed;
    left: 150px;
    top: 100px;
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #fff;
    border-top: solid 2px #70cbea;
    border-left: solid 2px #70cbea;
}

左侧menu菜单采用这样的menu.css

.menus
{
}
.menu ul
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
}
.menu li
{
    position: relative;
    background: #d4d8bd;
    height: 26px;
}
.menu a, .menu a:visited
{
    display: block;
    text-decoration: none;
    height: 25px;
    line-height: 25px;
    width: 149px;
    color: #000;
    text-indent: 5px;
    border: 1px solid #fff;
    border-width: 0 1px 1px 0;
}
.menu a:hover
{
    color: #fff;
    background: #949e7c;
}

主页面代码如下：

<html>
<head>

<link href="Settings/Styles/frame.css" rel="Stylesheet" type="text/css" />
<link href="Settings/Styles/menu.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
body
{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
</style>


<script language="javascript" type="text/javascript">


function SetWinHeight(obj)
{
    var win=obj;
    if (document.getElementById)
    {
        if (win && !window.opera)
        {
            if (win.contentDocument && win.contentDocument.body.offsetHeight)
                win.height = win.contentDocument.body.offsetHeight;
            else if(win.Document && win.Document.body.scrollHeight)
                win.height = win.Document.body.scrollHeight;
        }
    }
}



</script>
</head>

<body>


<form id="form1" runat="server">

<div id="framecontentLeft">
<div class="menu">
<ul>
<li><a href="Settings/setAutoInvite.html" target="content">Set AutoInvite</a></li>
<li><a href="Settings/setUpdate.html" target="content">Set Update</a></li>
<li><a href="Settings/setCommand.html" target="content">Set Command</a></li>
<li><a href="Settings/setParentID.html" target="content">Set ParentID</a></li>
</ul>
</div>
</div>

<div id="framecontentTop">
<div style="text-align: center;">
<h1>
Manage Center
</h1>
</div>
</div>

<div id="maincontent">
<iframe id="content" name="content" onload="Javascript:SetWinHeight(this)" frameborder="0"
scrolling="no" width="100%" height="100%"></iframe>
</div>

</form>

</body>
</html>

其中，SetWinHeight是为了让子页面高度自适应。

至于要展示的页面，只要是一个正常的网页即可。

一种大气简单的Web管理（陈列）版面设计,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

一种大气简单的Web管理（陈列）版面设计