注册表单、基本选择器及上下文选择器

  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. <style>
  9. .input{
  10. padding:5px;
  11. }
  12. .btn{background: #007aff;color: #fff;border:none;}
  13. ul li{color:red;}
  14. .item{color:#007aff;}
  15. #item2{color:yellow;}
  16. ul .item3 + li{
  17. color:blue;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <form action="">
  23. <div>
  24. <label for="username">用户名</label>
  25. <input class="input" type="text" id="username" name="username" placeholder="请输入用户名" autofocus required>
  26. </div>
  27. <div>
  28. <label for="password">密 码</label>
  29. <input class="input" type="password" id="password" name="password" placeholder="请输入密码" required>
  30. </div>
  31. <div>
  32. <label for="email">邮 箱</label>
  33. <input class="input" type="email" id="email" name="email" placeholder="请输入邮箱">
  34. </div>
  35. <div>
  36. <label for="aihao">VIP</label>
  37. <select name="aihao" id="aihao">
  38. <option value="1" selected>普通会员</option>
  39. <option value="2">至尊会员</option>
  40. </select>
  41. </div>
  42. <div>
  43. <label for="search">搜索</label>
  44. <input type="search" name="search" id="search" placeholder="请输入关键词" list="datalist">
  45. <datalist id="datalist">
  46. <option value="html"></option>
  47. <option value="js"></option>
  48. <option value="jquery"></option>
  49. <option value="mysql"></option>
  50. <option value="php"></option>
  51. </datalist>
  52. </div>
  53. <div>
  54. <label for="man">性 别</label>
  55. <input type="radio" checked name="radio" id="man" value="man"><label for="man"></label>
  56. <input type="radio" name="radio" id="woman" value="woman"><label for="women"></label>
  57. <input type="radio" name="radio" id="noman" value="noman"><label for="noman">人妖</label>
  58. </div>
  59. <div>
  60. <label for="xq">兴趣</label>
  61. <input type="checkbox" name="checkbox[]" id="meinv" value="1"><label for="meinv">美女</label>
  62. <input type="checkbox" name="checkbox[]" id="video" value="2"><label for="video">电影</label>
  63. <input type="checkbox" name="checkbox[]" id="lvyou" value="3"><label for="lvyou">旅游</label>
  64. <input type="checkbox" name="checkbox[]" id="game" value="4"><label for="game">游戏</label>
  65. </div>
  66. <div>
  67. <button type="submit" class="btn">注册</button>
  68. </div>
  69. </form>
  70. <div>
  71. <ul>
  72. <li class="item">item1</li>
  73. <li id="item2">item1</li>
  74. <li class="item3">item1</li>
  75. <li>item1</li>
  76. <li>item1</li>
  77. </ul>
  78. </div>
  79. </body>
  80. </html>