今天来写点不一样的。如下图：

实现的效果就是原生的类似于导航形式的frameset.

frameset

注意： 包含frameset的网页应该只是作为框架而存在，所以不能有body标签。

这个标签可以在任何一个浏览器上展现出来。一般来说我们会使用这个标签做成上图的样子。这样方便给用户一个更好的用户体验。

要想使用这个标签我们需要掌握下面的一点小知识。那就是如何分配整个网页。

  • cols ： 纵向分配页面，可以是相对的百分比形式（逗号分隔列与列即可）也可以是绝对的像素大小
  • rows ：横向分配页面，其他的和cols一样
  • name : 被分割的页面的代称。
  • src : 被分割的小页面将会显示出的html文件的路径名称

frame

frame标签作为frameset的子标签而存在，多个frame分割了整个网页

frame在frameset中的name属性的值将会被其他的超链接所引用。

这一点很重要，待会可以在一个小例子中看到。

  • noresize=”noresize” ： 加上了这个属性的frame的大小就不能被调整了。

实战布局

我的思路如下：

  • 框架：main.html
  • 导航页，出现在框架的左侧： list.html
  • 导航页中使用到的网页文本： one.html,two.html,three.html

代码

main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分帧测试实例</title>
</head>
<div align="center">
    <div style="width:30%">
        <frameset cols = "20%,*">
            <frame name = "frame1" src = "list.html" noresize="noresize">
            <frame name = "frame2" src = "one.html" >
        </frameset>
    </div>
</div>
</html>

list.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航主页</title>
</head>
<body>
<ul>
    <li><a href="one.html" target="frame2">One.html</a></li>
    <li><a href="two.html" target="frame2">Two.html</a></li>
    <li><a href="three.html" target="frame2">Three.html</a></li>
</ul>
</body>
</html>

one.html/two.html/three.html 由于页面相似，这里仅仅列出第二个吧。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Two Html</title>
</head>
<body bgcolor = "silver">
<span> 这里是 Two.html页面</span><br><hr>
    <img src="http://imglf0.ph.126.net/9kjQJp3Q5GoxmXDYmAI_Dg==/6631693387815785343.jpg">
</body>
</html>

结果展示

以及下面

总结

frameset与frame的配合使用在XX管理系统这种目标性强的业务场合比较常用，这里仅仅是展示了最简单的场景，我们在实际的开发中会使用JavaScript来实现交互性更强的页面，以及配合各种CSS渲染来实现各种高大上的页面效果。

希望这篇文章能给对此有迷惑的你一点启发。

frameset 与frame 设置的技巧的更多相关文章

  1. html中的框架frameset和frame及iframe

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面. 每个页面称之为一个框架.并且每个框架独立 ...

  2. 尼康D5100使用设置及技巧，同样也适用尼康D5200

    尼康D5100使用设置及技巧,同样也适用尼康D5200,希望对新手能有点帮助. 一.设置 1．优化校准:可以在menu菜单中找到它,一般使用"标准"就可以,建议将"标准& ...

  3. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  4. 网卡最大传输单位MTU和巨型帧(Jumbo frame)设置

    1. 背景:在1998年,Alteon Networks 公司提出把Data Link Layer最大能传输的数据从1500 bytes 增加到9000 bytes,这个提议虽然没有得到IEEE 80 ...

  5. Java基础 awt Frame 设置窗体的大小 位置 可见性

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  6. MathType颜色设置的技巧

    MathType功能非常强大,在编辑公式时使用非常方便.运用MathType不仅可以改变公式的字体和字号,也可以改变公式字体颜色,MathType颜色设置还是有一套技术的,下面我们就一起来看看公式编辑 ...

  7. HTML 框架 frameset，frame

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面.每份HTML文档称为一个框架,并且每个框架都独立于其他的框架 框架结构标签(<frameset>) 框架结构标签(<fram ...

  8. frameset、frame、noframes和iframe的区别

    原网站地址:http://nmyun.blog.51cto.com/448726/155268 ■ 框架概念 :所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <frameset ...

  9. 对frameset、frame、iframe的js操作

    框架编程概述一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一 ...

随机推荐

  1. Mysql之数据类型(胖胖老师)

    like语句与通配符insert into teacher_1 values('胖胖', '男', 18),('小明', '男', 19),('张三', '男', 30),('李四', '男', 27 ...

  2. [UVa 1326]Jurassic Remains

    题解 在一个字符串中,每个字符出现的次数本身是无关紧要的,重要的只是这些次数的奇偶性,因此想到用一个二进制的位表示一个字母($1$表示出现奇数次,$0$表示出现偶数次).比如样例的$6$个数,写成二进 ...

  3. hdu 5727 二分图+环排列

    Necklace Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  4. bzoj3126[Usaco2013 Open]Photo 单调队列优化dp

    3126: [Usaco2013 Open]Photo Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 374  Solved: 188[Submit] ...

  5. 笔记7 AOP练习<有疑问>

    场景描述: 核心业务:举行一场古典音乐会. 周边功能:观众入场,关闭手机.落座,觉得音乐好听时鼓掌,觉都不好听则退票.(切面) 1.编写切点(切点用于准确定位应该在什么地方应用切面的通 知)----即 ...

  6. C#+HtmlAgilityPack+Dapper走一波爬虫

    最近因为公司业务需要,又有机会撸winform了,这次的需求是因为公司有项目申报的这块业务,项目申报前期需要关注政府发布的相关动态信息,政府部门网站过多,人工需要一个一个网站去浏览和查阅,有时候还会遗 ...

  7. 记一次sql优化——left join不走索引问题

    sql一执行就卡住,然后就...杀进程了 看了一下表的大小 第一反应就是加索引,然后explain看了一下走什么索引了,结果很尴尬,三个表,只走了一个索引...一群人在那纠结为毛走不了索引. 无意间发 ...

  8. dfsdf

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  9. 使用VMware Converter Standalone Client进行虚拟机 P2V提示 权限不足，无法连接\\ip\admin$的解决方法集锦

    使用VMware vCenter Converter Standalone Client进行虚拟机 P2V提示 权限不足,无法连接\\ip\admin$的解决方法集锦 步骤一 检查 远程桌面到&quo ...

  10. Mysql--七种 Join 查询

    Mysql 系列文章主页 =============== 1 准备数据 1.1 建立 Employee 表 DROP TABLE IF EXISTS employee; CREATE TABLE IF ...