ASCII码 ASCII码

用户注册表单和简单的后台首页

发布于：2022-07-07 15:25:00  栏目：技术文档

1.用户注册表单

1.1.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.   </head>
  9.   <body>
  10.     <style>
  11.       div {
  12.         padding: 10px;
  13.       }
  14.       button {
  15.         background-color: violet;
  16.         color: #fff;
  17.         border-radius: 20px;
  18.       }
  19.       form {
  20.         width: 500px;
  21.         border: 1px solid #000;
  22.         text-align: center;
  23.       }
  24.     </style>
  25.     <h1 style="margin-left: 170px">用户注册表</h1>
  26.     <form action="reg.php" method="post">
  27.       <div>
  28.         <label for="username">用户名：</label>
  29.         <input type="text" name="username" id="username" placeholder="用户名不能为空" autofocus />
  30.       </div>
  31.       <div>
  32.         <label for="password">密码：</label>
  33.         <input type="password" name="password" id="password" placeholder="密码不能为空" />
  34.       </div>
  35.       <div>
  36.         <label for="">性别：</label>
  37.         <input type="radio" name="sex" id="nan" value="0" checked />
  38.         <label for="nan">男</label>
  39.         <input type="radio" name="sex" id="nv" value="1" />
  40.         <label for="nv">女</label>
  41.         <input type="radio" name="sex" id="weizhi" value="2" />
  42.         <label for="weizhi">未知</label>
  43.       </div>
  44.       <div>
  45.         <label for="">爱好：</label>
  46.         <input type="checkbox" name="hobbies[]" id="dianying" />
  47.         <label for="dianying">电影</label>
  48.         <input type="checkbox" name="hobbies[]" id="dongman" />
  49.         <label for="dongman">动漫</label>
  50.         <input type="checkbox" name="hobbies[]" id="game" />
  51.         <label for="game">游戏</label>
  52.       </div>
  53.       <div>
  54.         <label for="">城市：</label>
  55.         <select name="city" id="">
  56.           <option value="0" selected disabled>--请选择--</option>
  57.           <option value="1">福建</option>
  58.           <option value="2">上海</option>
  59.           <option value="3">北京</option>
  60.           <option value="4">武汉</option>
  61.         </select>
  62.       </div>
  63.       <div>
  64.         <button>注册</button>
  65.       </div>
  66.     </form>
  67.   </body>
  68. </html>

1.2 实现效果：

2.后台首页

2.1：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.   </head>
  9.   <body>
  10.     <style>
  11.       * {
  12.         padding: 0;
  13.         margin: 0;
  14.       }
  15.       .head {
  16.         text-align: center;
  17.         background-color: bisque;
  18.         border-bottom: 1px solid #000;
  19.         height: 80px;
  20.       }
  21.       .nav {
  22.         width: 100px;
  23.         height: 850px;
  24.         border-right: 1px solid #000;
  25.         background-color: aqua;
  26.       }
  27.     </style>
  28.     <div class="head">
  29.       <h1 style="text-align: center">简单的后台</h1>
  31.       <h3 style="margin-top: -30px; margin-left: 1500px">用户名：admin</h3>
  32.     </div>
  33.     <div class="nav">
  34.       <ul style="text-align: center; padding: 10px">
  35.         <li style="padding: 10px"><a href="../0704/zuoye2.html" target="right">课程表</a></li>
  36.         <li style="padding: 10px"><a href="zuoye.html" target="right">注册</a></li>
  37.         <li style="padding: 10px"><a href="https://www.sogou.com/" target="right">百度</a></li>
  38.       </ul>
  39.     </div>
  40.     <div style="margin-top: -850px; margin-left: 100px">
  41.       <iframe src="" frameborder="2" name="right" width="1800px" height="850px"></iframe>
  42.     </div>
  43.   </body>
  44. </html>

2.2 实现效果：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行