html之frameset页面布局

来源：互联网发布：qq飞升坐骑升阶数据编辑：程序博客网时间：2024/05/19 02:19

使用frameset进行系统页面布局要生成的效果如下：

建立个主页面 index.html

frameborder：设置是否显示框架的边框 yes是显示，no是不显示

rows：横向分割页面 30%，30（或30px）,*

cols：纵向分割页面

注意：frameset标签没在body标签里面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>主页面</title></head><frameset rows="100,*" frameborder="yes"><frame src="top.html" /><frameset cols="150,*" frameborder="yes"><frame src="left.html" /><frame src="main.html" name="right" /></frameset></frameset><body></body></html>

top.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>top页面</title></head><body><h2>top</h2></body></html>

left.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>left页面</title></head><body><ul><li><a href="a.html" target="right">查询类别</a></li><li>添加类别</li></ul></body></html>

注意：<a href="a.html" target="right">查询类别</a> 中 target="right" 对应的是 index.htm 中的<frame src="main.html" name="right" />。当点击查询类别时候，会把main.html替换为a.html

系统注意内容 main.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>主页面</title></head><body><h2>主页面</h2></body></html>

a.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>查询类别页面</title></head><body><h2>查询类别页面</h2></body></html>

0 0