一種大氣簡單的Web管理（陳列）版面設計
阿新 • • 發佈：2017-05-04
borde absolut setup hid color 正常的 for pre ==
左側menu菜單採用這種menu.css
主頁面代碼例如以下：
在頁面的設計中，多版面是一種常見的設計樣式。本文命名一種 這種樣式。能夠簡單描寫敘述為一行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>
</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" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
</div>
</form>
</body>
</html>content中要展示的頁面，僅僅要是一個正常的網頁就可以。
一種大氣簡單的Web管理（陳列）版面設計