关闭

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

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

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

创建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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

css Grid布局

Gird布局是什么?Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局

rem布局和vw布局的理解

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

CSS 高级布局技巧

随着 IE8 逐渐退出舞台,很多高级的 CSS 特性都已被浏览器原生支持,再不学下就要过时了。

css怎么让文字竖着排列?

css可以使用css样式writing-mode:tb-rl来设置文字竖着排列。writing-mode属性设置或检索对象的内容块固有的书写方向。

height百分比失效_解决css中height:100%失效的问题

为了让网页内容更好的适应各类屏幕尺寸,一般都需要用到height:100%。但是会发现,height百分比失效并没有生效,这是什么原因造成的呢,以及我们需要如何解决呢?

css3 弹性盒布局的使用-Flex

css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器

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

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

flex弹性布局

以下是弹性布局的一些知识点,很简单,易懂!元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都失效,定位属性是有效的!接下来就是弹性布局的核心:弹性布局的属性。

实现两端对齐布局_text-align:justify

但是当里面的i个数太多,就会换行,就导致换行的那几个个i就会在新的一行左右对齐分布,解决的方法是在最后一个i后面补上几个i,这个个数加上换行的i的个数要等于第一行i的个数,见代码

点击更多...

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