HTML5仿微信朋友圈图片展示

1、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div class="container"><div class="header"> <div><img src="images/s1_m.jpg" /></div></div><div class="right_con"> <div class="demo"> <div class="my-gallery"> <figure> <a href="images/s1.jpg" data-size="800x1142"> <img src="images/s1_m.jpg" /> </a> </figure> <figure> <a href="images/s2.jpg" data-size="800x1142"> <img src="images/s2_m.jpg" /> </a> </figure> <figure> <a href="images/s3.jpg" data-size="800x1142"> <img src="images/s3_m.jpg" /> </a> </figure> <figure> <a href="images/s4.jpg" data-size="800x1142"> <img src="images/s4_m.jpg" /> </a> </figure> <figure> <a href="images/s5.jpg" data-size="800x1142"> <img src="images/s5_m.jpg" /> </a> </figure> <figure> <a href="images/s3.jpg" data-size="800x1142"> <img src="images/s3_m.jpg" /> </a> </figure> <figure> <a href="images/s4.jpg" data-size="800x1142"> <img src="images/s4_m.jpg" /> </a> </figure> <figure> <a href="images/s5.jpg" data-size="800x1142"> <img src="images/s5_m.jpg" /> </a> </figure> </div> <!--显示的位置--> <div class="fx_address">南京市建邺区</div> </div></div></div>

5、代码整体结构。