PHP開發(fā)簡(jiǎn)單圖書后臺(tái)管理系統(tǒng)top頁(yè)面
圖書后臺(tái)管理系統(tǒng)需要不同的頁(yè)面來展示不同的功能效果
最后將這些頁(yè)面組裝起來,形成完整的后臺(tái)功能頁(yè)面。
這一節(jié)我們將創(chuàng)建后臺(tái)管理系統(tǒng)的頭部頁(yè)面
如圖所示,包含了管理員修改密碼,用戶信息,退出本系統(tǒng)
顯示首頁(yè),頁(yè)面前進(jìn),后退,刷新,幫助等點(diǎn)擊按鍵
使用<table>標(biāo)簽,用<tr><td>進(jìn)行布局。
在加上各種小圖標(biāo)。來實(shí)現(xiàn)效果。
布局分為3個(gè)<table>段落
第一個(gè)為修改密碼,用戶信息和退出系統(tǒng)
<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>
第二部分為首頁(yè),前進(jìn),后退,刷新,幫助等點(diǎn)擊按鍵。
<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">首頁(yè)</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);">前進(jìn)</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://m.miracleart.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">當(dāng)前登錄用戶: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>
這樣結(jié)合起來我們就完成了后臺(tái)管理頭部頁(yè)面的的前端代碼。