首页效果图

　　

点击链接一效果图

　　

代码结构

　　

index.jsp

　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>frameset</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <frameset rows="25%,50%,25%" cols="*">

      <frame src="top.jsp"/>

      <frameset rows="*" cols="25%,75%">

          <frame src="left.jsp"/>

          <frame src="right.jsp" name="showframe"/>

      </frameset>

      <frame src="bottom.jsp"/>

  </frameset>

</html>

top.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>top</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      top...

  </body>

</html>

left.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>left</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      <a href="link1.jsp" target="showframe">链接一</a><br/>

      <a href="link2.jsp" target="showframe">链接一</a><br/>

      <a href="link3.jsp" target="showframe">链接一</a>

  </body>

</html>

right.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>right</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      welcome...

  </body>

</html>

bottom.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>bottom</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      bottom...

  </body>

</html>

link1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>link1</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      link1...

  </body>

</html>

link2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>link2</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      link2...

  </body>

</html>

link3.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>link3</title>

    <link href="logo.ico" rel="shortcut icon" type="image/x-icon" />

  </head>

  <body>

      link3...

  </body>

</html>

HTML 导航框架的更多相关文章

  1. ModernUI教程：如何使用你自己的导航框架

         Modern UI for WPF带有一个内置的页面导航框架,易于使用和可扩展的.但这并不是必须的,你也可以自己来自定义一个导航框架.      默认的ModernWindow控件模板包括标 ...

  2. WPF简单导航框架（Window与Page互相调用）

    相当多的WPF程序都有着丰富的页面和功能,如何使程序在不同页面间转换并降低资源占用,选择适合自己的导航框架就很重要了.最近花了一点时间做了一个简单的导航框架,并在这个过程中对Window.Page.U ...

  3. 精品干货丨APP常用导航框架

    文章目的:在整体上把握移动端App的导航框架,理解每种导航所具有的优点.局限性和其所适用的范围. 文章用心:典型APP案例(源码:http://www.jinhusns.com/Products/Do ...

  4. frameset导航框架

    1.制作导航框架(注意"name='mainframe'") <html> <frameset cols="25%,75%"> < ...

  5. 框架中的导航框架 & position定位

    框架中,通过链接将一个页面显示在另一个框架中:   总框架: <frameset cols="15%,*">   <frame src="xx.html ...

  6. WPF中的导航框架（一）——概述

    有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有 ...

  7. HTML导航框架实现

    导航栏界面(html_contents.html) <!DOCTYPE html> <html> <head> <meta charset=” utf-8” ...

  8. [转]WPF中的导航框架

    有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有 ...

  9. HTML 导航框架 （使用 Frame ）

    文章出处  :  http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html  (本文转自此博客) 在浏览网页时,我们经常会看到一个导航条,当点击导航条上 ...

  10. 用 Flutter 搭建标签+导航框架

    前言 在 Flutter 这个分类的第一篇文章总结了下最新的 Mac 搭建 Flutter 开发环境和对声明式UI这个理解的东西,前面也有提过,准备像在 SwiftUI 分类中那样花一些功夫来写一个 ...

随机推荐

  1. POJ 3180 Tarjan

    题意:找强连通中点数大于2的强连通分量个数 思路:Tarjan // By SiriusRen #include <cstdio> #include <algorithm> u ...

  2. jQuery对象与DOM对象的区别

    如何判断一个js对象是否一个DOM对象 我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否D ...

  3. spring mvc 项目 相关配置文件小结

    web.xml文件主要配置如下: 需要加载的配置文件: 类路径下,可以使用通配符配置  类似:classpath:conf/spring/*/*.xml, <context-param> ...

  4. 别让好想法埋没：如何进行APP开发？

    经常和许多创业者讨论,发现很多人想法都不错,但是都不知道该如何实现,今天就如何引导大家走出第一步写一篇文章,很多人通常误会一件事情,认为程序员开发可以一步步把自己的想法拼接出来,我有一个功能点,就让程 ...

  5. iOS原生数据存储策略

    一 @interface NSCache : NSObject Description A mutable collection you use to temporarily store transi ...

  6. CF992E Nastya and King-Shamans_线段树

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 200000 ...

  7. Centos7下安装Mongodb

    Mongodb网盘路径:链接:https://pan.baidu.com/s/1rWJCPZ59EAW25ha1UF5czw 密码:u3zq 1.把安装包上传到linux服务器上,解压,然后我们把mo ...

  8. ajax异步请求获取数据，实现滚动数字的效果。

    BackgroundPositionAnimate.js下载 需要导入的js: <script type="text/javascript" src="js/jqu ...

  9. hive初体验

    --创建表 create table t_order(id int,name string,phone string) row format delimited fields terminated b ...

  10. JavaScript实现html页面转换成图片格式

    本文提供三个JavaScript插件,并提供对应GitHub地址,自行查看使用方法: 1)dom-to-image:dom-to-image 2)html2canvas:html2canvas 3)r ...