表单,框架,选择器,css的三种插入样式(内联,外部样式,元素中)

学习第三天

主要是,表单,选择器,css的三种插入样式,

  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>作业3</title>
  8. <style>
  9. h3{
  10. background:yellowgreen;
  11. width: 400px;
  12. height: 30px;
  13. }
  14. input{
  15. background:thistle;
  16. }
  17. label[id="phone1"]{
  18. background:yellow;
  19. }
  20. label[class="nichen"]{
  21. background:sienna;
  22. }
  23. input.nichen_inp{
  24. background:springgreen;
  25. }
  26. input#psw{
  27. background:slategray;
  28. }
  29. /* 上下文选择器 号码区号的位置*/
  30. select option{
  31. background:tomato;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <h3>欢迎注册,欢乐每一天</h3>
  37. <div>
  38. <form action="check.php" method="GET" style="display: grid;gap: 1em";>
  39. <fieldset>
  40. <legend>必填项</legend>
  41. <div>
  42. <label for="nichen" class="nichen">昵称:</label>
  43. <input type="text" class="nichen_inp" name="nichen" autofocus required placeholder="请输入你想要的名称" value="" id="nichen"/>
  44. </div>
  45. <div>
  46. <label for="psw">密码:</label>
  47. <input type="password" name="psw" placeholder="密码不可为空" id="psw"/>
  48. </div>
  49. <div>
  50. <label for="phone" id="phone1">手机:</label>
  51. <input type="tel" name="phone" placeholder="请输入你的11位手机号" id="phone"/>
  52. </div>
  53. <div>
  54. <label for="email1">邮箱:</label>
  55. <input type="email" name="email" id="email1" placeholder="请输入你的邮箱"/>
  56. <!-- label中的for="email1" 对应的是 input中的 di="eamil1"的值 -->
  57. </div>
  58. </fieldset>
  59. <fieldset>
  60. <legend>下面为选填项</legend>
  61. <div>
  62. <label for="secret">性别:</label>
  63. <label></label>
  64. <input type="radio" name="gender" value="male" id="">
  65. <label></label>
  66. <input type="radio" name="gender" value="female" id="">
  67. <label>保密</label>
  68. <input type="radio" name="gender" value="secret" checked id="secret">
  69. </div>
  70. <div>
  71. <select name="" id="">
  72. <option value="86" selected>中国+86</option>
  73. <option value="20">埃及+20</option>
  74. <option value="32">比利时+32</option>
  75. <option value="48">波兰+48</option>
  76. </select>
  77. <input type="tel" name="phone" placeholder="手机号"/>
  78. </div>
  79. <div>
  80. <label for="">个人兴趣:</label>
  81. <input type="checkbox" id="chess" name="hobby[]" checked><label for="chess">象棋</label></input>
  82. <input type="checkbox" id="game" name="hobby[]" checked><label for="game">游戏</label></input>
  83. <input type="checkbox" id="run" name="hobby[]" ><label for="run">跑步</label></input>
  84. <input type="checkbox" id="swim" name="hobby[]" ><label for="swim">游泳</label></input>
  85. </div>
  86. <div>
  87. <label for="">更多的兴趣:</label>
  88. <input type="search" name="search" id="search" list="keys">
  89. <datalist id="keys">
  90. <option value="美女"></option>
  91. <option value="野兽"></option>
  92. <option value="美酒"></option>
  93. <option value="帅哥"></option>
  94. </datalist>
  95. </div>
  96. </fieldset>
  97. <button>提交</button>
  98. </form>
  99. </div>
  100. <div style="width: 80%; height: 20px; background:tomato;">上面的颜色太乱了</div>
  101. <style>
  102. /* 后代选择器 */
  103. ul li{
  104. background:tomato;
  105. }
  106. /* 子选择器 */
  107. div > ul > li{
  108. background:rgb(7, 116, 206);
  109. }
  110. /* 同级相邻,作用于儿子3身上 */
  111. .son_2+li{
  112. background:rgb(128, 0, 49);
  113. }
  114. .son_6 ~ li{
  115. background:yellow;
  116. }
  117. </style>
  118. <div>
  119. <ul id="ul1" >
  120. <li>儿子1</li>
  121. <li class="son_2">儿子2</li>
  122. <li>儿子3</li>
  123. <li>儿子4
  124. <ul>
  125. <li class="son_4">孙子_1</li>
  126. <li>孙子_2</li>
  127. <li>孙子_3</li>
  128. <li>孙子_4</li>
  129. <li>孙子_5</li>
  130. <li>孙子_6</li>
  131. </ul>
  132. </li>
  133. <li>儿子5</li>
  134. <li class="son_6">儿子6</li>
  135. <li>儿子7</li>
  136. <li>儿子8</li>
  137. </ul>
  138. </div>
  139. </body>
  140. </html>