简单表单与css选择器实战案例

赶进度简写了,但源码不能减,赶上就好了


展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <!-- 设置背景颜色 -->
  10. <body bgcolor="skyblue" hight="100%" width="100%">
  11. <h2>用户名</h2>
  12. <!-- action是动作,递交给谁 -->
  13. <!-- method是默认提交方式 -->
  14. <form
  15. action="post.php"
  16. method="GET"
  17. style="display: grid; gap: 0.5em"
  18. onsubmit="return false;"
  19. >
  20. <fieldset>
  21. <!-- 表单分组 -->
  22. <legend>必填项</legend>
  23. <div>
  24. <label for="username">帐号</label>
  25. <input type="text" id="username" name="name" autofocus required
  26. placeholder="请输入4位-11位的用户名" minlength="4" maxlength="11"
  27. </div>
  28. <!-- autofocus获取焦点 -->
  29. <div>
  30. <label for="password">密码:</label>
  31. <input
  32. type="password"
  33. id="password"
  34. name="password"
  35. required
  36. placeholder="请输入8-20位的密码"
  37. minlength="8"
  38. maxlength="20"
  39. />
  40. </div>
  41. <div>
  42. <label for="email">邮箱:</label>
  43. <input
  44. type="email"
  45. id="email"
  46. name="email"
  47. required
  48. placeholder="wang@iqwq.cn"
  49. />
  50. </div>
  51. </fieldset>
  52. <fieldset>
  53. <!-- 表单再次分组 -->
  54. <legend>非必填项目</legend>
  55. <div>
  56. <!-- radio是单选按钮,所有单选按钮的name值都要一致 -->
  57. <label for="secret">身材</label>
  58. <input type="radio" name="gender" value="yes" />
  59. <label for="">好的</label>
  60. <input type="radio" name="gender" value="no" />
  61. <label for="">不好</label>
  62. <input
  63. type="radio"
  64. name="gender"
  65. value="secret"
  66. checked
  67. id="secret"
  68. />
  69. <label for="">保密</label>
  70. </div>
  71. <!-- checkbox是复选框,所有复选框的name值都要相同 -->
  72. <div>
  73. <label>喜欢游戏</label>
  74. <input type="checkbox" name="game[]" value="wangzhe" checked />
  75. <label for="wangzhe">王者荣耀</label>
  76. <input type="checkbox" name="game[]" value="heping" />
  77. <label for="heping">和平精英</label>
  78. <input type="checkbox" name="game[]" value="qiuqiu" checked />
  79. <label for="qiuqiu">球球大作战</label>
  80. <input type="checkbox" name="game[]" value="feiche" />
  81. <label for="feiche">QQ飞车</label>
  82. </div>
  83. <!-- <select></select>无论多少个值最后只会返回一个值,除非多选,selected下拉框的默认值 -->
  84. <div>
  85. <label for="" size="8px">王者段位</label>
  86. <select name="ranking" id="">
  87. <option value="1">倔强青铜</option>
  88. <option value="2">秩序白银</option>
  89. <option value="3">尊贵铂金</option>
  90. <option value="4">永恒钻石</option>
  91. <option value="5">最强王者</option>
  92. <option value="6">荣耀王者</option>
  93. <option value="7" selected>深渊王者</option>
  94. <option value="8">黑洞王者</option>
  95. </select>
  96. </div>
  97. <!-- <datalist>是数据列表格式</datalist> -->
  98. <!-- list是绑定的id的工具 -->
  99. <div>
  100. <label for="">搜索关键字</label>
  101. <input type="search" name="cearch" list="keywords" />
  102. <datalist id="keywords">
  103. <option value="浅忆"></option>
  104. <option value="浅忆记录"></option>
  105. <option value="浅忆雅舍"></option>
  106. <option value="浅忆空间"></option>
  107. <option value="浅忆笔录"></option>
  108. <option value="浅忆学的慢"></option>
  109. </datalist>
  110. </div>
  111. </fieldset>
  112. <button>提交</button>
  113. </form>
  114. </body>
  115. </html>

css样式的理解

CSS用于修饰网页

css分为3种样式

  1. 行内样式(内嵌样式)
  2. 内部样式(内联样式)
  3. 外部样式(外联样式)
行内样式(内嵌样式)
例如:

<div style="color:red"></div>

内部样式(内联样式)

例如:
  1. <style>
  2. bdoy{font-size:14px;}
  3. </style>

外部样式(外联样式)

例如:

<link type="text/css" rel="stylesheet" href="css文件路径.css"/>


基础的选择器

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  10. /* 标签选择器 */
  11. li {
  12. background-color: #4b88b8;
  13. }
  14. /* 快捷方式id选择器 */
  15. li#qy2 {
  16. background-color: #ff0000;
  17. }
  18. li[id="qy3"] {
  19. background-color: chocolate;
  20. }
  21. /* 快捷方式class选择器 */
  22. li.qy4 {
  23. background-color: chartreuse;
  24. }
  25. li[class="qy5"] {
  26. background-color: chocolate;
  27. }
  28. </style>
  29. <body>
  30. <ul>
  31. <li>浅忆好酷1</li>
  32. <li id="qy2">浅忆好酷2</li>
  33. <li id="qy3">浅忆好酷3</li>
  34. <li class="qy4">浅忆好酷4</li>
  35. <li class="qy5">浅忆好酷5</li>
  36. </ul>
  37. </body>
  38. </html>

上下文选择器

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. ul li {
  10. background-color: red;
  11. }
  12. body > ul > li {
  13. background-color: cyan;
  14. }
  15. .tongji + li {
  16. background: rgb(26, 235, 106);
  17. }
  18. .xianglin ~ li {
  19. background: rgb(172, 235, 26);
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <ul>
  25. <li>qinayi</li>
  26. <li class="xianglin">qinayi</li>
  27. <li>qinayi</li>
  28. <li>
  29. qinayi
  30. <ul>
  31. <li>浅忆1</li>
  32. <li>浅忆1</li>
  33. <li class="tongji">浅忆1</li>
  34. <li>浅忆1</li>
  35. </ul>
  36. </li>
  37. <li>qinayi</li>
  38. <li>qinayi</li>
  39. </ul>
  40. </body>
  41. </html>

哪里不对请多多指教,感谢老师!!!
勇敢浅忆,不怕困难