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. [bzoj3252]攻略_dfs序_线段树_贪心

    攻略 bzoj-3252 题目大意:给定一棵n个节点的有根树,点有点权.让你选出至多k个节点,使得他们到根的链的并最大. 注释:$1\le n\le 2\cdot 10^5$,$1\le val_i\ ...

  2. Spring Boot实现跨域（转）

    一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类 二 ...

  3. 几点平时不太注意的CSS知识

    1:文本显示的时候,我们发现左右参差不齐,text-align:justify  就能让文本左右都齐刷刷的啦: 2:input标签的内容,处于安全考虑,有时候我们并不希望别人黏贴复制,这时候这样干:& ...

  4. 【转】学习JavaScript闭包

    原文: http://www.cnblogs.com/Lau7/p/7942100.html#undefined ------------------------------------------- ...

  5. IntelliJ IDEA在行尾增加分号

    IntelliJ IDEA在行尾增加分号 Ctrl+Shift+Enter - 本身的含义是自动完成,如果需要的话,会在行尾添加分号:

  6. node-load module

    javscript :脚本建共享全局名称空间(全局污染). node:实现CommonJS(公共)模块标准. Node加载模块,有两种方式: 1.通过名称 除非是核心模块,否则被引用的模块最后都会映射 ...

  7. RHEL6.5上Oracle ACFS与Linux samba一起使用时遇到的bug

    RHEL上的Oracle ACFS与linux samba一起使用时遇到的bug 一.环境介绍: cat /etc/issue的结果为: Red Hat Enterprise Linux Server ...

  8. TensorFlow的安装与CNN测试

    0.说明 在Google开源该框架之后便使用真实K40m卡测试,由于生产环境是CentOS6.6的操作系统,但是该框架需要在Python2.7环境下执行,CentOS6.6下折腾了一天没搞定,后来换成 ...

  9. ps图片怎样实现渐变

    首先我先将一副图片展示给大家: 我所做的效果是想把图片做成渐变.而不改变中间图片的颜色效果. 接下来我来说明一下我的所做思路. 首先将图片中间部分选择出来.然后复制成一个图层. 详细操作是用魔棒进行反 ...

  10. iOS开发——基础篇——get和post请求的区别

    HTTP 定义了与服务器交互的不同方法,最常用的有4种,Get.Post.Put.Delete,如果我换一下顺序就好记了,Put(增),Delete(删),Post(改),Get(查),即增删改查,下 ...