表单以及选择器

制作一个用户注册表单

  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="1.php" method="GET"></form>
  12. <div>
  13. <label for="name">账号:</label>
  14. <input type="text" name="name" id="name" autofocus required />
  15. </div>
  16. <div>
  17. <label>密码:</label>
  18. <input type="password" name="paw" id="paw" required />
  19. </div>
  20. <div>
  21. <label for="fruit">水果:</label>
  22. <input type="radio" name="" id="fruit" /><label>葡萄</label>
  23. <input type="radio" name="" id="" /><label>香蕉</label>
  24. <input type="radio" name="" id="" /><label>菠萝</label>
  25. </div>
  26. <div>
  27. <label for="fru">水果:</label>
  28. <input type="checkbox" name="" id="" /><label>葡萄</label>
  29. <input type="checkbox" name="" id="" /><label>香蕉</label>
  30. <input type="checkbox" name="" id="fru" /><label>菠萝</label>
  31. </div>
  32. <div>
  33. <select name="" id="">
  34. <option value="1">葡萄</option>
  35. <option value="2" selected>香蕉</option>
  36. <option value="3">菠萝</option>
  37. </select>
  38. </div>
  39. <button>提交</button>
  40. </body>
  41. </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=u, initial-scale=1.0" />
  7. <title>Document</title>
  8. <style>
  9. ol {
  10. background-color: rebeccapurple;
  11. }
  12. li#apple {
  13. background-color: rosybrown;
  14. }
  15. li.banana {
  16. background-color: black;
  17. }
  18. li[id="pt"] {
  19. background-color: chartreuse;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <ol>
  25. <li id="apple">苹果</li>
  26. <li class="banana">香蕉</li>
  27. <li id="pt">葡萄</li>
  28. <li>菠菜</li>
  29. <li>西瓜</li>
  30. </ol>
  31. </body>
  32. </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=u, initial-scale=1.0" />
  7. <title>Document</title>
  8. <style>
  9. ol li {
  10. background-color: chartreuse;
  11. }
  12. body > ol > li {
  13. background-color: chocolate;
  14. }
  15. #xg + li {
  16. background-color: cornflowerblue;
  17. }
  18. #bc ~ li {
  19. background-color: cyan;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <ol>
  25. <li>苹果</li>
  26. <li id="xg">香蕉</li>
  27. <li>葡萄</li>
  28. <ol>
  29. <li id="bc">菠菜</li>
  30. <li>西瓜</li>
  31. <li>菠菜</li>
  32. </ol>
  33. <li>菠菜</li>
  34. <li>西瓜</li>
  35. </ol>
  36. </body>
  37. </html>