jsp中通用模版的引用 include的用法（2）

look_w

静态引入的示例


通过对两种用法的了解之后  我们现在 使用静态引入

因为上述原因  我的模版页中 只有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;
    }