admin 管理员组

文章数量: 1086055

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

下面是代码图片有注释

<!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="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5r4Lb.QgZ08Q2MaqTrmb238kgn8i.yezeOhv3PLX7RvU8kDS1lt43CKGxr0yw65DJAfcOcVAwRT5CccVAox.*ic!/m&bo=BAJbAQAAAAABB3w!&rf=viewer_4&t=5" alt=""></div><div class="picture2"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGC4Rf5363GIilAvUtK8g04ZGEhkslpo8vVlP.sQhaK8oDBUgCPdKc*elXzgio*HsEY!/m&bo=*QCoAAAAAAADB3c!&rf=viewer_4&t=5" alt=""></div><div class="picture3"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5gnhX2D*wonuCPfT3tWbxFQf8Q8reZYrHwzReBMitEMU0SzMUjZ9NRqinarH8nNfK7Ir4tEuZpYptooqidxudwE!/m&bo=*gCoAAAAAAABB3Y!&rf=viewer_4&t=5" alt="qq空间图片加载缓慢,wait a minute~"></div><div class="picture4"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGCFGQ4oBMjkiVwCYm8y9my.PIB3HSblObOFH0aBYlBTpR1ILpknbRBAnMrwcQI.x48!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt=""></div><div class="picture5"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGCBSEnvQ*FS4pZjiXg*gyrQYqa.3qiElk29FRDEyJG.T53t2k2Wv1dYGDLqjgzTl2E!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt=""></div><div class="picture6"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5gnhX2D*wonuCPfT3tWbxFSBa3zXNsaP7HdYFlwP1OPa3kQH6bBtm25ViaVKiMSTVgTQmfD5MU1tLWqaKzsD7qA!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt=""></div><div class="picture7"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5hCMmiBUbjxc3oQDgZSoPGAAaJ15ru8cB7bntOyGZX3WCcQf9VnF1yb75SQqYm3RDWbf9Y6FkKtkHBWU6YOfQyM!/b&bo=*gCoAAAAAAABF2Y!&rf=viewer_4&t=5" alt=""></div><div class="picture8"><img src="?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5gnhX2D*wonuCPfT3tWbxFQ57IxO7kKF*Ycr25KC8g*myGtNiZccOkUBaxFrfnoGBvOiY7um477dOOqqcCLqYWY!/b&bo=*gBbAQAAAAABF5Q!&rf=viewer_4&t=5" alt=""></div></div>
</body>
</html>

这里是运行效果：

 

本文标签： 实现图片分块格子排列效果

版权声明：本文标题：实现图片分块格子排列效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693762342a241347.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。