注册表单实战案例

一·用户注册表单模块化案例

效果图

  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. <link rel="stylesheet" href="style1.css">
  9. </head>
  10. <body>
  11. <div class="header"> <!-- 头部 -->
  12. <img src="https://www.php.cn/static/images/logos.png" alt="">
  13. <br>
  14. <h1>欢迎注册</h1>
  15. </div> <!-- 头部 -->
  16. <div class="main"> <!-- 主体 -->
  17. <div class="zhuce-form"></div>
  18. <form action="#.php" method="POST" style="display: grid; gap: 1em" onsubmit="return false;">
  19. <!-- 用户名 --> <input type="text" name="name" placeholder="请输入用户名" autofocus required> <!-- 为了用户体验不再加入label标签提示 -->
  20. <!-- 密码 --> <input type="password" name="password" placeholder="请输入密码">
  21. <div class="dx-radio">
  22. <!-- 单选 -->
  23. <label for="secret">性别:</label>
  24. <input type="radio" name="gender" value="nan" checked id="secret"/><label for=""></label>
  25. <input type="radio" name="gender" value="nv" /><label for=""></label>
  26. <div>
  27. <br>
  28. <div class="fx-checkbox">
  29. <!-- 复选 -->
  30. <label>爱好:</label>
  31. <!-- 所有复选框的name属性值必须写成数组格式 -->
  32. <input type="checkbox" name="hobby[]" id="paobu" checked /><label for="game">跑步</label>
  33. <input type="checkbox" name="hobby[]" id="trave" /><label for="youyong">游泳</label>
  34. <input type="checkbox" name="hobby[]" id="shoot" /><label for="daqiu">打球</label>
  35. <div>
  36. <br>
  37. <!-- 下拉 -->
  38. <div class="xl-select" >
  39. <label for="">请选择注册方式</label>
  40. <select name="xiala" id="">
  41. <option value="1">手机</option>
  42. <option value="2">QQ</option>
  43. <option value="3" selected>微信</option>
  44. </div>
  45. </select>
  46. <br>
  47. <div class="tj-button"> <!-- 提交 -->
  48. <button >注册</button>
  49. </div>
  50. </form>
  51. </div> <!-- zhuce-form -->
  52. </div><!-- 主体 -->
  53. <div class="footer" >
  54. <div class="dl-a"><a href="">老用户登入</a></div>
  55. <div class="wj-a"><a href="">忘记密码</a></div>
  56. </div>
  57. </div>
  58. </body>
  59. </html>

二:CSS外部文件代码:

  1. .header{text-align: center;} /* 给头部添加样式 */
  2. .main{
  3. margin: auto;
  4. padding: 40px 20px; /*整体样式 上/左右边距 */
  5. width: 300px;
  6. height: 200px;
  7. background-color: grey;}
  8. .zc-input input{ /* 给输入框添加样式 */
  9. height: 30px;
  10. width: 200px; }
  11. .dx-radio,.fx-checkbox,.xl-select{ height: 24px; /* 给单选和复选添加样式 */
  12. width: 300px;
  13. background-color: white; }
  14. button{
  15. margin: 10px 125px; /* 给提交添加样式 */
  16. }
  17. .dl-a>a,.wj-a>a{
  18. border: 0px;
  19. margin-left:200px;
  20. color: white;text-decoration:none;
  21. }

:三上下文选择器示例

后代选择器:空格*如下方的 ul li{ background-color: blue;}

子选择器:标签>标签>标签如 body>ul>li