Startseite>Webdesign-Tutorial>HTML-Tutorial

Website Backend Management Login Interface Design Code und Beispiele

Autor：Eve Cole Aktualisierungszeit：2025-08-17 22:00:03

Das Design der Website -Backend -Management -Schnittstelle besteht darin, die Datenbank und nur dann zu erstellen, wenn sie fertig ist. Wenn die Datenbank nicht erstellt wurde, wird der Verbindungsteil zuerst auf leer gesetzt, und die Funktion kann nicht in Bezug auf die Seitenübertragung ausgeführt werden. Heute wurde die Arbeit sehr früh abgeschlossen, also habe ich selbst einen Code geschrieben und auch ein Beispiel für das Seiten -Hintergrundbild verwendet, als ich studierte. Wenn Sie den Ort mit Persönlichkeit festlegen müssen, können Sie das Logo Ihrer eigenen Website verwenden, um Ihren eigenen Stil festzulegen.

  1. <! DocTypehtmlPublic-// W3C // dtdxhtml1.0transitional // ushttp: //www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
  2. <htmlxmlns = http: //www.w3.org/1999/xhtml>
  3. <kopf>
  4. <metahttp-äquiv = content-typecontent = text/html; charSet = gb2312/>
  5. <title> Backend Login Interface </title>
  6. <styLetype = text/css>
  7. <!-
  8. .arbeiten{
  9. Schriftgröße: 32px;
  10. Farbe:#ff6600;
  11. Padding-Top: 180px;
  12. }
  13. Körper{
  14. Hintergrundfarbe:#336699;
  15. }
  16. Körper{
  17. Hintergrundfarbe: #ccccff;
  18. Hintergrundbild: URL (Bilder/2.JPG);
  19. }
  20. .Style1 {
  21. Schriftgröße: 18px;
  22. Schriftgewicht: fett;
  23. }
  24. .bilden{
  25. Padding-Top: 280px;
  26. Padding-Right: 50px;
  27. Padding-Links: 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 = Bilder/1.JPG> <divalign = rightClass = style1>
  40. <Divalign = rechts> Benutzername: </div>
  41. </div> </td>
  42. <tdwidth = 183background = Bilder/1.JPGBGColor =#CCFFFF> <spancklass = style2>
  43. <Label>
  44. <inputName = nametype = textId = namemaxLength = 10/>
  45. </label>
  46. </span> </td>
  47. </tr>
  48. <tr>
  49. <tdHeight = 37Align = Centervalign = MiddleBackground = Bilder/1.JPG> <divalign = rechts> <spancklass = style1> password </span>: </div> </td>
  50. <tdbackground = Bilder/1.JPGBGColor =#CCFFFF> <spancklass = style2>
  51. <Label>
  52. <inputName = pwdType = passwordId = pwdmaxLength = 20/>
  53. </label>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = Centervalign = MiddleBackground = Bilder/1.JPG> <Label>
  58. <Divalign = center>
  59. <inputType = subjekt
  60. </div>
  61. </label> </td>
  62. <tdbackground = Bilder/1.JPGBGColor =#CCFFFF> <spancklass = 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>

Wenn Sie CSS+DIV im Formular beherrschen, verwenden Sie keine Tabellen -Tags. Wenn Sie dies tun, ist der Code möglicherweise groß und wirkt sich auf die Geschwindigkeit aus.

Das Bild unten ist das Ergebnis, nachdem der obige Code ausgeführt wurde.

Ähnliche Artikel