html实例教程:[9]html分屏

2025-09-26 01:56:57

1、<frameset>标签用来定义如何分割窗口。其中,参数rows,cols分别用来规定行和列所占的百分比

html实例教程:[9]html分屏

2、我们首先创建两个网页:

3、创建a.html,记事本编辑输入:

<html>

<body bgcolor="red">

<h1>这是网页a</h1>

</body>

</html>

html实例教程:[9]html分屏

4、创建b.html,记事本编辑输入:

<html>

<body bgcolor="blue">

<h1>这是网页b</h1>

</body>

</html>

html实例教程:[9]html分屏

5、老规矩,在demo.html中输入:

<html>

<frameset cols = "50%,50%">  

<frame  src = "a.html" >  

<frame  src = "b.html">  

</frameset>  

</html>

注意:没有<body>标签

html实例教程:[9]html分屏

6、在浏览器中打开,可以看到以下效果

html实例教程:[9]html分屏

7、如果将demo.html中的cols改为rows,则效果变成了下图

html实例教程:[9]html分屏

8、也可以组合起来使用,下面是一个小例子:

<html>

<frameset rows ="25%,70%">  

<frame src = "a.html">

<frameset cols="25%,75%"> 

<frame src = "b.html"> 

<frame src = "c.html">

</frameset>  

</frameset>  

</html>

html实例教程:[9]html分屏

9、在浏览器中打开,可以看到以下效果,是不是很棒?

html实例教程:[9]html分屏

10、也可以将框架内的网页换成在线网址:

<html>

<frameset cols="50%,50%"> 

<frame src = "http://www.baidu.com/"> 

<frame src = "http://jingyan.baidu.com/">

</html>

html实例教程:[9]html分屏

11、浏览器打开

html实例教程:[9]html分屏

12、更好玩了吧!

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢