jsp的include頁面指令實現網站統一風格(靜態)導航（或標題欄）

時間 2019-12-08

標籤 jsp include 頁面指令實現網站統一風格靜態導航標題欄欄目 JSP 简体版

原文原文鏈接

上次用jQuery實現的網站統一風格導航（或標題欄），必須在頁面中加入一個<div>容器（用來盛放導航欄頁面），再加上jQuery代碼，代碼比較囉嗦。css

這回用jsp的include頁面指令（directive）來實現。html

首先也要有導航欄頁面：java

<!-- 首先要設計一個導航頁：-->

    <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樣式引用代碼也放到導航欄頁面中。jsp

注意導航欄頁面不該該包含<html><body><head>部分。由於當導航欄頁面被包含在正常頁面中時，整個頁面會出現「兩套」<html><body><head>，這是錯誤的。可是去除多餘的標籤後，導航欄頁面就不能做爲單獨的頁面使用了（只能嵌入宿主頁面，做爲頁面的一部分使用）。網站

樣式代碼：spa

/* 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行，很是簡潔。code

另外使用jsp標準動做include也能夠實現一樣的效果，即把<%@ include file="navbar.html" %>換成<jsp: include page="navbar.html" />。可是include頁面指令是在頁面轉換成servlet代碼時插入的內容。而jsp標準動做則是在運行時獲取的response響應（把響應結果填充到結果頁面中），能夠實現包含動態內容。缺點是會帶來一些額外的開銷，因此若是隻是包含統一的靜態內容，仍是建議使用include頁面指令。htm

JSTL的<c:import>標籤也能夠實現<jsp:include>一樣的效果，並且它還能夠導入本容器外的內容。servlet

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