홈페이지>웹 디자인 튜토리얼>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. <헤드>
  4. <metahttp-equiv = content-typecontent = text/html; charset = gb2312/>
  5. <title> 백엔드 로그인 인터페이스 </title>
  6. <styletype = text/css>
  7. <!-
  8. .일하다{
  9. 글꼴 크기 : 32px;
  10. 색상 :#FF6600;
  11. 패딩 탑 : 180px;
  12. }
  13. 몸{
  14. 배경색 :#336699;
  15. }
  16. 몸{
  17. 배경색 : #ccccff;
  18. 배경 이미지 : URL (images/2.jpg);
  19. }
  20. .Style1 {
  21. 글꼴 크기 : 18px;
  22. 글꼴 중량 : 대담한;
  23. }
  24. .형태{
  25. 패딩 탑 : 280px;
  26. 패딩-오른쪽 : 50px;
  27. 왼쪽 패딩 : 600px;
  28. }
  29. .Style2 {색상 : #ffccff}
  30. ->
  31. </스타일>
  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 = right> username : </div>
  41. </div> </td>
  42. <tdwidth = 183background = images/1.jpgbgcolor =#ccffff> <spanclass = style2>
  43. <라벨>
  44. <inputname = nametype = textId = namemaxLength = 10/>
  45. </레이블>
  46. </span> </td>
  47. </tr>
  48. <tr>
  49. <tdheight = 37align = centervalign = middlebackground = images/1.jpg> <divalign = right> <spanclass = style1> password </span> : </div> </td>
  50. <tdbackground = images/1.jpgbgcolor =#ccffff> <spanclass = style2>
  51. <라벨>
  52. <inputname = pwdtype = passwordId = pwdmaxlength = 20/>
  53. </레이블>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = centervalign = middlebackground = images/1.jpg> <label>
  58. <divalign = 센터>
  59. <inputtype = admbername = 제출 value = 제출/
  60. </div>
  61. </label> </td>
  62. <tdbackground = images/1.jpgbgcolor =#ccffff> <spanclass = style2>
  63. <라벨>
  64. </span>
  65. <divalign = centerclass = style2>
  66. <inputname = resettype = resetid = resetvalue = reset/>
  67. </div>
  68. <spanclass = style2>
  69. </레이블>
  70. </span> </td>
  71. </tr>
  72. </테이블>
  73. </form>
  74. </body>
  75. </html>

양식의 CSS+DIV에 능숙하다면 테이블 태그를 사용하지 마십시오. 그렇게하면 코드가 클 수 있으며 속도에 영향을 미칩니다.

아래 그림은 위의 코드가 실행 된 후 결과입니다.

관련 기사