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

下面是代码图片有注释

<!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>

这里是运行效果：

实现图片分块格子排列效果相关推荐

利用echarts实现心形图片排列效果
内容简介前几天看到一篇文章,利用echarts来实现气泡龙的效果,觉得可以从这个例子衍生出使用不同背景图来实现不同排版的效果:本文介绍利用该思路实现心形图片的排列效果. 实现过程实 ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
Latex 图片及表格排列代码
Latex 图片及表格排列代码前言一.图片排版 1. 双栏论文中,两张图片横放 2. 单栏格式论文中的两张图片并列横放 3. 双栏格式论文中的两张图片竖放二.表格排版 1. 单栏论文,表格排列 ...
微信小程序（游戏）----拖拽拼图（图片分块和打乱顺序）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 效果图图片分块创建二维数组 typeArr 和一维有序数组 pointsArr: 计算每个块区v ...
为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
类似QQ管家页面jquery图片显隐轮换效果
一晃端午节又过去了,又得开始新的工作累人啊. 这两天jquery博客有不少感慨,感觉人有时要是言而无信,那不管做什么事情都不会成功的,觉得,既然说出口了,或者,暗暗下决心做了,就一定做成功.如果不行, ...
如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
html一张图片用两种滤镜,HTML图片CSS滤镜—灰度效果
this.p={ m:2, b:2, loftPermalink:'', id:'fks_082065087087086069087082087095083084084067083083082065' ...

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

实现图片分块格子排列效果相关推荐

最新文章

热门文章