PHP開發簡單圖書後台管理系統top頁面

圖書後台管理系統需要不同的頁面來展示不同的功能效果

最後將這些頁面組裝起來，形成完整的後台功能頁面。

這一節我們將創建後台管理系統的頭部頁面

#如圖所示，包含了管理員修改密碼，用戶信息，退出本系統

顯示首頁，頁面前進，後退，刷新，幫助等點擊按鍵

使用<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>

這樣結合起來我們就完成了後台管理頭部頁面的的前端程式碼。