HTML框架

1,什么时框架

  框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果

2,<frameset>划分框架标记

  a,语法格式<frameset>...</frameset>

  b,属性

    1,cols使用“像素数”和%分割左右窗口,“*”表示剩余部分

    如果使用“*”,“*”表示框架平均分成2个

    如果使用“*”,“*”,“*”表示框架平均分成3个

    2,rows使用“像素数”和%分割上下窗口,“*”表示剩余部分

    3,frameborder 指定是否显示边框,0不显示,1显示

    4,border 设置边框的大小,默认值5像素

  c,<frame>子窗口标记

    <frame>标记是一个单标记,该标记必须放在<frameset>中使用,在<frameset>中设置了几个窗口,就必须对应使用几个<frame>框架,而且还必须使用src属性指定一个网页

    属性:

    1,src 加载网页文件的URL地址

    2,name 框架名称,是链接标记的target所要参数

    3,noresize 表示不能调整框架大小,没有设置时就可以调整

    4,scrolling  是否需要滚动条 auto根据需要自动出现 yes 有  no 无

    5,frameborder 是否需要边框   值   1,显示边框  2,不显示边框

 

 

eg:

day10.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML框架</title>
</head>
<frameset rows="90,*,90" frameborder="1" border="1">
<frame name="top" src="top.html"/>
<frameset cols="20%,80%">
<frame name="left" src="left.html">
<frame name="right" src="right.html">

</frameset>
<frame name="bottom" src="botton.html"/>

</frameset >
<body>

</body>
</html>

top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML框架</title>
</head>
<body bgcolor="green">
<center><h1>
网页的顶部
</h1></center>
</body>
</html>

right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML框架</title>
</head>
<body>
<table>
<tr>
<td>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="120" height="90">
</td>
<td>
<p>
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
</p>
</td>

</tr>
<tr>
<td>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="120" height="90">
</td>
<td>
<p>
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
</p>
</td>

</tr>
<tr>
<td>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="120" height="90">
</td>
<td>
<p>
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
</p>
</td>

</tr>
<tr>
<td>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="120" height="90">
</td>
<td>
<p>
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
</p>
</td>

</tr>
<tr>
<td>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="120" height="90">
</td>
<td>
<p>
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
觉得是浪费了看到斯洛伐克绝世独立克己复礼开始的就离开房间里都是克己复礼的时间
</p>
</td>

</tr>
</table>
</body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML框架</title>
</head>
<body>
<ul>
<li><a href="day10.html" target="_blank">首页</a></li><br/>
<li><a href="day10.html" target="_blank">新闻</a></li><br/>
<li><a href="day10.html" target="_blank">咨询</a></li><br/>
<li><a href="day10.html" target="_blank">图片</a></li><br/>
<li><a href="day10.html" target="_blank">联系我们</a></li><br/>
</ul>
</body>
</html>

botton.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML框架</title>
</head>
<body bgcolor="green">
<center><p><font color="red">
网页的底部
</font></p></center>
</body>
</html>
posted @ 2017-11-12 15:25  pylzp  阅读(293)  评论(0编辑  收藏  举报