Inicio>Tutorial de diseño web>Tutorial HTML

Código de diseño de interfaz de inicio de sesión de gestión de back -end del sitio web Código de diseño y ejemplos

Autor：Eve Cole Fecha de actualización：2025-08-17 22:00:03

El diseño de la interfaz de administración de back -end del sitio web es construir la base de datos y solo si se hace. Si la base de datos no se ha construido, la parte de conexión se establecerá en vacío primero, y la función no se puede completar en términos de transposición de la página. Hoy, el trabajo se completó muy temprano, así que escribí un código, y también usé un ejemplo de la imagen de fondo de la página cuando estaba estudiando. Si necesita establecer el lugar con personalidad, puede usar el logotipo de su propio sitio web para establecer su propio estilo.

  1. <! DOCTYPEHTMLPublic-// w3c // dtdxhtml1.0Transitional // gohttp: //www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd>
  2. <htmlxmlns = http: //www.w3.org/1999/xhtml>
  3. <Evista>
  4. <metahttp-oquiv = content-typeContent = text/html; charset = gb2312/>
  5. <title> Interfaz de inicio de sesión de backend </title>
  6. <styletype = text/css>
  7. <!-
  8. .trabajar{
  9. tamaño de fuente: 32px;
  10. Color:#FF6600;
  11. Top-top: 180px;
  12. }
  13. cuerpo{
  14. Color de fondo:#336699;
  15. }
  16. cuerpo{
  17. Color de fondo: #CCCCFF;
  18. IMAGEN DE BUENGE: URL (imágenes/2.jpg);
  19. }
  20. .Style1 {
  21. tamaño de fuente: 18px;
  22. Font-Weight: Bold;
  23. }
  24. .forma{
  25. Top-top: 280px;
  26. Right de relleno: 50px;
  27. ROLED-LEFUNDA: 600px;
  28. }
  29. .Style2 {color: #ffccff}
  30. ->
  31. </style>
  34. </ablo>
  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> nombre de usuario: </div>
  41. </div> </td>
  42. <tdwidth = 183background = imágenes/1.jpgbgcolor =#ccffff> <spanclass = style2>
  43. <Tabel>
  44. <inputName = nameType = textID = namemaxLength = 10/>
  45. </seleting>
  46. </span> </td>
  47. </tr>
  48. <tr>
  49. <tdheight = 37Align = centerValign = middlebackground = images/1.jpg> <divalign = right> <spanclass = style1> contraseña </span>: </div> </td>
  50. <tdbackground = imágenes/1.jpgbgcolor =#ccffff> <spanclass = style2>
  51. <Tabel>
  52. <inputName = pwdtype = contraseña = pwdmaxLength = 20/>
  53. </seleting>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = centervalign = middlebackground = imágenes/1.jpg> <label>
  58. <Divalign = Center>
  59. <inputType = SubmitName = SubtItValue = Subt/
  60. </div>
  61. </label> </td>
  62. <tdbackground = imágenes/1.jpgbgcolor =#ccffff> <spanclass = style2>
  63. <Tabel>
  64. </span>
  65. <divalign = centerClass = style2>
  66. <inputName = resettype = resetID = resetValue = reset/>
  67. </div>
  68. <spanclass = style2>
  69. </seleting>
  70. </span> </td>
  71. </tr>
  72. </table>
  73. </form>
  74. </body>
  75. </html>

Si es competente en CSS+DIV en el formulario, no use etiquetas de tabla. Si lo hace, el código puede ser grande y afectará la velocidad.

La imagen a continuación es el resultado después de que se ejecuta el código de arriba.

Artículos relacionados