HTML + CSS 实现微信朋友圈图片效果

时间：2023-07-05 12:18:01 | 来源：网站运营

时间：2023-07-05 12:18:01 来源：网站运营

HTML + CSS 实现微信朋友圈图片效果：写一个HTTP+CSS 的小玩具以后有需要的话可以用上，

（本文章仅用于自己以后忘记可以回忆起来、以及前端小白练手用，并不涉及任何商业使用，并不会其中获利（其实这么个小玩具估计也没什么大佬愿意看，避免纠纷还是先说明吧）不是搬运，也没有获利！！！仅用于自己学习）







话不多说 开整




从零开始创建一个HTML文件（相信创建文件这种小问题，应该大家都会就不细说了）

知识点：

1、nth-child （n） 选择器

2、nth-last-child（n） 选择器

3、first-child 选择器

需要准备的文件有

1、空的html文件

2、空的css文件

3、一张图片（用于测试，随自己喜欢即可）

一、编写HTML样式

1、写入图片（左边为代码右边为浏览器显示效果）




3、添加九张图片进HTML文件中先注释掉八张图片便于后续模拟场景，并引入空白的CSS文件

(为了看出效果，特地把浏览器调小 能够看出多张图片)




二、开始设置样式

1、设置一张的显示效果 （占满div的全部显示）

2、设置两张的显示效果

使用first-child:nth-last-child(2) 表示这个图片必须是第一张并且是倒数第二张

使用nth-child(2):nth-last-child(1)表示图片必须是第二张并且是倒数第一张

下面的margin同上给第二张图片加上一点左外边距







3、设置三张的显示效果

使用first-child:nth-last-child(3) 表示这个图片必须是第一张并且是倒数第三张

使用nth-child(2):nth-last-child(2)表示图片必须是第二张并且是倒数第二张

使用nth-child(3):nth-last-child(1)表示图片必须是第三张并且是倒数第一张

给第二、第三张图片设置左外边框 使其美观

效果




4、设置四张的显示效果（由于微信朋友圈的上传四张图片不像前三张一样占比33%左右的大小 四张图片大约是两行各占50%左右大小的特性）

使用first-child:nth-last-child(4),表示这个图片必须是第一张并且是倒数第四张

使用first-child:nth-last-child(4)~img 表示第一张后面的所有图片

（如果去掉第44行的代码，第一张图片就会不受到样式的影响显示自己的大小）




分别给第二张 第四章 设置边距

效果




5、设置五张的显示效果（后面的图片基本都一样的大小了 就不需要一个一个设置了 ）

效果

（五张）

（七张）

(九张)







（tips：文章是原创，代码是借鉴抖音的一位UP主 抖音号：xiaoshan.bug 大佬不喜勿喷）




后面会研究出 JS 的 点击添加图片 动态效果