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頁面代碼（根據自己需要輸入）：

代碼

<! 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 style ="height:500px;" >
< 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 >
< table style ="height:500px;" >
< 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 >

四、效果圖：

（圖一）

（圖二）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱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基礎