博主信息
博文 7
粉丝 0
评论 0
访问量 5584
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
php学习第三天
Lank的博客
原创
654人浏览过

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. <h3>用户注册</h3>
  11. <form
  12. action=""
  13. method="get"
  14. style="display: grid"
  15. style="display: grid; gap: 0.5em"
  16. onsubmit="return false;"
  17. >
  18. <fieldset>
  19. <legend>必填项</legend>
  20. <div>
  21. <label for="username">账号:</label>
  22. <input
  23. type="text"
  24. id="username"
  25. name="username"
  26. autofocus
  27. required
  28. placeholder="不少于8位"
  29. value="username"
  30. />
  31. </div>
  32. <div>
  33. <label for="psw">密码:</label>
  34. <input type="password" id="psw" name="psw" />
  35. </div>
  36. <div>
  37. <label for="email">邮箱:</label>
  38. <input type="email" id="email" name="email" />
  39. </div>
  40. </fieldset>
  41. <div>
  42. <label for="xinbie">xinbie:</label>
  43. <input type="radio" name="man" value="male" />
  44. <label for="">man</label>
  45. <input type="radio" name="female" value="male" />
  46. <label for="">nv</label>
  47. </div>
  48. <div>
  49. <label for="aihao">aihao</label>
  50. <input type="checkbox" name="hobby[]" id="pingpang" /><label for=""
  51. >pingpang</label
  52. >
  53. <input type="checkbox" name="hobby[]" id="lanqiu" /><label for=""
  54. >lanqiu</label
  55. >
  56. </div>
  57. <!-- xialakuang -->
  58. <div>
  59. <label for="level">xuaznhuiyuan:</label>
  60. <select name="level" id="">
  61. <option value="1">jinpai</option>
  62. <option value="2" selected>yinpai</option>
  63. <option value="3">tongpai</option>
  64. </select>
  65. </div>
  66. <div>
  67. <label for="">sousuo:</label>
  68. <input type="search" name="search" />
  69. <datalist>
  70. <option value="html"></option>
  71. </datalist>
  72. </div>
  73. <button>sub</button>
  74. </form>
  75. </body>
  76. </html>
  77. <!-- 标签:labal,input,form,
  78. 属性:type:redio,type:text,type:password,type:checkbox
  79. 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样式设置,盒模型知识等;

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学