用户注册表单和上下文选择器

作业内容:

  1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;
  2. 理解css模块的思想,并试写一个案例(选做)
  3. 实例演示基本选择器与上下文选择器
  4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等

1.

  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>Document</title>
  8. </head>
  9. <body>
  10. <h3>必填项</h3>
  11. <form action="">
  12. <fieldset>
  13. <div>
  14. <label for="username"> 账号:</label>
  15. <input type="text" id="username" name="username" autofocus required placeholder="不少于8位" />
  16. </div>
  17. <div>
  18. <label for="username"> 密码:</label>
  19. <input type="password" id="password" name="password" autofocus required placeholder="不少于6位" />
  20. </div>
  21. <div>
  22. <label for="username"> 邮箱:</label>
  23. <input type="email" id="email" name="email" autofocus required placeholder="79524795@qq.com" />
  24. </div>
  25. <label for="secret">性别:</label>
  26. <input type="radio" name="gender" id="man" value="man" /><label for="man"></label>
  27. <input type="radio" name="gender" id="women" value="women" /><label for="women"></label>
  28. <input type="radio" name="gender" id="g" value="s" checked id="secret" /><label for="g">保密</label>
  29. <br>
  30. <label for="">爱好:</label>
  31. <input type="checkbox" name="hobby[]" id="game" checked> <label for="game">游戏</label>
  32. <input type="checkbox" name="hobby[]" id="trave"> <label for="trave">抽烟</label>
  33. <input type="checkbox" name="hobby[]" id="shoot"> <label for="shoot">喝酒</label>
  34. <input type="checkbox" name="hobby[]" id="da"> <label for="da">打架</label>
  35. <br>
  36. <label for="">PHP水平:</label>
  37. <select name="level" id="">
  38. <option value="1">小白</option>
  39. <option value="2">垃圾</option>
  40. <option value="3" selected>一般</option>
  41. <option value="3">三年PHP</option>
  42. </select>
  43. <br>
  44. <div>
  45. <label for="">喜欢的编码语言:</label>
  46. <input type="search" name="search" list="keywords">
  47. <datalist id="keywords">
  48. <option value="html"></option>
  49. <option value="java"></option>
  50. <option value="php"></option>
  51. </datalist>
  52. </div>
  53. <button type="submit">提交</button>
  54. </fieldset>
  55. </form>
  56. </body>
  57. </html>

3.

  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>Document</title>
  8. <style>
  9. /* ul li {
  10. background-color: lightblue;
  11. } */
  12. body > ul > li {
  13. background-color:lightgreen ;
  14. }
  15. .a + li {
  16. background-color: yellow;
  17. }
  18. .b ~ li {
  19. background-color: red;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <ul>
  25. <li class="a">item1</li>
  26. <li>item2</li>
  27. <li id="">item3</li>
  28. <li id="">item4</li>
  29. <li >
  30. <ul>
  31. <li>item</li>
  32. <li>item</li>
  33. <li>item</li>
  34. <li>item</li>
  35. </ul>
  36. </li>
  37. <li class="b">item6</li>
  38. <li>item7</li>
  39. <li>item8</li>
  40. </ul>
  41. </body>
  42. </html>