29-HTML-10-HTML(框架)



【框架标签】<frameset>
注:框架标签【不可以】放到<body>,一般为了代码的可读性,会【放在】<head>和<body>之间。






============================================================================================================
【需求】做一个如下页面框架


|-------------------------------------------|
|                                                         |
|                                                         |
|-------------------------------------------|
|                            |                            |
|                            |                            |
|                            |                            |
|                            |                            |
|                            |                            |
|                            |                            |
|-------------------------------------------|




【代码】
1.top.html代码(在页面上方显示)


<html>
<h1>我的网站Logo</h1>
</html>






2.left.html代码(在页面左下方显示)


<html>
<h3>左边栏链接</h3>
<a href="1.html" target="right">链接一</a>
<a href="2.html" target="right">链接二</a>
<a href="3.html" target="right">链接三</a>
</html>






3.right.html代码(在页面右下方显示)


<html>
<h2>右边栏显示</h2>
</html>






4.demo.html(主代码)


<frameset rows="10%,*">
<frame src="top.html" name="top" />
<frameset cols="30%,*">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</frameset>


【代码解释】


(1)demo.html中第一行表示上面一栏占10%,*表示下面占剩余部分(详见需求图示);


(2)demo.html中第二行表示在页面上面栏显示网页top.html并给这一栏命名为top;


(3)demo.html中第三行表示在剩余90%基础上,左右分割,左边栏占30%,*表示右边栏占剩余部分;


(4)demo.html中第四行和第五行,分别在页面左边栏和右边栏显示网页left.html和right.html,并分别命名left和right;
(命名的目的是便于其余栏将单击链接后跳出的内容显示在该栏)


(5)left.html代码意思是,在左边栏创建三个超链接,分别链接到1.html,2.html,3.html这三个网页,target="right"表示
将单击超链接后跳出的内容显示在右边栏。
(所以应该事先准备好1.html,2.html.3.html这三个网页)


【程序效果】
打开demo.html网页,页面被分为和需求一样的三部分,上边栏显示“我的网站Logo”,左边栏有三个超链接,点击任一个都可以将
内容显示在右边栏。







































































  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值