frameset标签设计页面
重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使用!!!
1、frameset 元素可定义一个框架集,它被用来组织多个窗口(框架)。每个框架存有独立的文档。配合<frame></frame>框架的使用,我们可以对页面进行分割,局部刷新。合理的使用会给用户带来非常好的体验效果。
2、frameset 的几个属性:
①、cols:定义框架集中列的数目和尺寸。垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个视窗画面的 50% 宽度为一相对分割。你可自己调整数字。
②、rows:定义框架集中行的数目和尺寸。这是横向切割,将画面上下分开,数值设定同上。 COLS 与 ROWS 两参数尽量不要放在同一个 标记中,因 Netacape 偶然不能显示这类型的框架,尽量采用多重分割。
③、frameborder:设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。
④、border:设定框架的边框厚度。
⑤、bordercolor:设定框架的边框颜色。
⑥、framespacing:表示框架与框架间保留的空白的距离。
3、frame 标签的属性:
①、name:设定框架名称。此为必须设置的属性。
②、src:设定此框架要显示的网页名称或路径。此为必须设置的属性。
③、scrolling:设定是否要显示滚动条。设定值为auto, yes, no。
④、bordercolor:设定框架的边框颜色。
⑤、frameborder:设定是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
⑥、noresize:设定框架大小是否能手动调节。
⑦、marginwidth:设定框架边界和其中内容之间的宽度。
⑧、marginhight:设定框架边界和其中内容之间的高度。
⑨、width:设定框架宽度。
⑩、height:设定框架高度。
4、frameset使用实例:
如果要实现下面的效果
页面分为三部分,顶部,左边和右边。其中点击左边的超链接,右边的框架页面会相应变化。
整体页面:main.html
1 <frameset rows="11%,*" border="1px" framespacing="0"> 2 <frame src="top.html" name="top" frameborder="0" /> 3 <frameset cols="12%,*" framespacing="0" framespacing="0"> 4 <frame src="left.html" name="left" scrolling="auto"/> 5 <frame src="right.html" name="right" scrolling="auto"/> 6 </frameset> 7 </frameset>
top.html,right.html就是一个空页面,left.html如下:
1 <!-- 左边菜单栏显示--> 2 <div > 3 <ul > 4 <li ><a href="taskCreate.html" target="right" id="taskCreat">任务创建</a></li> 5 <li ><a href="taskManage.html" target="right">任务管理</a></li> 6 <li ><a href="#" target="right" >数据集管理</a></li> 7 <li ><a href="#" target="right" >模型管理</a></li> 8 </ul> 9 </div>
页面的分层显示,主要就是 frameset 标签中对于 cols 和 rows 的使用,在配合 frame 标签的嵌套。而想要达到点击左边的菜单栏,右边的frame 相应发生变化,那必须要认识属性
target:规定在何处打开链接文档。浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。即 main.html 中,<frame name="target值">,这里的 name 属性值为多少,那么 left.html 中,<a target="name值"> 这里要相等。
5、如何在子页面中获取父页面所在的frameset中的其它的frame中的元素?
即如何在 right.html 中获取 left.html中<a></a>标签的属性值等等
$(parent.parent.mainFrame.document).contents().find("body").html(); //manFrame指的是你想要查看的那个frame的id
比如上面的 left.html页面中,任务创建的 ID 为 taskCreat,那么我们可以这样获取:并改变它的 class 属性。
$(parent.parent.left.document).contents().find("#taskCreat").attr("class","list-group-item");
6、frameset 的优缺点
我们知道,目前的 HTML5 标准已经不支持 frameset 了,虽然使用它重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,加快了网页下载速度)。但是它也有很多缺点,比如浏览器的后退按钮是没用的;会产生很多页面,不易管理;代码复杂,不易被搜索引擎搜索;小型移动设备显示不全;多框架的页面会增加服务器 http 请求等等。所以对于 frameset 的使用我们需要慎重,而且现阶段的 DIV+CSS 用来实现这个功能也是可以的。
转载于:https://www.cnblogs.com/ysocean/p/6531424.html
frameset标签设计页面相关推荐
- html frameset 属性,html frameset标签怎么用?html frameset标签属性详解
html frameset标签怎么用?html frameset标签属性详解,本篇文章主要讲述了html frameset标签的定义和用法,还有html frameset标签两个属性的用途(附实例) ...
- frameset标签
文献种类:专题技术文献: <frameset>标签 开发工具与关键技术:VS/HTML 作者:吴泽锋 撰写时间:2019年6月28日 6.<frameset>标签:frames ...
- 《PHP求职宝典》--Web设计页面笔记
偶然间在图书馆看见这本书,名字很吸引人,果然不错,许多细节以前没在意,但是确实值得注意一下.先分享一下Web设计页面的内容.可能对比较独到的程序员来说比较弱智,不过只针对可以对那些有帮助的程序猿而言分 ...
- UI设计中标签设计总结
在UI设计中,标签的特征跟生活中的标签也很相似,用以标注内容分类或内容要点,方便用户快速定位自己需要的内容目标.标签还有满足用户的隐形需求的作用,当用户在犹豫是否要进行下一步操作的时候,标签在一定程度 ...
- html5实现frame效果,html5 frameset标签的替代方案是什么
摘要 腾兴网为您分享:html5 frameset标签的替代方案是什么,优酷,校讯通,小米手环,我的世界等软件知识,以及亚马逊手机端,帮5淘,安全一点通,安信证券软件,微信骰子表情包gif,兄弟706 ...
- html5 frameset替,html5frameset标签的替代方案是什么?frameset标签替代的解决办法
本篇文章主要的介绍了关于html5 frameset标签的替代方案实例解析,还有关于html5 frameset标签的两个解决办法,现在让我们一起来看这篇文章吧 首先我们先看看html5 frames ...
- HTML标签及页面布局
目录 HTML标签分类 页面布局及文字设计 标题 布局常用标签 文字样式设置 文字字形标签 HTML标签分类 单标签 例:<br> 双标签 例:<h1>字号&l ...
- 分类、标签设计及查询优化
文章目录 问题 分类和标签的设计 知名开源系统的设计 jive论坛 Solo博客系统的设计 wordpress的数据库设计 参考链接 问题 在很多业务系统中,都有对对象的分类和标签设计.在数据库层面如 ...
- Winform中在使用Dock属性设计页面布局控件的顺序导致页面效果不同的问题
场景 在Winform中进行页面设计时,常使用控件的Dock属性来进行布局调整.但是由于设置属性的顺序问题,导致达不到想要的效果. 比如以下两个控件 下面的控件设置的Dock属性是Bottom,即在页 ...
最新文章
- 工厂模式 android,当Android遇见工厂模式
- 盘点2020中国IT上市企业100强,贵司上榜了吗?
- 为窗体添加防机器人的验证机制
- 文档自动排序长短_css 文档流
- python保存文件,如果目录不存在,则创建
- matlab 的字符类型转换,数据类型转换
- MATLAB Simulink
- MathWorks 中国
- Django-2- 模板路径查找,模板变量,模板过滤器,静态文件引用
- linux python指向python3_linux下切换python2和python3(转)
- Elasticsearch SQL插件
- 加速爬虫:异步加载asyncio
- 编译OpenJDK8:configure: could not find or use freetype at location
- python dash html.table_阅读 Python dash 代码的时候有个问题, 那个包的调用有问题?
- smart原则_一百天目标达成:SMART原则
- linux清除所有后台程序,Linux查看和关闭后台运行程序的方法
- kindle paperwhite 使用说明
- 二十一世纪大学英语读写教程(第四册)学习笔记(原文)——2 - The Gratitude We Need(我们所需要的感激)
- (BN)批量归一化全面解析
- java代理模式之静态代理
- Python命名方式转换——帕斯卡、驼峰法、下划线
- 服务器在线监控,EasyNmon
热门文章
- eclipse 安装egit插件
- 【Android】7.5 RelativeLayout(相对布局)
- 我的Java开发学习之旅------求字符串中出现次数最多的字符串以及出现的次数...
- [转] Asp.net mvc 3 beta 新特性介绍
- 请教一个ghost恢复的问题
- Visual C#中用WMI控制远程计算机
- 编译在arm版本的Valgrind-转
- 蓝桥杯 ADV-130 算法提高 色盲的民主
- [Java] 蓝桥杯ADV-102 算法提高 单词个数统计
- [Python] L1-008. 求整数段和-PAT团体程序设计天梯赛GPLT