grid空间自适应

亦凉 2022-10-09 06:26 9阅读 0赞

某个公司的面试题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]

<!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">
        <link rel="stylesheet" href="demo-files/demo.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <title>图片布局</title>
    </head>
    
    <body>
        <div class="content">
            <ul>
                <li>
                    <img src="./images/circle.png" alt="">
                    <p class="title">正负堆积条形图-数据标签</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/column.png" alt="">
                    <p class="title">有告警的-散点图</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/combination.png" alt="">
                    <p class="title">X轴是Attribute的散点图-告警</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/line.png" alt="">
                    <p class="title">气泡图啊啊啊</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/pivottable.png" alt="">
                    <p class="title">正负数条形图-数据标签</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/scatter.png" alt="">
                    <p class="title">正负堆积柱状图-标度范围</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/stackedbarcolumn.png" alt="">
                    <p class="title">百分比展示的双</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
                <li>
                    <img src="./images/stackedcolumn.png" alt="">
                    <p class="title">各个区域的啊啊</p>
                    <p class="domHover">
                        <button>编辑</button>
                        <span class="icon-favorite"></span><span class="icon-delete"></span>
                    </p>
                </li>
            </ul>
        </div>
    </body>
    <script>
        let list = document.getElementsByTagName("li");
        let domHover = document.getElementsByClassName("domHover");
        for (let i = 0; i < list.length; i++) { 
            list[i].onmouseover = function () { 
                this.classList.add("active")
                domHover[i].style.display = "block"
            };
            list[i].onmouseout = function () { 
                this.classList.remove("active")
                domHover[i].style.display = "none"
            };
        }
    </script>
    <style>
        ul,
        li,
        p { 
            margin: 0;
            padding: 0;
        }
    
        .content { 
            width: 100%;
            height: 100%;
        }
    
        .content ul { 
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
            margin: 15px;
            flex-wrap: wrap;
        }
    
        .content ul li { 
            width: 256px;
            height: 172px;
            list-style: none;
            border-radius: 20px;
            background-color: #F3F3F3;
            margin: 15px auto;
            cursor: pointer;
            position: relative;
        }
    
        .content ul li img { 
            width: 120px;
            height: 120px;
            margin: 5px 0;
            padding: 0 68px;
        }
    
        .content ul li .title { 
            color: #000000;
            font-size: 14px;
            line-height: 34px;
            padding: 0 10px;
            border-top: 1px solid #EEEEEE;
        }
    
        .content ul .active:before { 
            content: '';
            background: rgba(0, 0, 0, .6);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }
    
        .domHover { 
            display: none;
            margin: 0;
            padding: 0;
            border: none;
            position: absolute;
            top: 50px;
            left: 75px;
            text-align: center;
        }
    
        .domHover button { 
            width: 105px;
            height: 33px;
            border-radius: 5px;
            margin-bottom: 15px;
            display: block;
            border: none;
            background: #008FF8;
            box-shadow: none;
            color: #ffffff;
            cursor: pointer;
        }
    
        .domHover span { 
            display: inline-block;
            font-size: 16px;
            color: #ffffff;
        }
    
        .domHover span:hover { 
            color: #008FF8;
        }
    
        .domHover .icon-favorite { 
            margin-right: 15px;
        }
    </style>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: /images/20221005/647fe76c2d334dc9ac26ac2089bd1fff.png