表单案例和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. <style>
  9. #box {
  10. width: 500px;
  11. margin: 0 auto;
  12. text-align: center;
  13. background-color: white;
  14. }
  15. header {
  16. width: 500px;
  17. height: 50px;
  18. background-color: blueviolet;
  19. line-height: 15px;
  20. color: white;
  21. }
  22. header>h2 {
  23. padding-top: 15px;
  24. }
  25. #box>main input {
  26. margin: 10px;
  27. }
  28. main {
  29. background-color: #e74c3c;
  30. color: white;
  31. font-weight: bold;
  32. }
  33. input {
  34. outline: none;
  35. }
  36. .love{
  37. margin-left: 30px;
  38. }
  39. .xialaik{
  40. margin-left: -45px;
  41. }
  42. .zhuc{
  43. display: flex;
  44. }
  45. .zhuc>input{
  46. flex: 1;
  47. }
  48. </style>
  49. </head>
  50. <body style="background-color: #34495e;">
  51. <div id="box">
  52. <header>
  53. <h2>用户注册</h2>
  54. </header>
  55. <main>
  56. <form action="">
  57. <fieldset>
  58. <legend>必填项</legend>
  59. <label for="username">账号:</label> <input type="text" id="username" required name="username"> <br>
  60. <label for="password">密码:</label> <input type="password" id="password" required name="password">
  61. <br>
  62. <label for="ea">邮箱:</label> <input type="email" id="ea" name="email" required> <br>
  63. </fieldset>
  64. <div class="xingbie">
  65. <label for="">性别:</label>
  66. <label for="male"></label> <input type="radio" name="gander" id="male">
  67. <label for="meal"></label> <input type="radio" name="gander" id="meal">
  68. <label for="baoli"></label> <input type="radio" name="gander" id="baoli">
  69. </div>
  70. <div class="love">
  71. <label for="">爱好:</label>
  72. <label for="game">游戏</label> <input type="checkbox" id="game">
  73. <label for="eat"></label> <input type="checkbox" id="eat">
  74. <label for="摄影">摄影</label> <input type="checkbox" id="摄影">
  75. </div>
  76. <div class="xialaik">
  77. <label for="dq">地区:</label>
  78. <select name="" id="dq">
  79. <option value="请选择地区">...请选择地区...</option>
  80. <option value="请选择地区">德玛西亚</option>
  81. <option value="请选择地区">恕瑞玛</option>
  82. <option value="请选择地区">弗雷尔卓德</option>
  83. </select>
  84. </div>
  85. <div class="zhuc">
  86. <input type="submit" value="立即注册">
  87. </div>
  88. </form>
  89. </main>
  90. </div>
  91. </body>
  92. </html>

css模块化

效果

index.html

  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. <link rel="stylesheet" href="./style.css">
  9. </head>
  10. <body>
  11. <header>头部</header>
  12. <main>主体</main>
  13. <footer>底部</footer>
  14. </body>
  15. </html>

style.css

  1. @import url(./footer.css);
  2. @import url(./reset.css);
  3. @import url(./heade.css);
  4. @import url(./main.css);

footer.css

  1. footer{
  2. display: flex;
  3. height: 600px;
  4. background-color: darkorange;
  5. }

reset.css

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }

heade.css

  1. header{
  2. display: flex;
  3. background-color:aqua;
  4. height: 500px;
  5. }

main.css

  1. main{
  2. display: flex;
  3. height: 400px;
  4. background-color: blueviolet;
  5. }

选择器

效果

代码

  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. <style>
  9. /* 标签选择器 */
  10. p {
  11. color: aqua;
  12. }
  13. /* id选择器 */
  14. #box {
  15. width: 600px;
  16. height: 500px;
  17. background-color: firebrick;
  18. margin: 0 auto;
  19. }
  20. /* 类选择器 */
  21. .list {
  22. list-style-type: none;
  23. color: white;
  24. }
  25. /* 属性选择器 */
  26. .list>li[id="foo"] {
  27. background-color: fuchsia;
  28. }
  29. /* 后代选择器 */
  30. .list li {
  31. background-color: gold;
  32. }
  33. /* 子代选择器 */
  34. .list>li {
  35. background-color: gray;
  36. }
  37. /* 兄弟选择器 */
  38. .list>#foo+li {
  39. background-color: tomato;
  40. }
  41. /* 同级选择器 */
  42. .w~p {
  43. background-color: forestgreen;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div id="box">
  49. <p>我是段落</p>
  50. <ul class="list">
  51. <li id="foo">1</li>
  52. <li>2</li>
  53. <li>3</li>
  54. <li>4</li>
  55. <li>5</li>
  56. <ul>
  57. <li>6</li>
  58. <li>7</li>
  59. </ul>
  60. </ul>
  61. <div class="w">
  62. <p>我是段落啊啊啊</p>
  63. <p>我是段落啊啊啊</p>
  64. <p>我是段落啊啊啊</p>
  65. </div>
  66. </div>
  67. </body>
  68. </html>