HTML + CSS 實(shí)現(xiàn)微信朋友圈圖片效果

時間：2023-07-05 12:18:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-07-05 12:18:01 來源：網(wǎng)站運(yùn)營

HTML + CSS 實(shí)現(xiàn)微信朋友圈圖片效果：寫一個HTTP+CSS 的小玩具以后有需要的話可以用上，

（本文章僅用于自己以后忘記可以回憶起來、以及前端小白練手用，并不涉及任何商業(yè)使用，并不會其中獲利（其實(shí)這么個小玩具估計也沒什么大佬愿意看，避免糾紛還是先說明吧）不是搬運(yùn)，也沒有獲利?。?！僅用于自己學(xué)習(xí)）







話不多說 開整




從零開始創(chuàng)建一個HTML文件（相信創(chuàng)建文件這種小問題，應(yīng)該大家都會就不細(xì)說了）

知識點(diǎn)：

1、nth-child （n） 選擇器

2、nth-last-child（n） 選擇器

3、first-child 選擇器

需要準(zhǔn)備的文件有

1、空的html文件

2、空的css文件

3、一張圖片（用于測試，隨自己喜歡即可）

一、編寫HTML樣式

1、寫入圖片（左邊為代碼右邊為瀏覽器顯示效果）




3、添加九張圖片進(jìn)HTML文件中先注釋掉八張圖片便于后續(xù)模擬場景，并引入空白的CSS文件

(為了看出效果，特地把瀏覽器調(diào)小 能夠看出多張圖片)




二、開始設(shè)置樣式

1、設(shè)置一張的顯示效果 （占滿div的全部顯示）

2、設(shè)置兩張的顯示效果

使用first-child:nth-last-child(2) 表示這個圖片必須是第一張并且是倒數(shù)第二張

使用nth-child(2):nth-last-child(1)表示圖片必須是第二張并且是倒數(shù)第一張

下面的margin同上給第二張圖片加上一點(diǎn)左外邊距







3、設(shè)置三張的顯示效果

使用first-child:nth-last-child(3) 表示這個圖片必須是第一張并且是倒數(shù)第三張

使用nth-child(2):nth-last-child(2)表示圖片必須是第二張并且是倒數(shù)第二張

使用nth-child(3):nth-last-child(1)表示圖片必須是第三張并且是倒數(shù)第一張

給第二、第三張圖片設(shè)置左外邊框 使其美觀

效果




4、設(shè)置四張的顯示效果（由于微信朋友圈的上傳四張圖片不像前三張一樣占比33%左右的大小 四張圖片大約是兩行各占50%左右大小的特性）

使用first-child:nth-last-child(4),表示這個圖片必須是第一張并且是倒數(shù)第四張

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

（如果去掉第44行的代碼，第一張圖片就會不受到樣式的影響顯示自己的大?。?br>



分別給第二張 第四章 設(shè)置邊距

效果




5、設(shè)置五張的顯示效果（后面的圖片基本都一樣的大小了 就不需要一個一個設(shè)置了 ）

效果

（五張）

（七張）

(九張)







（tips：文章是原創(chuàng)，代碼是借鑒抖音的一位UP主 抖音號：xiaoshan.bug 大佬不喜勿噴）




后面會研究出 JS 的 點(diǎn)擊添加圖片 動態(tài)效果