实现图片分块格子排列效果

最新推荐文章于 2024-07-13 11:50:40 发布

滕沐泽

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量375

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_48326292/article/details/127567534

版权

下面是代码图片有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="22201010902滕欣宇的四级项目2a2">
    <title>四级项目2a2</title>
    <style>
        .includeAll{
            width: 1088px;
            height: 563px;
            margin: auto;/*盒子页面居中显示*/
            position: relative;/*设置父元素定位.相对定位,相对原文档流定位*/
            background-color: whitesmoke;
            box-shadow: 0 0 5px;/*设置阴影*/
        }/*最外部盒子,父亲*/
        .picture1{
            position: absolute;/*相对于已经定位的includeAll进行定位*/
            width: 515px;
            height: 347px;
            margin: 5px 550px 211px 22px;
        }
        .picture2{
            position: absolute;
            width: 252px;
            height: 167px;
            margin: 364px 814px 30px 22px;
        }
        .picture3{
            position: absolute;
            width: 252px;
            height: 167px;
            margin: 364px 552px 30px 284px;
        }
        .picture4{
            position: absolute;
            width: 252px;
            height: 167px;
            margin: 5px 288px 390px 546px;
        }
        .picture5{
            position: absolute;
            width: 252px;
            height: 167px;
            margin: 185px 288px 211px 546px;
        }
        .picture6{
            position: absolute;
            width: 252px;
            height: 167px;
            margin: 364px 288px 30px 546px;
        }
        .picture7{
            position: absolute;
            width: 252px;
            height: 167px;
            margin: 5px 25px 390px 809px;
        }
        .picture8{
            position: absolute;
            width: 252px;
            height: 346px;
            margin: 185px 25px 30px 809px;
        }
        img{
            width: 100%;
            height: 100%;
        }/*让图片灌满盒子*/
    </style>   
</head>
<body>
    <div class="includeAll">
        <div class="picture1">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5r4Lb.QgZ08Q2MaqTrmb238kgn8i.yezeOhv3PLX7RvU8kDS1lt43CKGxr0yw65DJAfcOcVAwRT5CccVAox.*ic!/m&bo=BAJbAQAAAAABB3w!&rf=viewer_4&t=5" alt="">
        </div>
        <div class="picture2">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGC4Rf5363GIilAvUtK8g04ZGEhkslpo8vVlP.sQhaK8oDBUgCPdKc*elXzgio*HsEY!/m&bo=*QCoAAAAAAADB3c!&rf=viewer_4&t=5" alt="">
        </div>
        <div class="picture3">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5gnhX2D*wonuCPfT3tWbxFQf8Q8reZYrHwzReBMitEMU0SzMUjZ9NRqinarH8nNfK7Ir4tEuZpYptooqidxudwE!/m&bo=*gCoAAAAAAABB3Y!&rf=viewer_4&t=5" alt="qq空间图片加载缓慢,wait a minute~">
        </div>
        <div class="picture4">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGCFGQ4oBMjkiVwCYm8y9my.PIB3HSblObOFH0aBYlBTpR1ILpknbRBAnMrwcQI.x48!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt="">
        </div>
        <div class="picture5">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGCBSEnvQ*FS4pZjiXg*gyrQYqa.3qiElk29FRDEyJG.T53t2k2Wv1dYGDLqjgzTl2E!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt="">
        </div>
        <div class="picture6">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5gnhX2D*wonuCPfT3tWbxFSBa3zXNsaP7HdYFlwP1OPa3kQH6bBtm25ViaVKiMSTVgTQmfD5MU1tLWqaKzsD7qA!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt="">
        </div>
        <div class="picture7">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGAAaJ15ru8cB7bntOyGZX3WCcQf9VnF1yb75SQqYm3RDWbf9Y6FkKtkHBWU6YOfQyM!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt="">
        </div>
        <div class="picture8">
            <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5gnhX2D*wonuCPfT3tWbxFQ57IxO7kKF*Ycr25KC8g*myGtNiZccOkUBaxFrfnoGBvOiY7um477dOOqqcCLqYWY!/b&bo=*gBbAQAAAAABF5Q!&rf=viewer_4&t=5" alt="">
        </div>
    </div>
</body>
</html>

这里是运行效果：