frameset
一个双标签，它定义了一个框架集，它被用来组织多个窗口。每个窗口都是一个独立的html界面。
重点知识：（属性）
cols----按列分割窗口
rows----按行分割窗口
1、基本语法：
<frameset cols="value，value...">...</frameset> 或者 <frameset rows="value，value...">...</frameset>
前一个是将一个页面分为任意数量的并列子页面，value值一般采用百分比来取值。
前一个是将一个页面分为任意数量的并排子页面，value值一般采用百分比来取值。
rows与cols不能同时使用，否则后者将覆盖掉前者。
2、使用方法：
将其写在HTML代码中，它替代了body标签，也就是说它不能与body同时使用。标签内使用单标签frame来引入其它HTML页面。
eg:
<frameset cols="20%,80%"> <frame src="left.html" name="leftframe"> <frame src="news.html" name="rightframe"> </frameset>
frame必须定义的属性：
src：引入页面的地址。
name：表示该框架的名称，属性值可以随便定义，是超链接a标签中target属性的寻找目标。
3.我的应用实例效果图：
这是我的Web前端的一个试验作业
首页 index代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> </head> <frameset rows="20%,70%,10%"> <frame src="top.html" style="border: 1px solid black;" name="topframe"> <frame src="middle.html" style="border: 1px solid black;" name="middleframe"> <frame src="bottom.html" style="border: 1px solid black;" name="bottomframe"> </frameset> </html>
顶部框架 top
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top</title>
</head>
<body style="background-image: url('');background-color: #8c8cfc;font-size: 40px;font-weight: bolder; color: white;">
<div style="height: 100%; text-align: center;padding-right:70%;padding-top: 5%; ">
网站后台管理系统
</div>
</body>
</html>中间层框架 middle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>middle</title> </head> <frameset cols="20%,80%"> <frame src="left.html" name="leftframe"> <frame src="news.html" name="rightframe"> </frameset> </html>
中间左边框架 left
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<style>
a {
display: block;
margin-top: 20px;
font-size: 20px;
}
</style>
<body>
<div style="display: block;position: relative;margin: 100px auto;width: 120px;">
<a href="news.html" target="rightframe">新闻管理</a>
<a href="news.html" target="rightframe">用户管理</a>
<a href="http://www.njust.edu.cn" target="rightframe">南京理工大学</a>
<a href="http://www.baidu.com" target="rightframe">百度</a>
</div>
</body>
</html>中间右边框架 right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<style type="text/css">
td,
table {
border: 1px solid #cccccc;
background-color: #eeeeee;
}
</style>
<body style="text-align: center;">
<div style="margin: 50px 20px;">新闻————览表</div>
<table>
<thead>
<tr>
<td>序号</td>
<td>新闻标题</td>
<td>添加日期</td>
<td>操作</td>
<td>发布人</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>南京理工大学校长来学院视察</td>
<td>2012-01-22</td>
<td>修改 删除</td>
<td>管理员</td>
</tr>
<tr>
<td>2</td>
<td>学院举办学风建设研讨会</td>
<td>2012-02-23</td>
<td>修改 删除</td>
<td>管理员</td>
</tr>
<tr>
<td>3</td>
<td>好消息：乐学网站开通了</td>
<td>2012-03-01</td>
<td>修改 删除</td>
<td>管理员</td>
</tr>
<tr>
<td>4</td>
<td>今天在1205多媒体教室上课</td>
<td>2012-03-13</td>
<td>修改 删除</td>
<td>管理员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>底部框架 bottom
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>bottom</title> </head> <body style="text-align: center;"> <div>版权所有©物联网工程4班，354135463</div> </body> </html>
川公网安备 51010702002669号
18605917465
客服QQ