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>