HTML 导航框架

本文转载自查看原文 2016-11-24 21:49 1370 html5、css3、javascript

首页效果图

点击链接一效果图

代码结构

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 ROS导航与定位框架 POSCMS 框架使用导航 7. ROS 导航与定位框架 HTML&CSS----练习隐藏导航栏（三级导航） css+html固定上下导航栏 HTML布局水平导航条1制作 html+css二级导航的实现 HTML5+CSS3 QQ会员页面导航 html5 横向滑动导航栏 HTML/CSS：导航栏水平和垂直