ASCII码 ASCII码

使用HTML制作简单注册页面和后台管理页面

发布于：2022-07-06 18:12:38  栏目：技术文档

简单的注册页面

  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>
  11.     <form action="check.php">
  12.         <h2>注册</h2>
  13.         <div>
  14.             <label for="username">用户名：</label>
  15.             <input type="text" id="username" name="username"  placeholder="请输入用户名" autofocus>
  16.         </div>
  18.         <div>
  19.             <label for="psd">密码：</label>
  20.             <input type="password" id="psd" name="psd">
  21.         </div>
  23.         <div>
  24.             <label for="secret">性别：</label>
  25.             <input type="radio" id="male" name="sex" value="male"><label for="male">男</label>
  26.             <input type="radio" id="female" name="sex" value="female"><label for="female">女</label>
  27.             <input type="radio" id="secret" name="sex" value="secret" checked><label for="secret">保密</label>
  28.         </div>
  30.         <div>
  31.             <label for="ball">爱好：</label>
  32.             <input type="checkbox" id="sing" name="hobby[]" value="sing"><label for="sing">唱</label>
  33.                 <input type="checkbox" id="jump" name="hobby[]" value="jump"><label for="jump">跳</label>
  34.                 <input type="checkbox" id="rap" name="hobby[]" value="rap" ><label for="rap">Rap</label>
  35.                 <input type="checkbox"  id="ball" name="hobby[]" value="ball" checked><label for="ball">篮球</label>
  36.         </div>
  38.         <div>
  39.             <label for="edu">学历：</label>
  40.             <select name="edu" id="edu">
  41.                 <option value="0" selected disabled>--请选择--</option>
  42.                 <option value="1">高中</option>
  43.                 <option value="2">大学</option>
  44.                 <option value="3">研究生</option>
  45.             </select>
  46.         </div>
  48.         <div>
  49.             <label for="">生日：</label>
  50.             <input type="date" name="" id="">
  51.         </div>
  53.         <div>
  54.             <button>提交</button>
  55.         </div>
  56.     </form>
  57. </body>
  58. </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>内联框架-网站后台</title>
  8.     <style>
  9.         .header {
  10.             display: flex;
  11.             align-items: center;
  12.             background-color: aquamarine;
  13.             height: 100px;
  14.         }
  15.         body .header div {
  16.         margin-left: auto;
  17.       }
  18.       .nav  ul {
  19.         display: flex;
  20.         list-style: none;
  21.       }
  22.       .nav ul li {
  23.         padding: 1em;
  24.       }
  25.         .iframe  iframe{
  26.             width: 100%;
  27.             height: 600px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="header">
  33.         <h2>网站管理后台</h2>
  34.         <div>
  35.             <em>user</em>
  36.             <a href="loginout.html">退出</a>
  37.         </div>
  38.     </div>
  40.     <div class="nav">
  41.         <ul>
  42.             <li><a href="../0704属性-布局-列表-表格/demo.html" target="content">属性</a></li>
  43.             <li><a href="../0704属性-布局-列表-表格/demo2.html" target="content">列表</a></li>
  44.             <li><a href="../0704属性-布局-列表-表格/demo3.html" target="content">表格</a></li>
  45.         </ul>
  46.     </div>
  48.     <div class="iframe">
  49.         <iframe src="" frameborder="1" name="content"></iframe>
  50.     </div>
  51. </body>
  52. </html>

效果：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行