用div+iframe 布局
来源:互联网 发布:淘宝纪录片 编辑:程序博客网 时间:2024/05/17 02:09
用div+iframe 布局
frameset 已经过时, 使用frameset会带来很多问题,比如session丢失等. 所以提倡用iframe。下面是一个不错的网站布局的。
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.getElementByIdx_x)
{
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;
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页面代码(根据自己需要输入)
<!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>
5. 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>
运行截图
- 用div+iframe 布局
- 用div仿框架iframe结构布局的示例代码
- Div+Css布局--iframe的使用
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)
- activex布局iframe+div+css,activex无法显示的问题。
- 用div+iframe 代替frameset 框架
- 用div+iframe 代替frameset 框架
- 用 div 做表格布局
- div iframe 涂层
- div被iframe挡住
- iframe div边框属性
- div+ajax代替iframe
- div代替iframe
- div中嵌套iframe
- div iframe中的sendkeys
- div布局
- div布局
- 九九除法表的四种姿态
- 七月 青春流浪的季节
- java极速web开发框架jfinal
- gprof
- HttpKit 基于Jfianl 调用第三方接口案例
- 用div+iframe 布局
- java 反射提供的功能(1)
- 2440烧写方法----晕晕的。。。
- AS中Gradle 知识普及
- Annotation
- centos 7.5+mysql 5.7 RPM安装步骤
- 如何在Java中使用双重检查锁实现单例
- hrbust 1006 River Hopscotch【二分查找】好题
- Jfianl aop 和 利用aop 自己定义一个Service异常