首頁>網頁設計教程>HTML教程

網站後台管理登陸界面設計代碼及實例

作者：Eve Cole 更新時間：2025-08-17 22:00:03

網站後台管理界面的設計是要在數據庫建好只好才能進行、、如果數據庫還沒建好的話，那連接部分先設置為空，頁面轉置方面也不能完成功能。今天工作完成得很早，就自己寫了個代碼，還有頁面背景圖片用了學習時候的一個例子，如果自己需要設置地有個性，可用自己網站的logo設置自己的風格

  1. <!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
  2. <htmlxmlns=http://www.w3.org/1999/xhtml>
  3. <head>
  4. <metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/>
  5. <title>後台登陸界面</title>
  6. <styletype=text/css>
  7. <!--
  8. .work{
  9. font-size:32px;
  10. color:#FF6600;
  11. padding-top:180px;
  12. }
  13. body{
  14. background-color:#336699;
  15. }
  16. body{
  17. background-color:#CCCCFF;
  18. background-image:url(images/2.jpg);
  19. }
  20. .STYLE1{
  21. font-size:18px;
  22. font-weight:bold;
  23. }
  24. .form{
  25. padding-top:280px;
  26. padding-right:50px;
  27. padding-left:600px;
  28. }
  29. .STYLE2{color:#FFCCFF}
  30. -->
  31. </style>
  34. </head>
  35. <body>
  36. <formmethod=postaction=class=form>
  37. <tablewidth=280border=0align=center>
  38. <tr>
  39. <tdwidth=87align=centervalign=middlebackground=images/1.jpg><divalign=rightclass=STYLE1>
  40. <divalign=right>用戶名：</div>
  41. </div></td>
  42. <tdwidth=183background=images/1.jpgbgcolor=#CCFFFF><spanclass=STYLE2>
  43. <label>
  44. <inputname=nametype=textid=namemaxlength=10/>
  45. </label>
  46. </span></td>
  47. </tr>
  48. <tr>
  49. <tdheight=37align=centervalign=middlebackground=images/1.jpg><divalign=right><spanclass=STYLE1>密碼</span>：</div></td>
  50. <tdbackground=images/1.jpgbgcolor=#CCFFFF><spanclass=STYLE2>
  51. <label>
  52. <inputname=pwdtype=passwordid=pwdmaxlength=20/>
  53. </label>
  54. </span></td>
  55. </tr>
  56. <tr>
  57. <tdalign=centervalign=middlebackground=images/1.jpg><label>
  58. <divalign=center>
  59. <inputtype=submitname=Submitvalue=提交/>
  60. </div>
  61. </label></td>
  62. <tdbackground=images/1.jpgbgcolor=#CCFFFF><spanclass=STYLE2>
  63. <label>
  64. </span>
  65. <divalign=centerclass=STYLE2>
  66. <inputname=resettype=resetid=resetvalue=重置/>
  67. </div>
  68. <spanclass=STYLE2>
  69. </label>
  70. </span></td>
  71. </tr>
  72. </table>
  73. </form>
  74. </body>
  75. </html>

表單部分如果CSS+DIV熟練的話那就不要用table標記，table標記做的話可能代碼量大，會影響速度。

下面的圖片是上面代碼運行之後的結果。

相關文章