首页效果图

　　

点击链接一效果图

　　

代码结构

　　

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. eclipse搭建android开发环境

    1.首先安装JDK 此步骤是做JAVA必经之路,不多累述,强调要注意的地方: 目前为止android的开发环境只支持JDK1.7,千万不要下载JDK1.8. 下载的JDK一定要选择好操作系统,特别是要 ...

  2. Spark Streaming概念学习系列之Spark Streaming的竞争对手

    不多说,直接上干货! Spark Streaming的竞争对手 Storm 在Storm中,先要设计一个用于实时计算的图状结构,我们称之为拓扑(topology).这个拓扑将会被提交给集群,由集群中的 ...

  3. python2 与 python3 语法区别--转

    原文地址:http://old.sebug.net/paper/books/dive-into-python3/porting-code-to-python-3-with-2to3.html 使用2t ...

  4. PHP学习过程中遇到的疑难杂症

    变量当双引号中包含变量时,变量会与双引号中的内容连接在一起:当单引号中包含变量时,变量会被当做字符串输出. Heredoc结构形式首先使用定界符表示字符串(<<<),接着在“< ...

  5. Core Animation 负责将bitmap绑定提交到 GPU-[CALayer _display]

    Core Animation 负责将bitmap绑定提交到 GPU: Core Animation一头连着CPU,一头连着GPU. ZSTest`-[ZSDTCoreTextCell drawRect ...

  6. centos7最小化安装图形界面

    1.安装X Window System命令 yum groupinstall "X Window System" 选择y直接安装就可以了 2.安装图形界面软件 GNOME yum ...

  7. JS[获取两个日期中所有的月份]

    //------[获取两个日期中所有的月份中] function getMonthBetween(start,end){ var result = []; var s = start.split(&q ...

  8. NOIP2018提高组省一冲奖班模测训练（三）

    NOIP2018提高组省一冲奖班模测训练(三) 自己按照noip的方式考,只在最后一两分钟交了一次 第一题过了,对拍拍到尾. 第二题不会.考试时往组合计数的方向想,推公式,推了一个多小时,大脑爆炸,还 ...

  9. STM32 SPI 发送第一个数据不成功问题

    STM32的标准库,跟HAL库都是很实用的, 在使用SPI库的过程中一定要注意时序的问题. 我在调试SPI过程中,调试了两个IC,都是用HAL库, 第一个IC没出问题,第二个IC出现了第一次发送数据不 ...

  10. linux 上安装 redis

    一.安装gcc Redis是c语言开发的. 安装 redis 需要 c 语言的编译环境.如果没有 gcc 需要在线安装. yum install gcc-c++ 二.下载 redis 链接:https ...