ASCII码 ASCII码

注册表单html代码与简洁后台html代码演示

发布于：2022-07-07 14:41:02  栏目：技术文档

注册页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <h2>用户注册</h2>
  11.     <form action="register.php" method="post">
  12.       <div>
  13.         <label for="uname">用户名:</label>
  14.         <input type="text" id="uname" name="username" placeholder="用户名不能为空" autofocus />
  15.       </div>
  16.       <div>
  17.         <label for="psw">密码:</label>
  18.         <input type="password" id="psw" name="password" placeholder="密码不能为空" />
  19.         <button onclick="showPassword(this,this.form.password)">查看密码</button>
  20.       </div>
  21.       <div>
  22.         <label for="secret"> 性别:</label>
  23.         <input type="radio" id="male" name="sex" value="male" /><label for="male">男</label>
  24.         <input type="radio" id="female" name="sex" value="female" /><label for="female">女</label>
  25.         <input type="radio" id="secret" name="sex" value="secret" checked /><label for="secret">保密</label>
  26.       </div>
  27.       <div>
  28.         <label for="secret"> 爱好:</label>
  29.         <input type="checkbox" id="game" name="hobby[]" value="game" /><label for="game">打游戏</label>
  30.         <input type="checkbox" id="trave" name="hobby[]" value="trave" checked /><label for="trave">看美女</label>
  31.         <input type="checkbox" id="shoot" name="hobby[]" value="shoot" checked /><label for="shoot">听音乐</label>
  32.       </div>
  33.         <label for="">学历:</label>
  34.         <select name="edu" id="">
  35.           <option value="0" selected disabled>--请选择--</option>
  36.           <option value="1">小学</option>
  37.           <option value="2">初中</option>
  38.           <option value="3">高中</option>
  39.           <option value="4">大学</option>
  40.           <option value="5">文盲</option>
  41.         </select>
  42.       </div>
  43.       <div>
  44.         <button>提交</button>
  45.       </div>
  46.     </form>
  47.     <script>
  48.       function showPassword(btn, ele) {
  49.         if (ele.type === 'password') {
  50.           ele.type = 'text';
  51.           btn.textContent = '隐藏';
  52.         } else {
  53.           ele.type = 'password';
  54.           btn.textContent = '显示';
  55.         }
  56.       }
  57.     </script>
  58.   </body>
  59. </html>

效果图

简洁后台布局

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.       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: lightskyblue;
  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: lightgreen;
  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.     <!-- 后台顶部 -->
  47.     <div class="header">
  48.       <h1>网站后台管理系统</h1>
  49.       <div>
  50.         <em>admin</em>
  51.         <a href="logout.php">退出</a>
  52.       </div>
  53.     </div>
  55.     <!-- 左侧导航 -->
  56.     <ul class="nav">
  57.       <li><a href="/admin/index.html" target="content">首页</a></li>
  58.       <li><a href="/admin/dingdan.html" target="content">订单管理</a></li>
  59.       <li><a href="/admin/yonghu.html" target="content">用户管理</a></li>
  60.       <li><a href="/admin/xiaoshou.html" target="content">销售管理</a></li>
  61.     </ul>
  63.     <!-- 右侧内容区 -->
  64.     <iframe srcdoc="<a href='javascript:;'>演示效果请点击左侧菜单</a>" frameborder="1" name="content"></iframe>
  65.   </body>
  66. </html>

效果图

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行