圖書後台管理系統需要不同的頁面來展示不同的功能效果
最後將這些頁面組裝起來,形成完整的後台功能頁面。
這一節我們將創建後台管理系統的頭部頁面
#如圖所示,包含了管理員修改密碼,用戶信息,退出本系統
顯示首頁,頁面前進,後退,刷新,幫助等點擊按鍵
使用<table>標籤,用<tr><td>進行佈局。
在加上各種小圖示。來實現效果。
佈局分為3個<table>段落
第一個為修改密碼,使用者資訊和退出系統
<tr> <td height="57" background="https://img.php.cn/upload/course/000/000/008/58241d480ee8f976.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="378" height="57" background="https://img.php.cn/upload/course/000/000/008/58242a6c7fb76454.jpg"> </td> <td> </td> <td width="281" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="33" height="27"><img src="https://img.php.cn/upload/course/000/000/008/58241db991188465.gif" width="33" height="27" /></td> <td width="248" background="https://img.php.cn/upload/course/000/000/008/58241ecee3d8a379.gif"> <table width="225" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="17"><div align="right"><a href="ly_pwd.php" target="rightFrame"> <img src="https://img.php.cn/upload/course/000/000/008/58241f589c539785.gif" width="69" height="17" border="0" /></a></div> </td> <td><div align="right"><a href="ly_pwd.php" target="rightFrame"> <img src="https://img.php.cn/upload/course/000/000/008/58241f87de0d6838.gif" width="69" height="17" border="0" /></a></div> </td> <td><div align="right"><a href="login.php?tj=out" target="_parent"> <img src="https://img.php.cn/upload/course/000/000/008/58241fa5c3ae2298.gif" alt=" " width="69" height="17" border="0" /> </a></div> </td> </tr> </table></td> </tr> </table> </td> </tr> </table> </td> </tr>
第二部分為首頁,前進,後退,刷新,幫助等點擊按鍵。
<tr> <td height="40" background="https://img.php.cn/upload/course/000/000/008/58241fee34c77371.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="194" height="40" background="https://img.php.cn/upload/course/000/000/008/5824202426789223.gif"> </td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="21"><img src="https://img.php.cn/upload/course/000/000/008/5824204770d92615.gif" width="19" height="14" /></td> <td width="35" class="STYLE7"><div align="center"><a href="ly_right.php" target="rightFrame">首页</a></div></td> <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/5824206c3e017337.gif" width="19" height="14" /></td> <td width="35" class="STYLE7"><div align="center"><a href="javascript:history.go(-1);">后退</a></div></td> <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/5824208561069957.gif" width="19" height="14" /></td> <td width="35" class="STYLE7"><div align="center"><a href="javascript:history.go(1);">前进</a></div></td> <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/582420b4a0ac0424.gif" width="19" height="14" /></td> <td width="35" class="STYLE7"><div align="center"><a href="javascript:window.parent.location.reload();">刷新</a></div></td> <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/582420cfd7041136.gif" width="19" height="14" /></td> <td width="35" class="STYLE7"><div align="center"><a href="ly_right.php" target="rightFrame">帮助</a></div></td> <td> </td> </tr> </table></td> <td width="248" background="https://img.php.cn/upload/course/000/000/008/5824211aae974497.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="16%"><span class="STYLE5"></span></td> <td width="75%"><div align="center"><span class="STYLE7">By(<a href="http://www.php.cn" target="_blank">php.cn</a>)</span></div></td> <td width="9%"> </td> </tr> </table> </td> </tr> </table> </td> </tr>
第三部分為管理選單顯示
<tr> <td height="30" background="https://img.php.cn/upload/course/000/000/008/5824213c382a3310.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="8" height="30"><img src="https://img.php.cn/upload/course/000/000/008/5824215c09227277.gif" width="8" height="30" /></td> <td width="35%" background="https://img.php.cn/upload/course/000/000/008/5824217ae53db193.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="24%"> </td> <td width="53%" height="20" valign="bottom" class="STYLE1">管理菜单</td> <td width="33%"> </td> </tr> </table> </td> <td><img src="https://img.php.cn/upload/course/000/000/008/58242199adc1e244.gif" height="30" /></td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20" valign="bottom"><span class="STYLE1">当前登录用户:admin 用户角色:管理员</span></td> <td valign="bottom" class="STYLE1"><div align="right"></div></td> </tr> </table> </td> <td width="17"><img src="https://img.php.cn/upload/course/000/000/008/582421be84fc5175.gif" width="17" height="30" /></td> </tr> </table></td> </tr>
這樣結合起來我們就完成了後台管理頭部頁面的的前端程式碼。