web前端——HTML+CSS实现九宫格

手机
2025-08-14 18:18:03

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: rgb(224, 212, 203); } .container { width: 300px; height: 300px; display: flex; flex-wrap: wrap; } .container .item { position: relative; box-sizing: border-box; width: 100px; height: 100px; border: 2px solid white; background-image: url(A.jpg); background-size: 300px 300px; } .container .item:nth-child(3n+1) { left: -10px; } .container .item:nth-child(3n+2) { left: 0px; background-position-x: -100px; } .container .item:nth-child(3n+3) { left: 10px; background-position-x: -200px; } .container .item { top: 10px; background-position-y: -200px; } .container .item:nth-child(-n+6) { top: 0px; background-position-y: -100px; } .container .item:nth-child(-n+3) { top: -10px; background-position-y: 0px; } </style> </head> <body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>

标签：

web前端——HTML+CSS实现九宫格由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“web前端——HTML+CSS实现九宫格”

上一篇
如何恢复已删除的PDF文件？4个常用方法分享（含操作步骤）！

下一篇
iOSNSKeyedUnarchiver归档和读取