HTML导航框架实现
导航栏界面(html_contents.html)
<!DOCTYPE html> <html> <head> <meta charset=” utf-8” > <title>框架列表</title> </head> <body> <ul> <li><a href="frame_a.html" target="showframe">Frame_a</a></li> <li><a href="frame_b.html" target="showframe">Frame_b</a></li> <li><a href="frame_c.html" target="showframe">Frame_c</a></li> </ul> </body> </html>
框架a(frame_a.html)
<!DOCTYPE html> <html> <head> <meta charset=” utf-8” > <title>框架</title> <style type="text/css"> .box{ width:auto; height: 1000px; background-color: brown; margin:0; } </style> </head> <body> <div class="box"> <h1>Frame_A</h1> </div> </body> </html>
框架b(frame_b.html)、框架C(frame_c.html)与之类似。这里省略。
当行页面(导航框架.html):
<!DOCTYPE html> <html> <head> <meta charset=” utf-8” > <title>HTML导航框架</title> </head> <frameset cols="120,*"> <frame src="html_contents.html"> <frame src="frame_a.html" name="showframe"> </frameset> </html>
实现如下: