html導航框架的使用


  框架可以實現在同一瀏覽器窗口,瀏覽不同的頁面。一個頁面的超鏈接一般跳轉到一個新的瀏覽器窗口,而導航框架可以通過超鏈接在同一窗口顯示不同的頁面。接下來展示一下導航鏈接的實現。

  

  實現一個簡易的導航框架,我們需要5個html文件,此處分別命名為:frame_a,frame_b, frame_c,index, content。其中frame_a,frame_b, frame_c只需設定背景顏色。

 以下為其代碼:

1.frame_a.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body bgcolor="antiquewhite">
 8         <h2>Frame a</h2>
 9     </body>
10 </html>

2.frame_b.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body bgcolor="aqua">
 8         <h2>Frame b</h2>
 9     </body>
10 </html>

3.frame_c.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body bgcolor="bisque">
 8         <h2>Frame c</h2>
 9     </body>
10 </html>

4.index

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="{CHARSET}">
 5         <title></title>
 6     </head>
 7     <body bgcolor="gray">
 8         <p><a href="frame_a.html" target="content">Frame_a</a></p>
 9         <p><a href="frame_b.html" target="content">Frame_b</a></p>
10         <p><a href="frame_c.html" target="content">Frame_c</a></p>
11 
12 
13     </body>
14 </html>

5.content.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="{CHARSET}">
 5         <title></title>
 6     </head>
 7     <frameset cols="20%,*">
 8         <frame src="index1.html" />
 9         <frame src="frame_a.html" name="content" />
10     </frameset>
11 </html>

該文件將主界面分為index和content兩部分。index中為index.html文件中三個鏈接,content顯示選中的html文件。

index.html文件中包含frame_a,frame_b, frame_c三個文件的鏈接,且將target屬性設置為content.

 

實現的效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM