jsp的include页面指令实现网站统一风格(静态)导航（或标题栏）

最新推荐文章于 2024-09-14 18:46:05 发布

weixin_34112181

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量2.1k

点赞数

文章标签： java javascript python ViewUI

原文链接：https://my.oschina.net/u/344631/blog/1517409

版权

2019独角兽企业重金招聘Python工程师标准>>>

上次用jQuery实现的网站统一风格导航（或标题栏），必须在页面中加入一个<div>容器（用来盛放导航栏页面），再加上jQuery代码，代码比较啰嗦。

这回用jsp的include页面指令（directive）来实现。

首先也要有导航栏页面：


    <!-- 首先要设计一个导航页：-->

    <link rel="stylesheet" href="css/site.css">

    <div id="top" class="menu">
        <ul>
            <li><a href="./main.html" title="Home Page">Main</a></li>
            <li><a href="./link1.html" title="Link1">Link 1</a></li>
        </ul>
    </div>

这次把css样式引用代码也放到导航栏页面中。

注意导航栏页面不应该包含<html><body><head>部分。因为当导航栏页面被包含在正常页面中时，整个页面会出现“两套”<html><body><head>，这是错误的。但是去除多余的标签后，导航栏页面就不能作为单独的页面使用了（只能嵌入宿主页面，作为页面的一部分使用）。

样式代码：

/* ul li以横排显示 */

/* 所有class为menu的div中的ul样式 */

div.menu ul
{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
    float:left; /* 向左漂移，将竖排变为横排 */
}
/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71; /* 背景色 */
    border: 1px #4e667d solid; /* 边框 */
    color: #dde4ec; /* 文字颜色 */
    display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
    line-height: 1.35em; /* 行高 */
    padding: 4px 20px; /* 内部填充的距离 */
    text-decoration: none; /* 不显示超链接下划线 */
    white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
div.menu ul li a:hover
{
    background-color: #bfcbd6; /* 背景色 */
    color: #465c71; /* 文字颜色 */
    text-decoration: none; /* 不显示超链接下划线 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a:active
{
    background-color: #465c71; /* 背景色 */
    color: #cfdbe6; /* 文字颜色 */
    text-decoration: none; /* 不显示超链接下划线 */
}

引用页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Index.jsp</title>
  </head>
  <body>
  <header>
    <%@ include file="navbar.html" %>
  </header>
  </body>
</html>

用jsp的include页面指令，引用页面起作用的代码只有1行，非常简洁。

另外使用jsp标准动作include也可以实现同样的效果，即把<%@ include file="navbar.html" %>换成<jsp: include page="navbar.html" />。但是include页面指令是在页面转换成servlet代码时插入的内容。而jsp标准动作则是在运行时获取的response响应（把响应结果填充到结果页面中），可以实现包含动态内容。缺点是会带来一些额外的开销，所以如果只是包含统一的静态内容，还是建议使用include页面指令。

JSTL的<c:import>标签也可以实现<jsp:include>同样的效果，而且它还可以导入本容器外的内容。

参考《Head first Servlet & JSP 2nd》(2008) P403

转载于:https://my.oschina.net/u/344631/blog/1517409