简单的注册和模块+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>Document</title>
  8. </head>
  9. <body>
  10. <h3>注册</h3>
  11. <form action="check.php" name="get" onsubmit="return false">
  12. <label for="username">账号:</label>
  13. <input
  14. type="text"
  15. id="username"
  16. name="username"
  17. autofocus
  18. required
  19. placeholder="至少6位以上"
  20. />
  21. <div>
  22. <label for="psw">密码:</label>
  23. <input
  24. type="password"
  25. id="psw"
  26. name="psw"
  27. required
  28. placeholder="至少6位以上"
  29. />
  30. </div>
  31. <div>
  32. <label for="email">邮箱注册:</label>
  33. <input
  34. type="email"
  35. name="email"
  36. id="email"
  37. autofocus
  38. required
  39. placeholder="123456@qq.com"
  40. />
  41. </div>
  42. <div>
  43. <label for="secret">性别:</label>
  44. <input type="radio" name="gender" value="male" /><label for=""
  45. ></label
  46. >
  47. <input type="radio" name="gender" value="female" /><label for=""
  48. ></label
  49. >
  50. <input
  51. type="radio"
  52. name="gender"
  53. value="secret"
  54. checked
  55. id="secret"
  56. /><label for="">保密</label>
  57. </div>
  58. <div>
  59. <label>爱好:</label>
  60. <input type="checkbox" name="hobby[]" id="game" /><label for=""
  61. >游戏</label
  62. >
  63. <input type="checkbox" name="hobby[]" id="trawe" checked /><label for=""
  64. >旅游</label
  65. >
  66. <input type="checkbox" name="hobby[]" id="shoos" checked /><label for=""
  67. >摄影</label
  68. >
  69. </div>
  70. <div>
  71. <select name="level" id="">
  72. <option value="1">黄牌</option>
  73. <option value="2">金牌</option>
  74. <option value="3" selected>钻石</option>
  75. </select>
  76. </div>
  77. <div>
  78. <label for="">搜索:</label>
  79. <input type="search" name="search" list="keywords" />
  80. <datalist id="keywords">
  81. <option value="美女"></option>
  82. <option value="丑八怪"></option>
  83. <option value="帅哥"></option>
  84. <option value="大哥"></option>
  85. <option value="大姐"></option>
  86. </datalist>
  87. </div>
  88. <button>提交</button>
  89. </form>
  90. </body>
  91. </html>

模块和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>模块和CSS选择器的使用</title>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. a {
  15. color: rgb(247, 16, 16);
  16. text-decoration: none;
  17. }
  18. body {
  19. height: 100vh;
  20. display: flex;
  21. flex-direction: column;
  22. }
  23. header {
  24. background: blueviolet;
  25. width: 100%;
  26. height: 80px;
  27. }
  28. main {
  29. background: burlywood;
  30. height: 500px;
  31. }
  32. li {
  33. background: cyan;
  34. margin-top: 15px;
  35. }
  36. li#foo {
  37. background: darkmagenta;
  38. }
  39. .start + li {
  40. background: rgb(211, 0, 130);
  41. }
  42. main > ul > li {
  43. background: darkslategray;
  44. }
  45. footer {
  46. background: coral;
  47. height: 150px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <header>页眉</header>
  53. <main>
  54. <ul>
  55. <li class="start">11</li>
  56. <li>22</li>
  57. <li id="foo">33</li>
  58. <li>
  59. 44
  60. <ul>
  61. <li>100</li>
  62. <li>200</li>
  63. <li>300</li>
  64. <li>400</li>
  65. <li>500</li>
  66. </ul>
  67. </li>
  68. <li>55</li>
  69. </ul>
  70. </main>
  71. <footer>页脚</footer>
  72. </body>
  73. </html>