css选择器与用户表单制作

页面

代码

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. <link rel="stylesheet" href="css/userForm.css" />
  8. <title>用户注册表单</title>
  9. </head>
  10. <body>
  11. <h1>用户注册表单</h1>
  12. <h3>注意事项</h3>
  13. <ul>
  14. <li>提交前检查</li>
  15. <li class="start">有问题练习123456</li>
  16. <li>网站邮箱:111@163.com</li>
  17. </ul>
  18. <form action="" method="get">
  19. <div>
  20. <label for="">搜索</label>
  21. <input type="search" name="search" list="showList"/>
  22. <datalist id="showList">
  23. <option value="1"></option>
  24. <option value="2"></option>
  25. <option value="3"></option>
  26. </datalist>
  27. </div>
  28. <fieldset class="must">
  29. <legend>必填项</legend>
  30. <div>
  31. <label for="username">用户名:</label>
  32. <input type="text" name="username" id="username" autofocus required placeholder="请输入不超过8位数">
  33. </div>
  34. <div>
  35. <label for="password">密码:</label>
  36. <input type="password" name="password" id="password" required placeholder="请输入大写字母或小写字母">
  37. </div>
  38. <div>
  39. <label for="email">邮箱:</label>
  40. <input type="email" name="email" id="email" required placeholder="example@email.com">
  41. </div>
  42. </fieldset>
  43. <fieldset class="choose">
  44. <legend>问卷调查(选填项)</legend>
  45. <div>
  46. <label for="male">性别:</label>
  47. <input type="radio" name="gender" value="male" id="male" checked><label for=""></label>
  48. <input type="radio" name="gender" value="female" id="female"><label for=""></label>
  49. </div>
  50. <div>
  51. <label for="">从哪些渠道获取本网站信息:</label>
  52. <input type="checkbox" name="route[]" id="internet"><label for="internet">网络</label>
  53. <input type="checkbox" name="route[]" id="magzine" class="start"><label for="magzine">报纸杂志</label>
  54. <input type="checkbox" name="route[]" id="friends"><label for="friends">朋友介绍</label>
  55. </div>
  56. <div>
  57. <label for="">年龄段</label>
  58. <select name="age" id="age">
  59. <option value="1">18岁以下</option>
  60. <option value="2" selected>18-30岁</option>
  61. <option value="3">30岁以上</option>
  62. </select>
  63. </div>
  64. </fieldset>
  65. <div>
  66. <button type="submit">提交表单</button>
  67. </div>
  68. </form>
  69. </body>
  70. </html>

css

  1. /* 基本选择器 */
  2. h1 {
  3. text-align: center
  4. }
  5. h3 {
  6. background-color: violet;
  7. text-align: center
  8. }
  9. fieldset.must{
  10. background-color: rgb(130, 225, 238);
  11. text-align: center
  12. }
  13. fieldset.choose{
  14. background-color: rgb(231, 238, 130);
  15. text-align: center
  16. }
  17. /* 上下文选择器 */
  18. ul li {
  19. background-color: lightblue;
  20. }
  21. .start + li {
  22. background-color: yellow;
  23. }