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. JSP的Cookie处理

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/Cookies-handling.html: Cookies是存储在客户端计算机的文本文件,保存各种跟踪目 ...

  2. [Spring] Properties for project configuration

    We might have some project specific configuration need to setup. The good approach to do this in Spr ...

  3. formData 对象

    (1)创建的formData打印为空? var edition=$("#edinum").val();//版本号 var uploader=$("#upman" ...

  4. Sublime Text 2 编辑器实用技巧大全

    http://blog.163.com/lgh_2002/blog/static/440175262012429146486/

  5. 使用带粒子效果的 CAEmitterLayer

    1.用CAEmitterLayer产生粒子效果 2.封装CAEmitterLayer 3.封装下雪.下雨的粒子效果控件 一.用CAEmitterLayer产生粒子效果 - (void)emitterL ...

  6. ShadowDOM

    HTML5 ShadowDOM & CustomElements KeKeMars 关注 2015.12.09 15:20* 字数 1239 阅读 1626评论 2喜欢 2 Web组件由四部分 ...

  7. android菜鸟之路-事件分发机制总结(二)

    ViewGroup事件分发机制 自己定义一个LinearLayout,ImageView和Button,小二,上代码 <LinearLayout xmlns:android="http ...

  8. python开发【第1篇】【基础知识】

    1.python解释执行原理 python代码——字节码——机器码——计算机 每次运行都要进行转换成字节码,然后再有虚拟机把字节码转换成机器语言,最后才能在硬件上运行. 2.python编码 unic ...

  9. [译]IOS中AutoLayout布局与Transform的冲突问题

    http://m.blog.csdn.net/blog/a345017062/43565279 原文链接见这里: http://stackoverflow.com/questions/12943107 ...

  10. java Bean及其使用

    1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...