使用框架切分网页
效果:
代码:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- frame_a
- </body>
- </HTML>
frame_a.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- frame_2
- </body>
- </HTML>
frame_2.HTML
- <HTML>
- <frameset rows="25%,75%">
- <frame src="frame_a.html" name="framea" />
- <frame src="frame_2.html" name="frame2" />
- </frameset>
- </HTML>
框架分页. HTML
<frameset></frameset > 中的 rows="25%,75%" 可以同时加载上下两个页面, 上面的那个页面占整个页面的 1/4, 下面的那个页面占 3/4., 也可以分为多个页面.
框架的多种切分方法
效果:
代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- frame3
- </body>
- </HTML>
fram_3.HTML
- <HTML>
- <frameset rows="25%,*">
- <frame src="frame_a.html" name="framea" />
- <frameset cols="25%,*">
- <frame src="frame_2.html" name="frame2" />
- <frame src="frame_3.html" name="frame3" />
- </frameset>
- </frameset>
- </HTML>
多种框架切分方法. HTML
在代码中的 rows="25%,*",cols="25%,*" 中的 * 表示剩余的比例. cols 表示垂直分页, rows 表示上下分页.
使用框架实现后台管理系统的布局
效果:
代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <div align="center">
- <br />
欢迎来到 perfect * 的博客园
- </div>
- </body>
- </HTML>
top.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <a href="apart.html" target="right">
- 新的文章
- </a>
- <!-- 这里的 right 来自于框架中 frame 定义的 name 属性值 -->
- </body>
- </HTML>
left.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <div align="center">
perfect * 又有新的博客发布了, 欢迎浏览!!!
- </div>
- </body>
- </HTML>
right.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
使用框架实现后台管理系统的布局
- </body>
- </HTML>
apart.HTML
- <HTML>
- <frameset rows="10%,*">
- <frame src="top.html" name="top" />
- <frameset cols="10%,*">
- <frame src="left.html" name="left" />
- <frame src="right.html" name="right" />
- </frameset>
- </frameset>
- </HTML>
使用框架实现后台管理系统的布局. HTML
使用框架实现后台管理系统的布局. HTML 中的 target 属性实现了在其它网页显示另一个网页的内容.
来源: http://www.bubuko.com/infodetail-2987724.html