关闭

html使用frame框架导航跳转至指定的节的用法

时间: 2019-01-24阅读: 1233标签: 布局

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

创建3个html,分别为 index.html ,content.html,link.html.


index.html的代码如下: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>使用框架导航跳转至指定的节</title>
    </head>
    <frameset cols="180,*">
        <frame src="使用框架导航跳转至指定的节_content.html"/>
        <frame src="使用框架导航跳转至指定的节_link.html" name="showframe"/>
    <!--    <noframes></noframes>-->
    </frameset>
</html>

index.html主要时frame的框架结构,左侧为导航框架,右侧为链接框架。


content.html的代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用框架导航跳转至指定的节</title>
    </head>
    <body>
        <a href="使用框架导航跳转至指定的节_link.html" target="showframe">页首</a>
            <br>
            <a href="使用框架导航跳转至指定的节_link.html#C1" target="showframe">第1章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C2" target="showframe">第2章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C3" target="showframe">第3章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C4" target="showframe">第4章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C5" target="showframe">第5章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C6" target="showframe">第6章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C7" target="showframe">第7章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C8" target="showframe">第8章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C9" target="showframe">第9章</a>
            <br><a href="使用框架导航跳转至指定的节_link.html#C10" target="showframe">第10章</a>
    </body>
</html>

这是跳转的设定,其中target指向内容需要设置相同。


link.html的代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<h1><a name="C1">Chapter 1</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C2">Chapter 2</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C3">Chapter 3</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C4">Chapter 4</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C5">Chapter 5</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C6">Chapter 6</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C7">Chapter 7</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C8">Chapter 8</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C9">Chapter 9</a></h1>
<p>This chapter explains ba bla bla</p>
<h1><a name="C10">Chapter 10</a></h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 11</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 12</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 13</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 14</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 15</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 16</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 17</h1>
<p>This chapter explains ba bla bla</p>
    </body>
</html>

为跳转的具体内容。


以下为效果截图:



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1878

关闭

纯CSS完美实现垂直水平居中的6种方式

由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不太完整

关于display:flex碰上white-space nowrap 影响布局的问题

背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响

移动WEB开发-响应式布局

响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

移动端导航布局

写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!

前端必懂之Sticky Footer(粘性页脚)

Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移

CSS三种布局模型是什么?

在网页中,元素有三种布局模型:流动模型(Flow) 默认的、浮动模型 (Float)、层模型(Layer)。下面我们来看一下这三种布局模型。

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

网站首页设计常见的6种布局方式

看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法

css实现保持div的等宽高比

css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。这里以 4:3 为例,通过2种方式来实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!