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

···
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="get" style="display: grid" style="display: grid; gap: 0.5em" onsubmit="return false;" >
<fieldset>
<legend>必填项</legend>
<div>
<label for="username">账号:</label>
<input type="text" id="username" name="username" autofocus required placeholder="不少于8位" value="username" />
</div>
<div>
<label for="psw">密码:</label>
<input type="password" id="psw" name="psw" />
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" />
</div>
</fieldset>
<div>
<label for="xinbie">xinbie:</label>
<input type="radio" name="man" value="male" />
<label for="">man</label>
<input type="radio" name="female" value="male" />
<label for="">nv</label>
</div>
<div>
<label for="aihao">aihao</label>
<input type="checkbox" name="hobby[]" id="pingpang" /><label for=””

  1. >pingpang</label
  2. >
  3. <input type="checkbox" name="hobby[]" id="lanqiu" /><label for=""
  4. >lanqiu</label
  5. >
  6. </div>
  7. <!-- xialakuang -->
  8. <div>
  9. <label for="level">xuaznhuiyuan:</label>
  10. <select name="level" id="">
  11. <option value="1">jinpai</option>
  12. <option value="2" selected>yinpai</option>
  13. <option value="3">tongpai</option>
  14. </select>
  15. </div>
  16. <div>
  17. <label for="">sousuo:</label>
  18. <input type="search" name="search" />
  19. <datalist>
  20. <option value="html"></option>
  21. </datalist>
  22. </div>
  23. <button>sub</button>
  24. </form>

</body>
</html>
<!-- 标签:labal,input,form,属性:type:redio,type:text,type:password,type:checkbox ru guo wo shi checkbox,name:hobby[] -->
···
效果图如下

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

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

3.1基本选择器

  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. <div class="aa1">
  11. <p id="today">today is a good day</p>
  12. <div class="aa2">
  13. <ul>
  14. <li>1</li>
  15. <li>2</li>
  16. </ul>
  17. </div>
  18. </div>
  19. <style>
  20. /* * {
  21. background-color: yellow;
  22. } */
  23. .aa1 {
  24. width: 100px;
  25. height: 50px;
  26. }
  27. #today {
  28. color: red;
  29. }
  30. p {
  31. font-size: 20px;
  32. }
  33. p,
  34. li {
  35. background-color: aqua;
  36. }
  37. </style>
  38. </body>
  39. </html>

效果如下

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

更多相关文章

  1. 0630作业
  2. 表单和CSS选择器的案例
  3. 实战:简单的注册页面与常用选择器
  4. 表单创建及CSS
  5. 简单表单与css选择器实战案例
  6. 注册表单实战案例
  7. HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的
  8. 表单以及选择器
  9. 实战简单的注册表单以及选择器的认识

随机推荐

  1. ANDROID Porting系列五、定制化
  2. Android——用户登陆及用户名和密码的保
  3. Android(安卓)Studio单元测试
  4. android AIDL服务
  5. Android入门系列(一)--Android的目录结构
  6. Android 模拟HTTP协议的编码问题 Android
  7. Android Studio使用教程、工程目录结构、
  8. Eclipse SDK 3.7.2无法安装android SDK
  9. Android与H5相机、相册笔记
  10. Android(安卓)NDK学习笔记3-入门案例篇