css 实现九宫格
1.自己写了一个，写完对比了下别人写的发现自己写的太low.故就不写自己太差劲的了。
别人写的我总结优化了一下，如果不用写内容去掉position,content简单也是可以的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> .box-wrap { text-align: center; background-color: #d4d4f5; border:1px solid #FF0000; overflow: hidden; /*为了清除浮动*/ } .box-wrap>div { width: 31.33%; padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/ margin:1%; border-radius: 10%; float: left; background-color: orange; position:relative; } .content { position:absolute; width:100%; height:100%; border-radius: 10%; } </style> </head> <body> <div class="box-wrap"> <div class="box"> <div class="content">格子1</div> </div> <div class="box"> <div class="content">格子2</div> </div> <div class="box"> <div class="content">格子3</div> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>
2.也可以使用伪元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> .box-wrap { text-align: center; background-color: #d4d4f5; border:1px solid #FF0000; overflow: hidden; /*为了清除浮动*/ } .box-wrap>div { width: 31.33%; padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/ margin:1%; border-radius: 10%; float: left; background-color: orange; position:relative; } .box:after { position:absolute; content:"格子"; display:block; width:100%; height:100%; border-radius: 10%; } </style> </head> <body> <div class="box-wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）