PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 数字九宫格作业

数字九宫格作业

寒夏
寒夏 原创
2022年05月10日 16:53:58 599浏览

  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>数字9官格</title>
  7. <style>
  8. .one{
  9. width: 385px;
  10. height: 385px;
  11. margin: auto;
  12. }
  13. .one1 div{
  14. width: 100px;
  15. height: 100px;
  16. /* border: 1px solid #000; */
  17. float: left;
  18. }
  19. .one1_1{
  20. background-image: url('./img/aa.jpg');
  21. background-position: -11px -8px;
  22. }
  23. .one1_2{
  24. background-image: url('./img/aa.jpg');
  25. background-position: -121px -126px;
  26. }
  27. .one1_3{
  28. background-image: url('./img/aa.jpg');
  29. background-position: -231px -244px;
  30. }
  31. .one1_4{
  32. background-image: url('./img/aa.jpg');
  33. background-position: -341px -362px;
  34. }
  35. .one1_5{
  36. background-image: url('./img/aa.jpg');
  37. background-position: -451px -480px;
  38. }
  39. .one1_6{
  40. background-image: url('./img/aa.jpg');
  41. background-position: -561px -598px;
  42. }
  43. .one1_7{
  44. background-image: url('./img/aa.jpg');
  45. background-position: -671px -716px;
  46. }
  47. .one1_8{
  48. background-image: url('./img/aa.jpg');
  49. background-position: -781px -834px;
  50. }
  51. .one1_9{
  52. background-image: url('./img/aa.jpg');
  53. background-position: -892px -953px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="one">
  59. <div class="one1">
  60. <div class="one1_1"></div>
  61. <div class="one1_2"></div>
  62. <div class="one1_3"></div>
  63. </div>
  64. <div class="one1">
  65. <div class="one1_4"></div>
  66. <div class="one1_5"></div>
  67. <div class="one1_6"></div>
  68. </div>
  69. <div class="one1">
  70. <div class="one1_7"></div>
  71. <div class="one1_8"></div>
  72. <div class="one1_9"></div>
  73. </div>
  74. </div>
  75. </body>
  76. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议