CSS+DIV网页布局 实现框架集效果

不多说,直接看下面HTML代码,保存为HTML文件查看效果,代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head runat="server">
04     <title>CSS+DIV网页布局 实现框架集效果</title>
05     <link href="Styles/frame.css" rel="Stylesheet" type="text/css" />
06     <link href="Styles/menu.css" rel="Stylesheet" type="text/css" />
07   
08     <script language="javascript" type="text/javascript">
09     function SetWinHeight(obj)
10     {
11         var win=obj;
12         if (document.getElementById)
13         {
14             if (win && !window.opera)
15             {
16                 if (win.contentDocument && win.contentDocument.body.offsetHeight) 
17                 win.height = win.contentDocument.body.offsetHeight; 
18                 else if(win.Document && win.Document.body.scrollHeight)
19                 win.height = win.Document.body.scrollHeight;
20             }
21         }
22     }
23     </script>
24   
25 </head>
26 <body style="overflow: hidden;">
27     <form id="form1" runat="server">
28     <div id="framecontentLeft">
29         <div class="menu">
30             <ul>
31                 <li><a href="#" target="content">菜单</a></li>
32             </ul>
33         </div>
34     </div>
35     <div id="framecontentTop">
36         <div style="text-align: center;">
37             <div style="float: right;">
38                 <a href="Default.aspx?act=logout">退出</a>
39             </div>
40             <h1>
41                 后台管理系统
42             </h1>
43         </div>
44     </div>
45     <div id="maincontent">
46         <iframe id="content" name="content" onload="Javascript:SetWinHeight(this)" frameborder="0"
47             scrolling="no" width="100%"></iframe>
48     </div>
49     </form>
50 </body>
51 </html>
view source
print?
1 2.frame.css代码：
view source
print?
01 <PRE class=brush:css>#framecontentTop
02 {
03     position: absolute;
04     top: 0;
05     left: 0;
06     height: 100px;
07     width: 100%;
08     overflow: hidden;
09     vertical-align: middle;
10     background-color: #D2E6FA;
11 }
12   
13 #framecontentLeft
14 {
15     position: fixed;
16     top: 100px;
17     left: 0;
18     height: 100%;
19     width: 150px;
20     overflow: hidden;
21     vertical-align: top;
22     background-color: #D2E6FA;
23 }
24   
25 #maincontent
26 {
27     position: fixed;
28     left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
29     top: 100px; /*Set top value to HeightOfTopFrameDiv*/
30     right: 0;
31     bottom: 0;
32     overflow: auto;
33     background: #fff;
34     border-top: solid 2px #70cbea;
35     border-left: solid 2px #70cbea;
36 }
37 * html body
38 {
39     padding: 100px 0 0 150px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
40 }
41 * html #maincontent
42 {
43     height: 100%;
44     width: 100%;
45 }
46 * html #framecontentTop
47 {
48     width: 100%;
49 }
50 </PRE>
view source
print?
01 <PRE class=brush>3.menu.css代码：</PRE>
02 <PRE class=brush><PRE class=brush:css>.menu
03 {
04 }
05 .menu ul
06 {
07     padding: 0;
08     margin: 0;
09     list-style-type: none;
10     width: 100%;
11 }
12 .menu li
13 {
14     position: relative;
15     background: #d4d8bd;
16     height: 26px;
17 }
18 .menu a, .menu a:visited
19 {
20     display: block;
21     text-decoration: none;
22     height: 25px;
23     line-height: 25px;
24     width: 149px;
25     color: #000;
26     text-indent: 5px;
27     border: 1px solid #fff;
28     border-width: 0 1px 1px 0;
29 }
30 .menu a:hover
31 {
32     color: #fff;
33     background: #949e7c;
34 }
35   
36 </PRE>
37 </PRE>
38 <PRE class=brush></PRE>

更多网页制作教程,请继续关注网站制作教程网.~