zoukankan      html  css  js  c++  java
  • HTML 导航框架

    首页效果图

      

    点击链接一效果图

      

     代码结构

      

    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>
  • 相关阅读:
    移动触摸事件之二
    移动touch事件之一
    Phonegap创建项目语法
    JS自定义去除字符串左右两边的指定字符
    video标签常用属性及说明
    html5开发之viewport使用
    页面事件总结
    缓存与预取
    修改JQM的默认配置属性
    JQM事件详解
  • 原文地址:https://www.cnblogs.com/zhuwenqi2016/p/6099606.html
Copyright © 2011-2022 走看看