1、静态引入的示例

　　通过对两种用法的了解之后  我们现在 使用静态引入

　　因为上述原因  我的模版页中 只有div  不会有 path等定义  也不会有html标签 如下:

　　我的header.jsp 全部内容如下:

<div id="banner">

   <img src="img/logo.jpg"></img>

  <img src="img/contactTitle.png"></img><img src="img/contactContent.gif" /> 

  </div>

<table width="910" border="0" cellspacing="0" cellpadding="0">

<tr>

  <td width="92" class="nav" ><a href="#">HOME</a></td>

    <td width="111" class="nav">Hair De Vera</td>

    <td width="128" class="nav">About us</td>

    <td width="135" class="nav">Contact Us</td>

    <td  width="350"><div style="position:relative;" class="search_back"><div id="123">

    <div class="bar">

        <div>Search:

            <input  type="text" />

            <input type="image" src="img/dyimage.png" style="border-width:0px;" />

        </div>

    </div>

   </div>

    </div>

</td>

  </tr>

</table>

　　header中用到的样式 我们也独立出来 这样在引用页面 同时引用即可

　　新建已经header.css

#banner {

width: 100%;

left: 0;

right: 0;

top: 0;

height: 100px;

}

.nav{

 background:#0E0D0D;

width:92px;

 text-align: center;

 white-space:nowrap;

color:#ffffff;

cursor:pointer;

line-height:37px;

}

.nav a {

        display:block; /* 把行内元素 变成 块级元素 */

        width:92px; /* 盒子 宽度 */

        height:37px; /* 盒子 高度 */

        text-decoration: none;

        vertical-align: middle;

    }

 .nav    a:link {color: #ffffff}		/* 未访问的链接 */

 .nav  a:visited {color: #ffffff}	/* 已访问的链接 */

  .nav  a:hover {color: #CC00FF}

.nav:hover{

	background:#ffffff;

	color:#CC00FF;

}

div.bar { /* styles for horizontal top bar */

	height: 37px;

	font-size: 110%;

	color:#ffffff;

	 text-align: center;

}

div.bar div {

	padding:  7px 20px 3px 20px;

}

a.bar {

    text-decoration: none;

}

a.bar:hover {

    text-decoration: underline;

}

.search_back { background:#0E0D0D; height:37px;}

input {

vertical-align: middle;

}

　　

如果使用到js的话 也独立新建 这里就不记录了

我依次建了 header.jsp    left.jsp footer.jsp三个模版 以及它们各自的css和用到的js

然后开始 在index.jsp中引用如下(完整index.jsp页面代码参考最后的ps):

 <body>

   <div class="center">

 <%@ include file="header.jsp"%>

 <%@ include file="left.jsp"%>

 <%@ include file="footer.jsp"%>

		</div>

  </body

　　同时引用 模版用到的css js

<link rel="stylesheet" type="text/css" href="css/header.css"/>

	<link rel="stylesheet" type="text/css" href="css/footer.css"/>

		<link rel="stylesheet" type="text/css" href="css/left.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/left.js"></script>

　　

web开发----jsp中通用模版的引用 include的用法的更多相关文章

  1. Java Web开发——JSP基本语法杂记

    在一个JSP页面中,可以包括指令标识.HTML代码.JavaScript代码.嵌入的Java代码.注释和JSP动作标识等内容.但是这些并不是JSP页面所必须的. 1 指令标识指令标识主要用于设定整个J ...

  2. web开发技术中Servlet技术的概述

    1.servlet是什么:servlet是一个位于服务器端的java应用程序它可以像jsp一样,直接输出信息 servlet类必须继承HttpServlet类,否则,不能称为serlvet servl ...

  3. tornado中通用模版

    第一: 1.Pycharm新建python项目(不是django项目),在项目下面直接新建server.py,内容如下: 2.安装tornado, pip install tornado import ...

  4. 玩转Web之Jsp（一)-----jsp中的静态包含（<%@include file="url"%>）与动态包含（<jsp:include>）

    在jsp中include有两种形式,其中<%@include file="url"%>是指令元素,<jsp:include page="" f ...

  5. 【JSP中引入文件】JSP中获取根路径+引用js文件

    在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: inde ...

  6. Java Web开发Tomcat中三种部署项目的方法

    第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ...

  7. Web开发HTTP中URI和URL的情感纠葛

    作者:郭无心链接:https://www.zhihu.com/question/21950864/answer/66779836来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. python web开发-flask中response,cookies,session对象使用详解

    Response响应对象: 当一个web请求被服务器处理完后,会返回用户请求的响应,这时候就要用到响应对象,根据响应给用户的形式不同,响应对象有以下几种处理方式 如果返回的是一个合法的响应对象,它会从 ...

  9. 公众号开发 jsp中<a>问题

    在开发微信公众号时,使用了jQuery mobile这个框架,但是在jsp页面中使用<a>发现点击跳转不成功,这就很奇怪了,网上搜索发现大家基本上用js来代替<a>跳转功能: ...

随机推荐

  1. Access restriction: The type 'JPEGImageWriter' is not API

    报错: Access restriction: The type 'JPEGImageWriter' is not API due to restriction on required library ...

  2. session问题总既然（深入理解）&Token问题理解&sso单点登陆理解实现

    一.Session使http协议成为有状态协议(浏览器cookie本地这个session,服务器端也有这个session) 1.ajax前端登陆无法保存session,造成无法维持登陆状态(http本 ...

  3. springMVC多数据源使用 跨库跨连接

    原文:http://blog.itpub.net/9399028/viewspace-2106641/ http://blog.csdn.net/a973893384/article/details/ ...

  4. Delphi 2007 的重构功能

    Move 移动 1.将选定的静态函数从一个类移动到另一个类 2.将选中的类或接口移动到其他单元 Extract Interface 抽取接口 将选定的函数抽取到一个新的接口中 Extract Supe ...

  5. web开发常见性能优化方式

    经常使用的高并发. 高性能web,数据库server.  1.html 静态化 : 如新闻频道更新的非常快,都是通过cms静态生成(门户,信息公布类型的站点,交互性高的如猫扑的大杂烩也是静态化,实时静 ...

  6. android账号与同步之账号管理

    在android提供的sdk中,samples文件夹下有一个叫SampleSyncAdapter的演示样例,它是一个账号与同步的实例,比方Google原始的android手机能够使用Google账号进 ...

  7. HDU 1796 How many integers can you find（容斥原理+二进制/DFS）

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  8. 高速清空linux下文本文件内容

    1.[root@desktop huage]# : > filename :是一个占位符.不会产生不论什么输入   2.[root@desktop huage]# > filename 相 ...

  9. MYSQL入库常用PHP函数

    addslashes   addslashes() 函数在指定的预定义字符前添加反斜杠.这些字符是单引号(').双引号(").反斜线(\)与NUL(NULL字符).   stripslash ...

  10. 【bzoj1149】 [CTSC2007]风玲Mobiles

    题目意为:给一颗二叉树,每一次操作可以交换该子树的左右两颗子树,要将该树变为完全二叉树,求最小操作次数.从根开始进行一遍DFS.记录每棵子树的大小size,如果左子树的size小于右子树的size那么 ...