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. Servlet开发(2)

    Jsp&Servlet用户登录功能实现(采用MVC模式) 我们使用Jsp&Servlet开发一个用户登录功能的小项目(麻雀大小,但是五脏俱全呦,关键是技术问题!). 数据库:mysql ...

  2. Codeforces Educational Round 21

    A =w= B qwq C wvw D(multiset) 题意: 有n(n<=1e5)个数,希望通过把一个位置y的数字放到位置x上这个操作,使得新序列的某个前缀和等于总和的一半,问这样的操作是 ...

  3. 百度UEditor富文本上传图片

    项目中使用UEditor发现设置图片自定义保存路径会出现<请求后台配置项http错误,上传功能将不能正常使用!错误> /* 上传图片配置项 */ "imageActionName ...

  4. Struts2.3动态调用报 No result defined for action 错误

    struts 2.3.16  採用动态调用发现不工作报404 not found,网上查找原因: 1.由于:struts2中默认不同意使用DMI 所以:须要在配置文件里打开: <constant ...

  5. HDU 5371 Manacher

    点击打开链接 题意:给定一串数字.求最长的一段连续的数字,将它平均分为三段.满足第一段和第二段是回文的.第一段和第三段相等 思路:第一段和第二段是回文的.那么第二段和第三段也是回文的,将数列进行Man ...

  6. 【Record】ART：Android RunTime

    资料来自url=9xdxrhR45Uj3p450JQvTUO-dmzcWswNmABVgYAaFS0AXYDi8Q2JOzvu7y33GIOAI_8Lz7JmLrl0x6DoRW8e5oa" ...

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

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

  8. 9种样式CSS3 渐变button集

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  9. Session管理之ThreadLocal

    ref=toolbar" target="_blank">ref=toolbar_logo" target="_blank"> ...

  10. 2016/1/17 笔记 1,面向对象编程OOP 2,类 全

    面向对象编程OOP 编程方式的发展 1,面向过程 重用性低 维护工作量大  2,面向对象 重用性高 维护容易 概念 1,对象 Object 一个具体的事物 是类的实例      2,类Class 同一 ...