frame简单使⽤
frame,是⽹页开发必须掌握的知识。例如后台架构、局部刷新,页⾯分割,都是frame的⽤途表现,尤其是后台页⾯制作,使⽤frame会给⽤户带来⾮常舒适的使⽤感受。frame知识点包括(frameset标签、frame标签、iframe标签)。下⾯就对其⼀⼀介绍。
⼀、frameset
1. 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜⾊。
③frameborder
设置是否显⽰框架边框。设定值只有0、1;0 表⽰不要边框,1 表⽰要显⽰边框。
④cols
纵向分割页⾯。其数值表⽰⽅法有三种:“30%、30(或者30px)、*”;数值的个数代表分成的视窗数⽬且数值之间⽤“,”隔开。“30%”表⽰该框架区域占全部浏览器页⾯区域的30%;“30”表⽰该区域横向宽度为30像素;“*”表⽰该区域占⽤余下页⾯空间。例如:cols="25%,200,*" 表⽰将页⾯分为三部分,左⾯部分占页⾯30%,中间横向宽度为200像素,页⾯余下的作为右⾯部分。
⑤rows
横向分割页⾯。数值表⽰⽅法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空⽩距离。
2. ⽤例
<frameset cols="213,*" frameborder="no" border="0" framespacing="0">
注意1:
cols与rows两属性尽量不要同在⼀个<frameset>标签中使⽤。若要实现下图架构,代码正确写法为:
<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.jsp" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
<frameset cols="213,*" frameborder="no" border="0" framespacing="0">
<frame src="left.jsp" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
<frame src="main.jsp" name="mainFrame" id="mainFrame"/>
【即,若想即使⽤cols⼜使⽤rows,可利⽤frameset嵌套实现】
注意2:
<frameset cols="40%,*,*">
意思是:第⼀个框架占整个浏览器窗⼝的40%,剩下的空间平均分配给另外两个框架。
<frameset cols="*,*,*,*">
意思是:浏览器窗⼝等分为四部分。margin属性怎么用
⼆、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显⽰的⽹页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显⽰滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜⾊。
⑤frameborder
设置是否显⽰框架边框。设定值只有0、1;0 表⽰不要边框,1 表⽰要显⽰边框。
⑥noresize
设置框架⼤⼩是否能⼿动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的⾼度。
⑨width
设置框架宽度。
⑩height
设置框架⾼度。
2. ⽤例
<frame src="top.jsp" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />
三、iframe
是浮动的框架(frame),其常⽤属性与frame类似,其他的主要有以下(相同的就不列举了)
1. 属性
①align
设置垂直或⽔平对齐⽅式
②allowTransparency
设置或获取对象是否可为透明。
2. ⽤例
<iframe name="123" align="middle" marginwidth="0" marginheight=0 src="*.jsp" frameborder="0" scrolling="no" width="776" height="2500"></iframe>
注意:
iframe标签与frameset、frame标签的验证⽅法不同,是 XHTML 1.0 Transitional。且iframe是放在body标签之内,⽽frameset、frame是放在body标签之外。
四、综合⽰例
<html>
<head>
<title>综合⽰例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>对不起,您的浏览器不⽀持“框架”!</p>
</body>
</noframes>
</frameset>
</html>
【说明】
<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间,⽤来在那些不⽀持框架的浏览器中显⽰⽂本或图像信息。在此标志对之间先紧跟<body> </body>标志对,然后才可以使⽤我们熟悉的任何标志。
最后需要说明⼀点:
如果将代码按照我以上所写写到VS中报错的话,例如:
或者
解决⽅法如下:
⼯具→选项→⽂本编辑器→HTML→验证→Internet Explorer 6.0
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论