关闭

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

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

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

创建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

关闭

网站设计和布局的重要性和过程

网站的设计是吸引客户的非常重要的因素。如今,互联网上存在着很多竞争,每个人都可以点击其客户,但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

CSS 网格实现瀑布流

瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每个项目列表呈堆栈形式排列,最为关键的是,堆栈之间彼此之间没有多余的间距差存大

布局和WEB性能

在初始页面加载问题之外,“布局颠簸”是我在动态Web应用程序中看到的最常见的性能问题。 对于单页应用程序尤其如此,它可以动态构建和销毁视图

css实现保持div的等宽高比

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

rem布局和vw布局的理解

rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。css3中引入了一个新的单位vw,与视图窗口有关,vw表示相对于视图窗口的宽度,除了vw,还有vmin和vmax两个相关的单位。

Flexbox响应式网页布局

透过Flexbox实现响应式网页布局同样可分为三步:将容器显示为flex,并让它wrap;将需要响应的元素放在容器当中,并用百分比设定每一个元素的basis;通过Media Query将容器的flex方向改为column(预设为row)。

JQuery实现的固定位置下拉隐藏上拉显示悬浮导航菜单

JQuery实现:1、页面打开时,导航栏悬浮的页面上部 2、页面向下拉的时候导航栏隐藏 3、页面向上拉的时候导航栏出现。

html页面body与div之间产生空白解决方法

在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!css初始化,解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

css vertical-align对齐规则

只能应用于内联元素以及 display 值为 table-cell 的元素。vertical-align 属性只能作用在 display 计算值为 inline、inline- block,inline-table 或 table-cell 的元素上。

点击更多...

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