DIV+CSS实现FRAMESET效果

一、Main.htm页面代码及其样式代码：

1.Main.htm页面代码

2.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;/*Set left value to WidthOfLeftFrameDiv*/
top: 100px;/*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
border-top: solid 2px #70cbea;
border-left: solid 2px #70cbea;
}
* html body
{
padding: 100px 0 0 150px;/*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent
{
height: 100%;
width: 100%;
}
* html #framecontentTop
{
width: 100%;
}

3.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;
}

二、CategoryList.htm页面代码（根据自己需要输入）：

代码

<!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>
<title>类别列表</title>
</head>
<body>
<div>
<table>
<tr>
<td>类别</td>
<td>类别</td>
<td>类别</td>
<tr>
<tr>
<td>类别</td>
<td>类别</td>
<td>类别</td>
<tr>
<tr>
<td>类别</td>
<td>类别</td>
<td>类别</td>
<tr>
</table>
</div>
</body>
</html>

三、ProductList.htm页面代码（根据自己需要输入）：

代码

四、效果图：

（图一）

（图二）