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. Java日期LocalDate使用

    在做报表统计时,需要对指定时间内的数据做统计,则需要使用到时间日期API 在此使用的是java.util.Date的完美私生子LocalDate类 LocalDate方法介绍 now() : 从默认时 ...

  2. Ubuntu 16.04出现Can't open /etc/rc.d/init.d/functions的问题解决

    /etc/rc.d/init.d/functions是CentOS的位置,Ubuntu对应:/lib/lsb/init-functions 参考: https://unix.stackexchange ...

  3. http://www.cnblogs.com/sprinkle/

    http://www.cnblogs.com/sprinkle/ http://www.cnblogs.com/sprinkle/

  4. HttpURL连接远程serverGet和Post方式请求并返回数据

    查看原文:http://www.ibloger.net/article/1813.html package cn.gis; import java.io.BufferedReader; import ...

  5. Codeforces Beta Round #2 B. The least round way

    这个2B题还好~~ 题目大意: 给出一个矩阵.从左上走到右下,仅仅能往右或下走.路径中每一个格子有一个数.这些数相乘得出一个数. 求这个数末尾零最少的一条路径. 解题思路: 找出一条路径.乘积得数中素 ...

  6. JQuery图例

  7. [计算机故障]toshiba笔记本计算机无法正常启动,每次均需要按ESC

    同事一台toshiba的笔记本计算机,无法正常启动,每次均需要按ESC才可以正常后续动作. 之后系统可以正常工作. 排查过程: 1.尝试恢复bios到默认配置:不行,而且不小心搞了个蓝屏,还好记得是“ ...

  8. neo4j 张一鸣 8

    头条关注 粉丝关系 张一鸣 8

  9. [DevExpress]DevExpress的安装与使用

    一.下载安装文件 依据自己的须要选择不同的版本号.下面为15.1 安装时选择自己须要的模块进行安装,之后进行激活,购买授权或者"其它方式". 二.安装完 在VSIDE工具栏会添加下 ...

  10. c# Java 微信红包算法

    int total_money_cent = 1000; // 红包总金额 单位:分 int total_people = 8; // 抢红包总人数 int[] array = new int[tot ...