【正文】 完成靜態(tài)頁(yè)面，后期需要和數(shù)據(jù)庫(kù)連接，改成 JSP 動(dòng)態(tài)網(wǎng)頁(yè)，在這里，將網(wǎng)頁(yè)部分分成三個(gè)部分來完成，首先就是 CSS 布局，完成一個(gè)系統(tǒng)頁(yè)面的布局大小，其次就是網(wǎng)頁(yè)的頁(yè)面內(nèi)容的編輯，最后就是網(wǎng)頁(yè)提交表單的驗(yàn)證過程，是用 JAVASCRIPT 來完成表單的驗(yàn)證過程。 通過定義 CSS 樣式表，能讓網(wǎng)頁(yè)具有美觀一致的畫面，可以將網(wǎng)頁(yè)制作的更加絢麗多彩，一個(gè)樣式文件可以用于多個(gè)文件，具有更好的易用性和可擴(kuò) 展性。系統(tǒng)服務(wù)分配頁(yè)面的主要CSS 布局代碼如下： body { margin:0。 padding:0。 width:660px。 height:500px。 fontsize:14px。 } container { width:660px。 height:500px。 } space { width:650px。 height:10px。 } menuTitle { width:650px。 height:30px。 textalign:left。 fontweight:bold。 fontsize:20px。 marginleft:10px。 } tool { width:650px。 height:30px。 textalign:right。 marginleft:10px。 } searchInfo { width:650px。 marginleft:10px。 } 50 searchInfo table { width:100%。 textalign:center。 backgroundcolor:ECEEFA。 } searchInfo table, searchInfo th, searchInfo td, searchInfo tr { border:1px solid 79ABCD。 bordercollapse:collapse。 } searchInfo input { width:120px。 } searchInfo .blue { width:100px。 height:25px。 backgroundcolor:6BC4F6。 } form { margin:0。 display:inline。 } contents { clear:both。 width:650px。 height:330px。 marginleft:10px。 } contents table, contents td, contents tr, contents th { border:none。 } contents table { margintop:10px。 width:650px。 bordercollapse:collapse。 border:1px solid FFF。 } contents th { 51 backgroundcolor:0065CC。 height:30px。 color:FFF。 } contents td { textalign:center。 height:30px。 border:1px solid FFF。 } contents td img { margintop:auto。 marginbottom:auto。 border:none。 } navigation { margintop:10px。 width:647px。 height:30px。 border:1px solid 3875AD。 textalign:right。 color:00C。 paddingtop:10px。 } navigation input { width:25px。 } navigation a:link, navigation a:visited, navigation a:hover { color:00C。 textdecoration:none。 } .lightBlue { backgroundcolor:7EC4F8。 } .gray { backgroundcolor:EEEEF8。 } 在制作頁(yè)面當(dāng)中，可以運(yùn)用一系列的網(wǎng)頁(yè)標(biāo)簽來完成， 服務(wù)分配頁(yè)面的主要內(nèi)容代碼如下： 52 %@ page language=java import=.* pageEncoding=UTF8% %@ taglib uri=/strutstags prefix=s % % String path = ()。 String basePath = ()+://+()+:+erPort()+path+/。 % !DOCTYPE HTML PUBLIC //W3C//DTD HTML Transitional//EN html head base href=%=basePath% title服務(wù)分配 /title link type=text/css rel=stylesheet href=css/ / /head body div id=container div id=space /div div id=menuTitle客戶服務(wù)管理 服務(wù)分配 /div form name=inquireForm method=post action=service_select div id=tool input type=submit id=save value=查詢 / /div div id=searchInfo table cellpadding=0 cellspacing=0 tr td class=blue客戶名稱 /td tdinput type=text name= //td td class=blue概要 /td tdinput type=text name= //td td class=blue服務(wù)類型 /td tdinput type=text name= //td /tr /table /div /form div id=contents table cellspacing=0 cellpadding=0 tr th編號(hào) /th th客戶 /th 53 th概要 /th th服務(wù)類型 /th th創(chuàng)建人 /th th創(chuàng)建日期 /th th分配給 /th th操作 /th /tr s:iterator var=ss value=services status=index s:if test=tr class=gray/s:if s:elsetr class=lightBlue/s:else td id=serviceIds:property value=//td tds:property value=//td tds:property value=//td tds:property value=//td tds:property value=//td tds:date name=%{} format=yyyy年 MM月 dd日 //td tds:select list= listKey=id listValue=name theme=simple id=userId/s:select a href= title=指派 onclick=return toAllot()img alt=指派 src=images/ //a /td td a href=service_delete?=s:property value=/ id=delete title=刪除 onclick=return del()img alt=刪除 src=images/ //a /td /tr /s:iterator /table div id=navigation 共 s:property value=/條記錄 第span id=pageCurrents:property value=//span/s:property value=/頁(yè) s:if test= != 1a href=service_page?currentPage=1首 頁(yè) /a/s:if s:if test= != 1a href=service_page?currentPage=s:property value=/上一頁(yè) /a/s:if s:if test= != a href=service_page?currentPage=s:property value=/下一頁(yè) /a/s:if s:if test= != a 54 href=service_page?currentPage=s:property value=/尾 頁(yè) /a/s:if 轉(zhuǎn)到第 form name=changePage method=post action=service_page input type=text id=changePageNum name=currentPage / input type=submit value=GO / /form /div /div /div /body /html 在完成代碼和系統(tǒng)的過程，完善系統(tǒng)需要進(jìn)行表單的驗(yàn)證，使用 JAVASCRIPT 是一種十分便捷的解決方法，它不但能檢查用戶輸入的無效或錯(cuò)誤數(shù)據(jù)，還能檢查用戶遺漏的必選項(xiàng)，從而減輕服務(wù)器端的壓力， 避免服務(wù)器端的數(shù)據(jù)無法更新而出現(xiàn)新錯(cuò)誤，在系統(tǒng)中的 服務(wù)分配頁(yè)面的主要表單提交驗(yàn)證代碼如下： function del() { if(confirm(你確定要?jiǎng)h除嗎 ?)) { return true。 } return fal