HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的掌握

课程作业:

  1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

  2. 理解css模块的思想,并试写一个案例(选做)

  3. 实例演示基本选择器与上下文选择器

  4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等


课程内容:

1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

1.1 作业效果:

1.2 实操代码:

  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. <style>
  10. div {
  11. padding: 10px;
  12. }
  13. </style>
  14. <body>
  15. <h1>新用户注册登记表</h1>
  16. <form action="" method="post">
  17. <fieldset>
  18. <legend>1.用户账号信息(必填):</legend>
  19. <!-- 单行文本框 -->
  20. <div>
  21. <label for="username">注册账号:</label>
  22. <input
  23. type="text"
  24. id="username"
  25. autofocus
  26. required
  27. placeholder="必须是6-8位数"
  28. maxlength="8"
  29. />
  30. </div>
  31. <!-- 密码框 -->
  32. <div>
  33. <label for="password">用户密码:</label>
  34. <input
  35. type="password"
  36. id="password"
  37. required
  38. placeholder="必须是字母+数字的组合"
  39. />
  40. </div>
  41. </fieldset>
  42. <fieldset>
  43. <legend>2.其他个人信息</legend>
  44. <!-- 单选框 -->
  45. <div>
  46. <label for="">性别:</label>
  47. <input type="radio" name="gender" value="male" id="male" />
  48. <label></label>
  49. <input type="radio" name="gender" value="female" id="female" />
  50. <label></label>
  51. <input
  52. type="radio"
  53. name="gender"
  54. value="secret"
  55. id="secret"
  56. checked
  57. />
  58. <label>保密</label>
  59. </div>
  60. <!-- 多选框 -->
  61. <div>
  62. <label for="">爱好:</label>
  63. <!-- 因为允许同时提交多个值,所以name属性要写成数组格式 -->
  64. <input type="checkbox" name="hobby[]" id="meishi" /><label
  65. for="meishi"
  66. >美食</label
  67. >
  68. <input type="checkbox" name="hobby[]" id="lvyou" /><label for="lvyou"
  69. >旅游</label
  70. >
  71. <input type="checkbox" name="hobby[]" id="shuma" /><label for="shuma"
  72. >数码</label
  73. >
  74. <input type="checkbox" name="hobby[]" id="biancheng" checked /><label
  75. for="biancheng"
  76. >编程</label
  77. >
  78. </div>
  79. <!-- 下拉列表 -->
  80. <div>
  81. <label for="">目前的会员身份</label>
  82. <select name="level" id="">
  83. <option value="1" selected>不是会员</option>
  84. <option value="2">初级会员</option>
  85. <option value="3">中级会员</option>
  86. <option value="4">高级会员</option>
  87. </select>
  88. </div>
  89. <!-- 多行文本框 - 文本域 -->
  90. <div>
  91. <label for="jieshao">自我介绍:</label>
  92. <textarea
  93. name="jieshao"
  94. id="jieshao"
  95. cols="22"
  96. rows="5"
  97. placeholder="介绍一下你自己的经历"
  98. ></textarea>
  99. </div>
  100. </fieldset>
  101. <fieldset>
  102. <legend>3.附件上传</legend>
  103. <!-- 文件上传 -->
  104. <div>
  105. <label for="">照片上传:</label>
  106. <input type="file" name="userimg" />
  107. <input type="submit" value="点击上传图片" />
  108. </div>
  109. </fieldset>
  110. <fieldset>
  111. <legend>4.其他补充信息</legend>
  112. <!-- 日期选择控件 -->
  113. <div>
  114. <label for="">生日日期:</label>
  115. <input type="date" name="depart" />
  116. </div>
  117. <!-- 电子邮箱 -->
  118. <div>
  119. <label for="email">邮箱地址:</label>
  120. <input
  121. type="email"
  122. name="email"
  123. id="email"
  124. placeholder="demo@xxx.com"
  125. />
  126. </div>
  127. <!-- datalist 搜索框 自定义输入+预选 -->
  128. <div>
  129. <label for="">邀请人:</label>
  130. <input type="search" name="search" list="my-key" />
  131. <datalist id="my-key">
  132. <option value="张三"></option>
  133. <option value="李四"></option>
  134. <option value="王五"></option>
  135. </datalist>
  136. </div>
  137. </fieldset>
  138. <div>
  139. <input type="submit" name="touxiang" value="点击提交表单" />
  140. </div>
  141. </form>
  142. </body>
  143. </html>

2. 理解css模块的思想,并试写一个案例(选做)

CSS模块化是为了使开发者更好的维护代码,同时根据实际的需求按需加载,减少负荷、提高效率,可以实现分区独立控制;

作业内容:

作业代码:

  • 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= , initial-scale=1.0" />
  7. <title>CSS模块化开发</title>
  8. <link rel="stylesheet" href="css/style.css" />
  9. <!-- 另外一种引入方式 -->
  10. <!-- <style>
  11. @import url(css/style.css);
  12. </style> -->
  13. </head>
  14. <body>
  15. <!-- 页头 -->
  16. <header>
  17. <!-- 导航栏 -->
  18. <nav>
  19. <ul>
  20. <li>首页</li>
  21. <li>博客</li>
  22. <li>快讯</li>
  23. <li>友链</li>
  24. <li>关于</li>
  25. </ul>
  26. </nav>
  27. </header>
  28. <!-- 内容 -->
  29. <main>
  30. <p>
  31. php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
  32. </p>
  33. </main>
  34. <!-- 页脚 -->
  35. <footer>
  36. <ul>
  37. <li>友情链接</li>
  38. <li>关于我们</li>
  39. <li>最新资讯</li>
  40. </ul>
  41. </footer>
  42. </body>
  43. </html>
  • CSS文件代码4个

    • style.css 代码
  1. @import url(header.css);
  2. @import url(main.css);
  3. @import url(footer.css);
  • header.css \ main.css \ footer.css 代码
  1. footer {
  2. background: green;
  3. }

3. 实例演示基本选择器与上下文选择器

3.1 基本·选择器:

【标签】样式选择 - “ tag “

  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. <body>
  10. <div>
  11. <p>标签选择器</p>
  12. </div>
  13. </body>
  14. </html>

【属性】样式选择 - attribute

  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. /* 标签选择 */
  10. p {
  11. background: green;
  12. }
  13. /* 属性选择 */
  14. li[id="1"] {
  15. background: yellow;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div>
  21. <p class="content">标签选择器</p>
  22. <ul>
  23. <li id="1">属性选择器</li>
  24. <li>class选择器</li>
  25. <li>id选择器</li>
  26. </ul>
  27. </div>
  28. </body>
  29. </html>

  • 【类】样式选择 - “ class “

  • 【id】样式选择 - “ id “

3.2 上下文·选择器:

【后代】选择器 - “空格Space”

【子】选择器 - “ > “

【同级相邻】选择器 - “ + “

【同级所有】选择器 - “ ~ “

4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等

已预习