Blogger Information
Blog 29
fans 1
comment 0
visits 14900
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用HTML制作简单注册页面和后台管理页面
Pharaoh
Original
1086 people have browsed it

简单的注册页面

  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="check.php">
  11. <h2>注册</h2>
  12. <div>
  13. <label for="username">用户名:</label>
  14. <input type="text" id="username" name="username" placeholder="请输入用户名" autofocus>
  15. </div>
  16. <div>
  17. <label for="psd">密码:</label>
  18. <input type="password" id="psd" name="psd">
  19. </div>
  20. <div>
  21. <label for="secret">性别:</label>
  22. <input type="radio" id="male" name="sex" value="male"><label for="male"></label>
  23. <input type="radio" id="female" name="sex" value="female"><label for="female"></label>
  24. <input type="radio" id="secret" name="sex" value="secret" checked><label for="secret">保密</label>
  25. </div>
  26. <div>
  27. <label for="ball">爱好:</label>
  28. <input type="checkbox" id="sing" name="hobby[]" value="sing"><label for="sing"></label>
  29. <input type="checkbox" id="jump" name="hobby[]" value="jump"><label for="jump"></label>
  30. <input type="checkbox" id="rap" name="hobby[]" value="rap" ><label for="rap">Rap</label>
  31. <input type="checkbox" id="ball" name="hobby[]" value="ball" checked><label for="ball">篮球</label>
  32. </div>
  33. <div>
  34. <label for="edu">学历:</label>
  35. <select name="edu" id="edu">
  36. <option value="0" selected disabled>--请选择--</option>
  37. <option value="1">高中</option>
  38. <option value="2">大学</option>
  39. <option value="3">研究生</option>
  40. </select>
  41. </div>
  42. <div>
  43. <label for="">生日:</label>
  44. <input type="date" name="" id="">
  45. </div>
  46. <div>
  47. <button>提交</button>
  48. </div>
  49. </form>
  50. </body>
  51. </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>
  39. <div class="nav">
  40. <ul>
  41. <li><a href="../0704属性-布局-列表-表格/demo.html" target="content">属性</a></li>
  42. <li><a href="../0704属性-布局-列表-表格/demo2.html" target="content">列表</a></li>
  43. <li><a href="../0704属性-布局-列表-表格/demo3.html" target="content">表格</a></li>
  44. </ul>
  45. </div>
  46. <div class="iframe">
  47. <iframe src="" frameborder="1" name="content"></iframe>
  48. </div>
  49. </body>
  50. </html>

效果:

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post