lesson -10 框架

lesson -10 框架

简介

将浏览器分隔成多个小窗口，每个小窗口可以显示不同的网页。（类似手机的分屏和一些论坛邮箱等，邮箱就是典型的厂字型结构，可以实现不同页面的任意切换。）

基本结构

基本语法

框架主要分为框架和框架集两部分，分别用frame和frameset标记。

框架使用时没有body。，不能放在body里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset>
		<frame />
		<frame />
	</frameset>
</html>

框架的设置

包括：

  • 水平分割（rows）
  • 垂直分割(cols)
  • 嵌套分割

水平分割

基本语法：

<frameset rows="高度1,高度2,...,*">
   	 <frame src="url"> 
	<frame src="url">
   		...
</frameset>

例：

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="100,200,*">
		<frame />
		<frame />
		<frame />
	</frameset>
</html>

效果图：

mark

注：rows的数值设置可以有两种方式

  1. 数值方式
  2. 百分比方式

垂直分割

基本语法：

<frameset cols="宽度1,宽度2,...,*">
   	 <frame src="url"> 
	<frame src="url">
   		...
</frameset>

所有用法和水平分割相同。

嵌套分割

利用框架的嵌套可以实现网页的布局，例如常见的厂字型结构。

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%,*">
		<frame />
		<frameset cols="50%,*">
			<frame />
			<frame />
		</frameset>
	</frameset>
</html>

效果图：

mark

窗口的边框

frameset里可利用border来控制边框。

就是控制框架集中的分割线粗细，写在哪个frameset中控制哪条分割线。

基本语法：

<frameset border="">

源码：

<frameset rows="30%,*" >
		<frame />
		<frameset cols="50%,*" border="2">
			<frame />
			<frame />
		</frameset>
	</frameset>

效果图：

mark

子窗口的设置

指定子窗口显示网页

基本语法：

<frame src="url">

例：

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%,*" >
		<frame  src="https://www.sogou.com/"/>
		<frameset cols="50%,*" border="2">
			<frame src="https://www.baidu.com/"/>
			<frame src="https://www.360.com/"/>
		</frameset>
	</frameset>
</html>

效果：

mark

注：这里的frame的url可以指向任何资源，图片，文本，音频，视频等。

空中子窗口的滚动条

scrolling来控制串口是否设置滚动条。

基本语法：

<frame scrolling="yes|no|auto">

例：

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%,*" >
		<frame  src="https://www.sogou.com/" scrolling="on"/>
		<frameset cols="50%,*" border="2" >
			<frame src="test-2.html" / scrolling="yes">
			<frame src="https://www.baidu.com/" scrolling="auto"/>
			
		</frameset>
	</frameset>
</html>

效果图

mark

调整窗口的大小

默认为分割后可以自由控制窗口大小，在frame标记内设置noresize后便可将其固定。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%,*" >
		<frame  src="https://www.sogou.com/" scrolling="no"/>
		<frameset cols="50%,*" border="2" >
			<frame src="selfpic.jpg"/ scrolling="yes" noresize="noresize">
			<frame src="https://www.baidu.com/" scrolling="auto"/>
			
		</frameset>
	</frameset>
</html>

效果图：

mark

注：上面代码中noresize写在了嵌套的框架集中的一个frame中，所以此时他的两个边框都不能移动，若只写成下面这样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%,*" >
		<frame  src="https://www.sogou.com/" scrolling="no" noresize="noresize"/>
		<frameset cols="50%,*" border="2" >
			<frame src="selfpic.jpg"/ scrolling="yes" >
			<frame src="https://www.baidu.com/" scrolling="auto"/>
			
		</frameset>
	</frameset>
</html>
注意这次noresize的位置。

mark

重点：如何在框架中实现在一个子窗口点击链接，在另一个窗口显示页面。

大概可以分为两步

  1. 在要显示链接的子窗口的frame中通过name=“设置的名称”打一个锚点
  2. 在需要点击的链接处a标记内加上target="设置的名称"

实战练习：

main文件源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="300,*" border="2">
		<frame src="https://www.baidu.com" />
		<frameset cols="500,*">
			<frame  src="111/test2.html" />
			<frame  name="hello" />
		</frameset>
	</frameset>
</html>

其中test2.html 源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com" target="hello"> 点我跳转百度</a>
	</body>
</html>

此时界面：

mark

点击后：

mark

浮动框架

小窗口浮动在大窗口上。

基本语法：

<iframe src="url">
    
</iframe>

说明：iframe可以写在body中。

主要作用：跨域传值。（在不同网站之间进行传输数据）

主要属性：

mark

练习：

源码：

<iframe src="https://www.baidu.com" width="300px" height="200px" scrolling="auto"></iframe>

mark

posted @ 2020-11-10 11:38  wind-zhou  Views(187)  Comments(0)  Edit  收藏  举报