用div+iframe 布局

用div+iframe 布局

frameset 已经过时, 使用frameset会带来很多问题,比如session丢失等. 所以提倡用iframe。下面是一个不错的网站布局的。

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;
top: 100px;
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;
}
* 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;
}

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

类别	类别	类别
类别	类别	类别
类别	类别	类别

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

产品	产品	产品
产品	产品	产品
产品	产品	产品

产品	产品	产品
产品	产品	产品
产品	产品	产品

运行截图