欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

0630作业

程序员文章站 2022-06-05 17:42:38
...

CSS选择器

1.制作一个用户注册表单

表单源代码：

    

  1. <form action="" method="">
    2. 

  2.         <fieldset>
    3. 

  3.             <legend>必填项</legend>
    4. 

  4.             <div>
    5. 

  5.                 <label for="username">账号:</label>
    6. 

  6.                 <input type="text" id="username" name="username" autofocus required placeholder="手机号/身份证/电子邮箱"
    7. 

  7.                     value="默认数值" />
    8. 

  8.             </div>
    9. 

  9.             <div>
    10. 

  10.                 <label for="psw">密码:</label>
    11. 

  11.                 <input type="password" id="psw" name="psw" placeholder="密码不少于8位,开头必须用英文">
    12. 

  12.             </div>
    13. 

  13.             <div>
    14. 

  14.                 <label for="email">电子邮箱:</label>
    15. 

  15.                 <input type="email" id="email" name="email" required />
    16. 

  16.             </div>
    17. 

  17.         </fieldset>
    18. 

  18.         <div>
    19. 

  19.             <label for="secret">性别:</label>
    20. 

  20.             <input type="radio" name="gender" value="male"><label for="">男</label>
    21. 

  21.             <input type="radio" name="gender" value="fomale"><label for="">女</label>
    22. 

  22.             <input type="radio" name="gender" value="secret" checked id="secret"><label for="">保密</label>
    23. 

  23.         </div>
    24. 

  24.         <div>
    25. 

  25.             <label>爱好：</label>
    26. 

  26.             <input type="checkbox" name="habby[]" id="trave" /><label for="trave">旅游</label>
    27. 

  27.             <input type="checkbox" name="habby[]" id="game" /><label for="game">游戏</label>
    28. 

  28.             <input type="checkbox" name="habby[]" id="shoot" /><label for="shoot">摄影</label>
    29. 

  29.         </div>
    30. 

  30.         <div>
    31. 

  31.             <select name="level" id="" multiple >
    32. 

  32.                 <option value="1">铜牌会员</option>
    33. 

  33.                 <option value="2">银牌会员</option>
    34. 

  34.                 <option value="3">金牌会员</option>
    35. 

  35.                 <option value="4">钻石会员</option>
    36. 

  36.             </select>
    37. 

  37.         </div>
    38. 

  38.         <div>
    39. 

  39.             <label for="">搜索关键字：</label>
    40. 

  40.             <input type="search" name="serch" list="keywords" />
    41. 

  41.             <datalist id="keywords">
    42. 

  42.                 <option value="html"></option>
    43. 

  43.                 <option value="css"></option>
    44. 

  44.                 <option value="javascript"></option>
    45. 

  45.                 <option value="js"></option>
    46. 

  46.             </datalist>
    47. 

  47.         </div>
    48. 

  48.         <button type="submit">提交</button>
    49. 

  49.     </form>
    50.

2.CSS的基本选择器和上下文选择器

  1. 基本选择器
    

  1. <head>
    2. 

  2.     <meta charset="UTF-8">
    3. 

  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4. 

  4.     <title>选择器：基本的选择器</title>
    5. 

  5.     <style>
    6. 

  6.         /* 标签 */
    7. 

  7.         li {
    8. 

  8.             background-color: violet;
    9. 

  9.         }
    10. 

  10.         /* 属性 */
    11. 

  11.        li[id="foo"] {
    12. 

  12.             background-color: blue;
    13. 

  13.         }
    14. 

  14.         li#foo {
    15. 

  15.             background-color: yellow;
    16. 

  16.         }
    17. 

    18. 

  18.         li[class="on"] {
    19. 

  19.             background-color: green;
    20. 

  20.         }
    21. 

  21.         li.on {
    22. 

  22.             background-color: cyan;
    23. 

  23.         }
    24. 

  24.     </style>
    25. 

  25. </head>
    26. 

  26. <body>
    27. 

  27.     <ul>
    28. 

  28.         <!-- 元素 = 标签 + 属性 -->
    29. 

  29.         <li id="foo">item1</li>
    30. 

  30.         <li>item2</li>
    31. 

  31.         <li class="on">item3</li>
    32. 

  32.         <li class="on">item4</li>
    33. 

  33.         <li>item5</li>
    34. 

  34.     </ul>
    35. 

  35. </body>
    36.
  1. 上下文选择器
    

  1. <style>
    2. 

  2.         /* 上下文选择器，就是根据位置来选择 */
    3. 

  3.         /* 1.后代选择器,子子孙孙都选中 ： 空格 */
    4. 

  4.         ul li {
    5. 

  5.             background-color: lightblue;
    6. 

  6.         }
    7. 

    8. 

  8.         /* 2.子选择器 ：大于号 , 只匹配子一级，不匹配孙子 */
    9. 

  9.         body > ul > li {
    10. 

  10.             background-color: lightgreen;
    11. 

  11.         }
    12. 

  12.         /* 3.同级相邻选择器，加号 +  */
    13. 

  13.         .start + li {
    14. 

  14.             background-color: yellow;
    15. 

  15.         }
    16. 

  16.         /* 4.同级所有选择器， ~ 波浪线 */
    17. 

  17.         .start ~ li {
    18. 

  18.             background-color: yellow;
    19. 

  19.         }
    20. 

  20.     </style>
    21. 

  21. </head>
    22. 

  22. <body>
    23. 

  23.     <ul>
    24. 

  24.         <li>item1</li>
    25. 

  25.         <li class="start">item2</li>
    26. 

  26.         <li>item3</li>
    27. 

  27.         <li>item4
    28. 

  28.         <ul>
    29. 

  29.             <li>item4-1</li>
    30. 

  30.             <li>item4-2</li>
    31. 

  31.             <li>item4-3</li>
    32. 

  32.         </ul>
    33. 

  33.         </li>
    34. 

  34.         <li>item5</li>
    35. 

  35.     </ul>
    36. 

  36. </body>
    37.

上一篇： eaccelerator在php-fpm方式下，优化有关问题

下一篇： ubuntu系统，在终端命令行，有什么下令，可以编辑PHP程序

推荐阅读