注册页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>注册页</title>
  8.   </head>
  9.   <body>
  10.     <form action="api.php" method="post">
  11.       <div style="text-align: center">
  12.         <label for="username">用户名:</label>
  13.         <input
  14.           type="text"
  15.           id="username"
  16.           value="admin"
  17.           placeholder="至少六位"
  18.           autofocus
  19.           required
  20.         />
  21.       </div>
  23.       <div style="text-align: center">
  24.         <label for="password">密码:</label>
  25.         <input type="password" id="password" value="123321"
  26.         placeholder="至少八位" autofocus required
  27.       </div>
  28.       <div style="text-align: center">
  29.         <label for="email1">邮箱:</label>
  30.         <input type="email" id="email1" value="" placeholder="请输入邮箱"
  31.         autofocus required
  32.       </div>
  33.       <div>
  34.         <button>提交</button>
  35.       </div>
  36.     </form>
  37.   </body>
  38. </html>

小后台

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       body {
  10.         height: 100vh;
  11.         width: 100vw;
  12.         display: grid;
  13.         grid-template-columns: 10em 1fr;
  14.         grid-template-rows: 6em 1fr;
  15.         margin: 0;
  16.       }
  18.       body .header {
  19.         grid-column-end: span 2;
  20.         border-bottom: 1px solid currentColor;
  21.         background-color: #efe;
  22.         padding: 2em;
  23.         display: flex;
  24.         align-items: center;
  25.       }
  27.       body .header div {
  28.         margin-left: auto;
  29.       }
  31.       body .nav {
  32.         background-color: #efc;
  33.         margin: 0;
  34.         padding-top: 1em;
  35.         list-style: none;
  36.       }
  38.       body iframe {
  39.         width: calc(100vw - 10em);
  40.         height: calc(100vh - 6em);
  41.         border-left: 1px solid currentColor;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="header">
  47.       <h1>后台</h1>
  48.       <div>
  49.         <span>admin</span>
  50.         <a href="">退出后台</a>
  51.       </div>
  52.     </div>
  53.     <ul class="nav">
  54.       <li><a href="demo.html" target="content">1</a></li>
  55.       <li><a href="demo.html" target="content">2</a></li>
  56.       <li><a href="demo.html" target="content">3</a></li>
  57.       <li><a href="demo.html" target="content">4</a></li>
  58.       <li><a href="demo.html" target="content">5</a></li>
  59.     </ul>
  60.     <iframe src="" frameborder="2" name="content"></iframe>
  61.   </body>
  62. </html>