Beranda>Tutorial Desain Web>tutorial HTML

Situs Web Backend Manajemen Login Kode Desain Antarmuka dan Contoh

Penulis：Eve Cole Waktu Pembaruan：2025-08-17 22:00:03

Desain Antarmuka Manajemen Backend Situs Web adalah untuk membangun database dan hanya jika dilakukan. Jika database belum dibangun, bagian koneksi akan diatur untuk mengosongkan terlebih dahulu, dan fungsi tidak dapat diselesaikan dalam hal transposisi halaman. Hari ini, pekerjaan selesai sangat awal, jadi saya menulis kode sendiri, dan saya juga menggunakan contoh gambar latar belakang halaman ketika saya belajar. Jika Anda perlu mengatur tempat dengan kepribadian, Anda dapat menggunakan logo situs web Anda sendiri untuk mengatur gaya Anda sendiri.

  1. <! Doctypehtmlpublic-// w3c // dtdxhtml1.0transitional // expleptp: //www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
  2. <htmlxmlns = http: //www.w3.org/1999/xhtml>
  3. <head>
  4. <METAHTTP-EQUIV = Content-TypeContent = Teks/html; charset = GB2312/>
  5. <iteme> Backend Login Interface </iteme>
  6. <styletype = text/css>
  7. <!-
  8. .bekerja{
  9. font-size: 32px;
  10. Warna:#FF6600;
  11. Padding-top: 180px;
  12. }
  13. tubuh{
  14. Latar Belakang-Color:#336699;
  15. }
  16. tubuh{
  17. Latar Belakang-Color: #CCCCFF;
  18. latar belakang-gambar: url (gambar/2.jpg);
  19. }
  20. .Style1 {
  21. font-size: 18px;
  22. font-weight: tebal;
  23. }
  24. .membentuk{
  25. Padding-Top: 280px;
  26. Padding-Right: 50px;
  27. Padding-left: 600px;
  28. }
  29. .Style2 {color: #ffccff}
  30. ->
  31. </tyle>
  34. </head>
  35. <body>
  36. <FormMethod = postaction = class = Form>
  37. <TableWidth = 280Border = 0Align = Center>
  38. <tr>
  39. <tdwidth = 87align = centervAntign = middlebackground = gambar/1.jpg> <divalign = rightclass = style1>
  40. <Divalign = Right> Nama Pengguna: </div>
  41. </div> </td>
  42. <tdwidth = 183background = gambar/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 = centervAntign = middlebackground = gambar/1.jpg> <divalign = right> <spanclass = style1> kata sandi </span>: </div> </td>
  50. <tdbackground = gambar/1.jpgbgcolor =#ccffff> <spanclass = style2>
  51. <label>
  52. <inputName = pwdtype = kata sandi = pwdmaxlength = 20/>
  53. </label>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = centervAntign = middlebackground = gambar/1.jpg> <label>
  58. <Divalign = Center>
  59. <inputType = submitName = SubMitValue = Kirim/ Kirim
  60. </div>
  61. </label> </td>
  62. <tdbackground = gambar/1.jpgbgcolor =#ccffff> <spanclass = style2>
  63. <label>
  64. </span>
  65. <divalign = centerclass = style2>
  66. <inputName = resetype = resetid = resetValue = reset/>
  67. </div>
  68. <spanclass = style2>
  69. </label>
  70. </span> </td>
  71. </tr>
  72. </boable>
  73. </form>
  74. </body>
  75. </html>

Jika Anda mahir dalam CSS+Div dalam formulir, jangan gunakan tag tabel. Jika Anda melakukannya, kode mungkin besar dan itu akan mempengaruhi kecepatan.

Gambar di bawah ini adalah hasilnya setelah kode di atas dijalankan.

Artikel Terkait