Página Inicial>Tutorial de web design>Tutorial HTML

Site Gerenciamento de back -end Código e exemplos de design de interface de login

Autor：Eve Cole Data da Última Atualização：2025-08-17 22:00:03

O design da interface de gerenciamento de back -end do site é criar o banco de dados e somente se for feito. Se o banco de dados não tiver sido construído, a peça de conexão será definida para esvaziar primeiro e a função não poderá ser concluída em termos de transposição de página. Hoje, o trabalho foi concluído muito cedo, então escrevi um código e também usei um exemplo da imagem de fundo da página quando estava estudando. Se você precisar definir o local com personalidade, poderá usar o logotipo do seu próprio site para definir seu próprio estilo.

  1. <!
  2. <htmlxmlns = http: //www.w3.org/1999/xhtml>
  3. <head>
  4. <metahttp-equiv = content-typeContent = text/html; charset = gb2312/>
  5. <title> interface de login de back -end </ititle>
  6. <styleType = text/css>
  7. <!-
  8. .trabalhar{
  9. Size da fonte: 32px;
  10. Cor:#ff6600;
  11. Top-top: 180px;
  12. }
  13. corpo{
  14. Background-Color:#336699;
  15. }
  16. corpo{
  17. Background-Color: #ccccff;
  18. Imagem de fundo: URL (imagens/2.jpg);
  19. }
  20. .Style1 {
  21. Size da fonte: 18px;
  22. Peso da fonte: negrito;
  23. }
  24. .forma{
  25. Top-top: 280px;
  26. Right-right: 50px;
  27. preenchimento-esquerda: 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 = direita> Nome de usuário: </div>
  41. </div> </td>
  42. <tdwidth = 183background = imagens/1.jpgbgcolor =#ccffff> <spanclass = style2>
  43. <Boel>
  44. <inputName = nameType = textId = nameMaxLength = 10/>
  45. </belt>
  46. </span> </td>
  47. </tr>
  48. <tr>
  49. <tdHeight = 37Align = CenterValign = Middlebackground = Images/1.jpg> <divalign = Right> <spanclass = style1> senha </span>: </div> </td>
  50. <tdbackground = imagens/1.jpgbgcolor =#ccffff> <spanclass = style2>
  51. <Boel>
  52. <inputName = pwdtype = PasswordId = pwdmaxLength = 20/>
  53. </belt>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = centvalign = middlebackground = imagens/1.jpg> <breting>
  58. <divalign = Center>
  59. <inputType = submitName = submitValue = submeter/
  60. </div>
  61. </belt> </td>
  62. <tdbackground = imagens/1.jpgbgcolor =#ccffff> <spanclass = style2>
  63. <Boel>
  64. </span>
  65. <divalign = centerclass = style2>
  66. <inputName = resetType = resetId = resetValue = reset/>
  67. </div>
  68. <Spanclass = Style2>
  69. </belt>
  70. </span> </td>
  71. </tr>
  72. </tabela>
  73. </morm>
  74. </body>
  75. </html>

Se você é proficiente no CSS+Div no formulário, não use tags de tabela. Se você fizer isso, o código pode ser grande e afetará a velocidade.

A figura abaixo é o resultado após a execução do código acima.

Artigos Relacionados