Home>Web design tutorial>HTML tutorial

Website backend management login interface design code and examples

Author：Eve Cole Update Time：2025-08-17 22:00:03

The design of the website backend management interface is to build the database and only if it is done. If the database has not been built, the connection part will be set to empty first, and the function cannot be completed in terms of page transposition. Today, the work was completed very early, so I wrote a code myself, and I also used an example of the page background image when I was studying. If you need to set the place with personality, you can use the logo of your own website to set your own style.

  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>Backend login interface</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>Username:</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>Password</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=submit/
  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=reset/>
  67. </div>
  68. <spanclass=STYLE2>
  69. </label>
  70. </span></td>
  71. </tr>
  72. </table>
  73. </form>
  74. </body>
  75. </html>

If you are proficient in CSS+DIV in the form, don’t use table tags. If you do it, the code may be large and it will affect the speed.

The picture below is the result after the above code is run.

Related Articles