博客列表 >表单与盒模型

表单与盒模型

白鸽
白鸽原创
2022年10月24日 14:38:39319浏览

表单与盒模型

  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. .bt input:hover{
  10. background-color:lightblue;
  11. }
  12. .bt input:focus{
  13. background:#FFF;
  14. }
  15. .box{
  16. margin: 50px;
  17. padding: 10px;
  18. border: 5px solid #F9f;
  19. width: 500px;
  20. height: 100px;
  21. background-color: #ffD;
  22. }
  23. #boxa{
  24. margin: 0;
  25. padding: 50px;
  26. border: 1px solid #f00;
  27. background-color: #f9e;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <form class="bt" action="" method="post">
  33. <input type="text">
  34. <br>
  35. <input type="text">
  36. </form>
  37. <hr>
  38. <div class="box">我是一个大盒子</div>
  39. <div id="boxa">我是另外一个大盒子</div>
  40. </body>
  41. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议