纯css设置九宫格排版

最新推荐文章于 2023-05-24 21:48:29 发布
겐호 3
最新推荐文章于 2023-05-24 21:48:29 发布
阅读量366
点赞数 1
分类专栏： css 文章标签： css html 前端
本文链接：https://blog.csdn.net/long321041080/article/details/122534052
版权
css 专栏收录该内容
5 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-top: 480px;
        }

        ul {
            padding: 0;
        }

        li {
            list-style: none;
            text-align: center;
            border: 1px solid;
            line-height: 80px;
        }

        /* grid */
        .grid_box {
            width: 300px;
        }

        .grid_ul {
            display: grid;
            grid-template-columns: 80px 80px 80px;
            grid-template-rows: 80px 80px 80px;
        }

        /* maigin */
        .margin_box {
            width: 300px;
        }

        .margin_ul {
            overflow: hidden;
            margin-right: -20px;
            margin-bottom: -20px;
            margin-top: 0;
        }

        .margin_ul li {
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        /* overflow */
        .overflow_box {
            width: 300px;
            overflow: hidden;
        }

        .overflow_ul {
            width: 320px;
            overflow: hidden;
            margin-bottom: -20px;
            margin-top: 0;
        }

        .overflow_box li {
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        /* child */
        .child_box {
            padding: 20px 10px;
            display: inline-block;
        }

        .child_ul {
            overflow: hidden;
            width: 300px;
            margin-bottom: -10px;
            margin-top: 0;
        }

        .child_box li {
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 10px;
            margin-bottom: 10px;
            border: none;
        }

        .child_box li div {
            background: rgba(255, 0, 0, 0.24);
            border-radius: 8px;
            text-align: center;
        }

        /* position  */
        .position_box {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 180px;
        }

        .position_box .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;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            font: 24px/30px bold 'microsoft yahei';
        }

        /* column九宫格 */
        .column_box ul {
            column-count: 3;
            -webkit-column-count: 3;
            -webkit-column-gap: 20px;
            -moz-column-gap: 20px;
            margin-bottom: -20px;
            margin-top: 0;
        }

        .column_box li {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
        }

        /* grid 九宫格 */
        .grid_box>.grid_ul {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .grid_ul>li {
            background-color: #eba;
        }

        .grid_ul>li:nth-child(odd) {
            background-color: #fab;
        }

        /* table 九宫格 */
        .table_box>.table_ul {
            display: table;
        }

        .table_ul li {
            display: table-row;
            background-color: #beffbe;
        }

        .table_ul li:nth-child(odd) {
            background-color: #bec3ff;
        }

        .table_ul li div {
            width: 80px;
            line-height: 80px;
            display: table-cell;
        }

        .table_ul li:nth-child(odd) div:nth-child(even) {
            background: #beffbe;
        }

        .table_ul li:nth-child(even) div:nth-child(even) {
            background: #bec3ff;
        }
        /* nth 九宫格 */
        .nth_box{
            overflow: hidden;
        }
        .nth_box ul{
            width: 300px;
        }
        .nth_box li{
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: #eee;
        }
        /* :nth-child(3n) ： 设置3以及3的倍数的li */
        .nth_box li:nth-child(3n){
            margin-right: 0;
        }
    </style>
</head>

<body>
    <!-- grid九宫格 -->
    <div class="grid_box">
        <p>grid九宫格</p>
        <ul class="grid_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <!-- margin负值九宫格 -->
    <div class="margin_box">
        <p>margin九宫格</p>
        <ul class="margin_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <!-- overflow九宫格 -->
    <div class="overflow_box">
        <p>overflow九宫格</p>
        <ul class="overflow_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <!-- child九宫格 -->
    <div class="child_box">
        <p>child九宫格</p>
        <ul class="child_ul">
            <li>
                <div>1</div>
            </li>
            <li>
                <div>2</div>
            </li>
            <li>
                <div>3</div>
            </li>
            <li>
                <div>4</div>
            </li>
            <li>
                <div>5</div>
            </li>
            <li>
                <div>6</div>
            </li>
            <li>
                <div>7</div>
            </li>
            <li>
                <div>8</div>
            </li>
            <li>
                <div>9</div>
            </li>
        </ul>
    </div>
    <!-- position九宫格 宽高使用百分比-->
    <div class="position_box">
        <p>百分比position九宫格</p>
        <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>
    <!-- column九宫格 -->
    <div class="column_box">
        <p>column九宫格</p>
        <ul class="column_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <!-- grid 九宫格 -->
    <div class="grid_box">
        <p>grid九宫格</p>
        <ul class="grid_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <!-- table 九宫格 -->
    <div class="table_box">
        <ul class="table_ul">
            <li>
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </li>
            <li>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </li>
            <li>
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </li>
        </ul>
    </div>
    <!-- nth-child 九宫格 -->
    <div class="nth_box">
        <ul class="nth_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
</body>

</html>
个人学习及日常摘录笔记
摘自：原文链接css布局 - 九宫格布局的方法汇总（更新中...） - xing.org1^ - 博客园