53frame layout examples

一、整体布局
```html:run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题</title>
</head>
<frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize"/>
<frameset cols="187,*" frameborder="no" border="0" framespacing="0">
<frame src="left.html" scrolling="No" noresize="noresize"/>
<frame src="index.html" name="rightFrame"/>
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
```
二、左侧导航页
```html:run
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>标题</title>
</head>
<body>
<div class="lefttop"><span></span>功能栏</div>
<dl class="leftmenu">
<dd>
<div class="title">
<span><img src="../static/images/leftico01.png"/></span>管理信息
</div>
<ul class="menuson">
<li><cite></cite><a href="right.html" target="rightFrame">IP设置</a><i></i></li>
<li><cite></cite><a href="restart.html" target="rightFrame">重启</a><i></i></li>
<li><cite></cite><a href="tab.html" target="rightFrame">用户管理</a><i></i></li>
<li><cite></cite><a href="error.html" target="rightFrame">404页面</a><i></i></li>
</ul>
</dd>
<dd>
<div class="title">
<span><img src="../images/leftico02.png"/></span>其他设置
</div>
<ul class="menuson">
<li><cite></cite><a href="#">编辑内容</a><i></i></li>
<li><cite></cite><a href="#">发布信息</a><i></i></li>
<li><cite></cite><a href="#">档案列表显示</a><i></i></li>
</ul>
</dd>
</dl>
</body>
</html>
```
三、向下导航
```html:run
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上方导航</title>
</head>
<body>
<table>
<tr>
<td><a href="right.html" target="rightFrame">北京旅游</a></td>
<td><a href="restart.html" target="rightFrame">上海旅游</a></td>
<td><a href="tab.html" target="rightFrame">广州旅游</a></td>
<td><a href="error.html" target="rightFrame">深圳旅游</a></td>
</tr>
</table>
</body>
</html>
```

四、右侧详情页
```html:run
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>标题</title>
</head>
<body>
<div>
<span>位置:</span>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">登陆日志</a></li>
</ul>
</div>
<div>
<div>
<div>
<button>过滤</button>
</div>
</div>
<div>
<div>
<button>标记</button>
<button id="delete">删除</button>
<button id="refresh">刷新</button>
</div>
<div>
<button id="lastPage">尾页</button>
<input type="text" id="leap"/>
<label for="leap">跳转</label>
</div>
</div>
</div>
</body>
</html>
```

Guess you like

Origin www.cnblogs.com/gushixianqiancheng/p/10966966.html