frame 应用

 

4.html

<body>
<div >
  <span style="display:inline-block; vertical-align:top; width:10%; height:100%;">
    <ul style="list-style-type:none; text-align:right; line-height:2em;">
      <li><a href="5.html#chapter1" target="iframe">chapter1</a></li>      //target在name为'iframe'中显示, href链接5.html的<a>标签n                                                                             ame为chapter1的下一行
      <li><a href="5.html#chapter2" target="iframe">chapter2</a></li>
      <li><a href="5.html#chapter3" target="iframe">chapter3</a></li>
    </ul>
  </span>
  <span style="display:inline-block; width:89%; height:600px;">
    <iframe src="5.html" name="iframe"  width="100%" height="100%"/>    //src显示5.html页面内容
  </span>
</div>
</body>

5.html

<body>
<div>
<a name="chapter1"></a>    //<a>标签的name为chapter1
  <h1>chapter_1</h1>
  <hr />
  <p>...</p>
  <a name="chapter2"></a>
  <h1>chapter_2</h1>
  <hr />
  <p>...</p>
  <a name="chapter3"></a>
  <h1>chapter_3</h1>
  <hr />
  <p>...</p>
</div>
</body>

 

posted @ 2016-09-04 11:05  乱世_独自美  阅读(119)  评论(0)    收藏  举报