PHP开发简单图书后台管理系统top页面

图书后台管理系统需要不同的页面来展示不同的功能效果

最后将这些页面组装起来,形成完整的后台功能页面。

这一节我们将创建后台管理系统的头部页面

41.png

如图所示,包含了管理员修改密码,用户信息,退出本系统

显示首页,页面前进,后退,刷新,帮助等点击按键

使用<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">&nbsp;</td>
        <td>&nbsp;</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">&nbsp;</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>&nbsp;</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%">&nbsp;</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>

这样结合起来我们就完成了后台管理头部页面的的前端代码。


继续学习
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP图书管理系统</title> <style type="text/css"> <!-- .STYLE1 { font-size: 12px; color: #000000; } .STYLE5 {font-size: 12px;} .STYLE7 {font-size: 12px; color: #FFFFFF; } .STYLE7 a{font-size: 12px; color: #FFFFFF; } a img { border:none; } --> </style></head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <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="147" 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="43%" height="20" valign="bottom" class="STYLE1">管理菜单</td> <td width="33%"> </td> </tr> </table> </td> <td width="39"><img src="https://img.php.cn/upload/course/000/000/008/58242199adc1e244.gif" width="39" 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> </table> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

PHP开发之简单图书后台管理系统教程