练习1_正方形.html 1001 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 100px;
  10. height: 100px;
  11. background-color:red;
  12. }
  13. .box2{
  14. background-color: blue;
  15. padding-bottom: 100px;
  16. width: 100px;
  17. }
  18. .box3{
  19. width: 100px;
  20. background-color: yellow;
  21. }
  22. .box3::after{
  23. content: "";
  24. display: block;
  25. padding-bottom: 100%;
  26. }
  27. .box4{
  28. width: 100px;
  29. background-color: green;
  30. }
  31. .box4::after{
  32. content: "";
  33. display: block;
  34. padding-bottom: 100%;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="box"></div>
  40. <div class="box2"></div>
  41. <div class="box3"></div>
  42. <div class="box4"></div>
  43. </body>
  44. </html>