หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

เว็บไซต์และตัวอย่างการออกแบบอินเตอร์เฟสการเข้าสู่ระบบการจัดการแบ็กเอนด์

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-08-17 22:00:03

การออกแบบส่วนต่อประสานการจัดการแบ็กเอนด์ของเว็บไซต์คือการสร้างฐานข้อมูลและเฉพาะในกรณีที่เสร็จสิ้น หากฐานข้อมูลไม่ได้ถูกสร้างขึ้นส่วนการเชื่อมต่อจะถูกตั้งค่าให้ว่างเปล่าก่อนและฟังก์ชั่นไม่สามารถเสร็จสิ้นได้ในแง่ของการขนย้ายหน้าเว็บ วันนี้งานเสร็จเร็วมากดังนั้นฉันจึงเขียนโค้ดด้วยตัวเองและฉันก็ใช้ตัวอย่างภาพพื้นหลังหน้าเมื่อฉันเรียนอยู่ หากคุณต้องการตั้งค่าสถานที่ที่มีบุคลิกคุณสามารถใช้โลโก้ของเว็บไซต์ของคุณเองเพื่อกำหนดสไตล์ของคุณเอง

  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> อินเตอร์เฟสเข้าสู่ระบบแบ็กเอนด์ </title>
  6. <styleType = text/css>
  7. -
  8. .งาน{
  9. ขนาดตัวอักษร: 32px;
  10. สี:#FF6600;
  11. Padding-Top: 180px;
  12. -
  13. ร่างกาย{
  14. พื้นหลังสี:#336699;
  15. -
  16. ร่างกาย{
  17. พื้นหลังสี: #CCCCFF;
  18. ภาพพื้นหลัง: URL (รูปภาพ/2.jpg);
  19. -
  20. .STYLE1 {
  21. ขนาดตัวอักษร: 18px;
  22. Font-Weight: ตัวหนา;
  23. -
  24. .รูปร่าง{
  25. Padding-Top: 280px;
  26. Padding-Right: 50px;
  27. Padding-Left: 600px;
  28. -
  29. .STYLE2 {สี: #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 = ขวา> ชื่อผู้ใช้: </div>
  41. </div> </td>
  42. <tdwidth = 183background = ภาพ/1.jpgbgcolor =#ccffff> <spanclass = style2>
  43. <label>
  44. <inputName = nameType = textId = namemaxLength = 10/>
  45. </lable>
  46. </span> </td>
  47. </tr>
  48. <tr>
  49. <tdHeight = 37Align = centerValign = middlebackground = images/1.jpg> <divalign = ขวา> <spanclass = style1> รหัสผ่าน </span>: </div> </td>
  50. <tdbackground = images/1.jpgbgcolor =#ccffff> <spanclass = style2>
  51. <label>
  52. <inputName = pwdType = passwordId = pwdMaxLength = 20/>
  53. </lable>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = centervalign = middlebackground = images/1.jpg> <label>
  58. <divalign = center>
  59. <inputType = submitName = submentValue = submit/ subment/
  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. </lable>
  70. </span> </td>
  71. </tr>
  72. </table>
  73. </form>
  74. </body>
  75. </html>

หากคุณมีความเชี่ยวชาญใน CSS+DIV ในแบบฟอร์มอย่าใช้แท็กตาราง หากคุณทำรหัสอาจมีขนาดใหญ่และจะส่งผลกระทบต่อความเร็ว

ภาพด้านล่างเป็นผลลัพธ์หลังจากเรียกใช้รหัสด้านบน

บทความที่เกี่ยวข้อง