首页>网页设计教程>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标记做的话可能代码量大，会影响速度。

下面的图片是上面代码运行之后的结果。

相关文章