◆※◆迷蝶原创◆※◆形影相随美化空间技巧

媛媛教程

 









           形影相随美化空间技巧
   图片





 原来这篇日志只发了几组效果图，现在大家都说不懂想学，

今天我就来作个简单的说明，希望大家能看懂！

 

下面是原图，为了不占地方我缩小了，原图是700*750

 

 

效果图一

 

 

效果一代码如下

<div style="MARGIN: 10px 10px 0px 100px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="7" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 150px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="8" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 200px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="9" data-src="图片地址"></div>
<div style="MARGIN: -668px 0px 0px 250px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="10" data-src="图片地址"></div>
      <div style="MARGIN: -668px 0px 0px 300px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-img-idx="11" data-src="图片地址"></div></td>

效果图二

 

效果二代码如下

<div style="MARGIN: 300px 0px 0px 300px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="2"></div>
<div style="MARGIN: -668px 0px 0px 250px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="3"></div>
<div style="MARGIN: -668px 0px 0px 200px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="4"></div>
<div style="MARGIN: -668px 0px 0px 150px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="5"></div>
                  <div style="MARGIN: -668px 0px 0px 100px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="图片地址" data-src="图片地址" data-img-idx="6"></div></td>

这是我去掉了里面图片的代码

<div style="MARGIN: 300px 0px 0px 300px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="2"></div>
<div style="MARGIN: -668px 0px 0px 250px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="3"></div>
<div style="MARGIN: -668px 0px 0px 200px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="4"></div>
<div style="MARGIN: -668px 0px 0px 150px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="5"></div>
                  <div style="MARGIN: -668px 0px 0px 100px" align=left><IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MAX-WIDTH: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="✿陌蝶浅舞♪ QQ：923093366" src="同一张图片地址" data-src="同一张图片地址" data-img-idx="6"></div></td>

代码说明：

红颜色代表：组图的样式变化    蓝颜色代表：定位     

紫颜色代表：图片地址   浅蓝颜色代表：排列的顺序
和密度（间距）， 在制作当中你喜欢的图片
不一定就是我这种图片的大小
那么就需要你自己按我说的那些调整数值，

如果精通代码的是可以调整出很多种样式的，
废话就不多说了，在这里我就以两组不同的
图片为例，附有代码应该都懂的，上面两种图片
如果大家喜欢就在我相册里拿

如有不懂在本日志下留言，我会回复的

不要发聊天窗口，弹出来的对话框太多

我一般不看关掉了，对不起！见谅！



素材/网络        制作/浅浅舞
 
图片


◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆
◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆※◆
图片 

文章评论