已解决
web前端——HTML+CSS实现九宫格
来自网友在路上 166866提问 提问时间：2023-11-07 00:53:17阅读次数： 66
最佳答案 问答题库668位专家为你答疑解惑
web前端——HTML+CSS实现九宫格
<!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>
查看全文
99%的人还看了
相似问题
- 图数据库Neo4J 中文分词查询及全文检索(建立全文索引)
- MongoDB 全文检索
- ElasticSearch 实现 全文检索 支持（PDF、TXT、Word、HTML等文件）通过 ingest-attachment 插件实现 文档的检索
- 2023年AI行业报告（附全文下载）
- mysql 全文检索 demo
- 软件开发全文档归档，开发、管理、实施、运维、服务巡检、信息安全、安全运维
- Android启动优化-全文详细
- 如何实现 Es 全文检索、高亮文本略缩处理
- Elasticsearch实现全文搜索的步骤和实现原理
- Elasticsearch（Es搜索（简单使用、全文查询、复合查询）、地理位置查询、特殊查询、聚合操作、桶聚合、管道聚合)
猜你感兴趣
版权申明
本文"web前端——HTML+CSS实现九宫格"：http://eshow365.cn/6-34084-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！