DIV+CSS实现FRAMESET效果

本文转载自查看原文 2012-10-26 12:01 10671 CSS+DIV

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

1.Main.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 >
< link href ="Styles/frame.css" rel ="Stylesheet" type ="text/css" />
< link href ="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 ="CategoryList.htm" target ="content" > 产品类别 </ a ></ li >
< li >< a href ="ProductList.htm" target ="content" > 产品明细 </ a ></ li >
</ ul >
</ div >
</ div >
< div id ="framecontentTop" >
< div style ="text-align: center;" >
< div style ="float: right;" >
< a href ="Default.aspx?act=logout" > 退出 </ a >
</ div >
< h1 >
后台管理系统
</ h1 >
</ div >
</ div >
< div id ="maincontent" >
< iframe id ="content" name ="content" onload ="Javascript:SetWinHeight(this)" frameborder ="0"
scrolling ="no" width ="100%" ></ iframe >
</ div >
</ form >
</ body >
</ html >

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页面代码（根据自己需要输入）：

代码

四、效果图：

（图一）

（图二）

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 DIV+CSS实现仿京东商城导航条效果 C#实现winform仿div+css半透明遮罩效果以div代替frameset，用css实现仿框架布局 DIV+css内容太长，实现点击展开余下全文利用div+CSS实现与clip相同作用的图片剪切 DIV+CSS定义及优势 div+css之清除浮动 div+css制作表格 DIV实现CSS 的placeholder效果 Html 之div+css布局之css基础