简单的注册页面

  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>

效果：

更多相关文章

  1. 2022年PHP学习课程表-表格与图文列表
  2. 列表UL\OL\DL基本用法及表格Table基本用法
  3. HTML表格的实际应用
  4. 图文列表导航组件以及表格制作
  5. HTML基础：HTML的图片、链接、列表、表格标签属性及使用案例/用表
  6. 图片列表导航（附table课程表表格）
  7. HTML常用标签属性以及应用场景/怎么用表格做一个课程表
  8. html表格制作简单的时间安排表
  9. Android实现程序前后台切换效果(类似QQ后台运行)

随机推荐

  1. android 列表 数据显示总结
  2. android定位个人当前位置
  3. 安卓隐藏标题栏状态栏 ，实现全屏效果
  4. Android程序意外终止问题
  5. Android核心分析之二十一Android应用框架
  6. Android/iOS 和js的交互的兼容性写法
  7. Android Dialog背景全透明无边框 Theme S
  8. Android SDK各版本源码
  9. bugly镜像地址，可以下载android sdk的插件
  10. android 菜单实例