站长中国
站长社区
站长论坛
技术学院
源码下载
模板下载
问高手
建站资源
站长工具
找链接
找链接
特效首页
Js特效
Css特效
javascript 特效
文字特效
菜单导航特效
背景图像特效
图层特效
鼠标特效
页面窗口特效
色彩表格特效
表单按钮特效
游戏娱乐特效
日期时间特效
综合特效代码
csS特效
横向导航
竖向导航
图片css
表单css
divcss
链接按钮
页面布局
其他特效
css实现顶边栏框架样式
分类:页面布局 来源: 作者: 时间:2009-01-25
使用方法&效果
推荐:
启网
- 专业的主机、服务器合租提供商
17hz.net - 5年服务器合租精品服务
请运行以下代码查看效果
代码
<!--Force IE6 into quirks mode with this comment tag--> <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Dynamic Drive: CSS Top Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; top: 0; left: 0; width: 100%; height: 130px; /*Height of frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color: navy; color: white; } #maincontent{ position: fixed; top: 130px; /*Set top value to HeightOfFrameDiv*/ left: 0; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ } * html body{ /*IE6 hack*/ padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/ } * html #maincontent{ /*IE6 hack*/ height: 100%; width: 100%; } </style> <script type="text/javascript"> /*** Temporary text filler function. Remove when deploying template. ***/ var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"] function filltext(words){ for (var i=0; i<words; i++) document.write(gibberish[Math.floor(Math.random()*3)]+" ") } </script> </head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Top Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <h1>Dynamic Drive CSS Library</h1> <p><script type="text/javascript">filltext(255)</script></p> <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p> </div> </div> </body> </html>
运行代码
复制代码
© CopyRight 2006-2009,CNZZAD.COM, Inc. All Rights Reserved 1.89MB 0.0407
鲁ICP备05001756号
站长中国群1:
30492658
精致合租咨询群1:
21445564