ホーム>Web デザインのチュートリアル>HTMLチュートリアル

Webサイトバックエンド管理ログインインターフェイス設計コードと例

著者：Eve Cole 更新時間：2025-08-17 22:00:03

Webサイトのバックエンド管理インターフェイスの設計は、データベースが完了した場合にのみ構築することです。データベースが構築されていない場合、接続部分は最初に空になるように設定され、ページ転置に関して関数を完了できません。今日、作業は非常に早く完了したので、自分でコードを書きました。また、勉強しているときにページの背景画像の例を使用しました。個性を備えた場所を設定する必要がある場合は、独自のWebサイトのロゴを使用して独自のスタイルを設定できます。

  1. <！doctypehtmlpublic - // w3c // dtdxhtml1.0transitional // enttp：//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. パディングトップ：180px;
  12. }
  13. 体{
  14. バックグラウンドカラー：＃336699;
  15. }
  16. 体{
  17. バックグラウンドカラー：#ccccff;
  18. 背景イメージ：url（images/2.jpg）;
  19. }
  20. .style1 {
  21. フォントサイズ：18px;
  22. font-weight：bold;
  23. }
  24. 。形状{
  25. パディングトップ：280px;
  26. パディング右：50px;
  27. パディング左：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 = right> username：</div>
  41. </div> </td>
  42. <tdwidth = 183background = images/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 = centervalign = middlebackground = images/1.jpg> <divalign = right> <spanclass = style1>パスワード</span>：</div> </td>
  50. <tdbackground = images/1.jpgbgcolor =＃ccffff> <spanclass = style2>
  51. <label>
  52. <inputname = pwdtype = passwordId = pwdmaxlength = 20/>
  53. </label>
  54. </span> </td>
  55. </tr>
  56. <tr>
  57. <tdalign = centervalign = middlebackground = images/1.jpg> <label>
  58. <divalign = center>
  59. <inputtype = submitname = submitvalue = submit/
  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. </label>
  70. </span> </td>
  71. </tr>
  72. </table>
  73. </form>
  74. </body>
  75. </html>

フォームのCSS+DIVに熟練している場合は、テーブルタグを使用しないでください。それを行うと、コードが大きくなり、速度に影響します。

上記のコードが実行された後の結果は、以下の写真です。

関連記事