css 高度自适应的九宫格效果

来源：互联网发布：手机版希沃白板软件编辑：程序博客网时间：2024/05/19 11:49

<!doctype html><html><head><meta charset="utf-8"><title>高度自适应的九宫格效果</title><style>html, body { height: 100%; margin: 0; }.page {    position: absolute;left: 0; top: 0; right: 0; bottom: 0;}.list {float: left;height: 33.3%; width: 33.3%;position: relative;}.list:before {content: '';position: absolute;left: 10px; right: 10px; top: 10px; bottom: 10px;border-radius: 10px;background-color: #cad5eb;}.list:after {content:attr(data-index);position: absolute;height: 30px;left: 0; right: 0; top: 0; bottom: 0;margin: auto;text-align: center;font: 24px/30px bold 'microsoft yahei';}</style></head><body><div class="page"><div class="list" data-index="1"></div>    <div class="list" data-index="2"></div>    <div class="list" data-index="3"></div>    <div class="list" data-index="4"></div>    <div class="list" data-index="5"></div>    <div class="list" data-index="6"></div>    <div class="list" data-index="7"></div>    <div class="list" data-index="8"></div>    <div class="list" data-index="9"></div></div></body></html>

0 0