css练习--京东图片链接

一、效果

二、代码实例

1、注意事项

(1)实例中使用的图片为本地图片

(2)需要下载并导入相应的文件夹(注意文件夹的位置和内容)

(3)使用相对地址，请参考以前的文章

https://blog.csdn.net/comegoing_xin_lv/article/details/125686355

(4)图片链接(自行下载)

桃片糕：

https://cn.bing.com/images/search?view=detailV2&ccid=kOi5Dvsz&id=756716F6EFEB025630792DA41F3F156F1D5EF4A1&thid=OIP.kOi5Dvsz8Uh_F8t-1z51BwHaI6&mediaurl=https://p1.ssl.qhimg.com/t01510389d07a75cff2.jpg&exph=866&expw=720&q=桃片糕&simid=608025721496497960&FORM=IRPRST&ck=C14202444B96AC70C9DD822DE5B7E0F6&selectedIndex=0&ajaxhist=0&ajaxserp=0

铜锣烧：

https://cn.bing.com/images/search?view=detailV2&ccid=ZUSw8Fe3&id=8975D55FC5D0398E37327882EE46615A60644BA2&thid=OIP.ZUSw8Fe3aWAZO6cX2O22YQHaE-&mediaurl=https://p1.ssl.qhmsg.com/t01efd7ebbd4d411a0a.jpg&exph=859&expw=1280&q=铜锣烧&simid=608015061383145956&FORM=IRPRST&ck=A1A7F9A12F6EBBFEA79B50D0C4BF7FC8&selectedIndex=0&ajaxhist=0&ajaxserp=0

牛奶：

https://cn.bing.com/images/search?view=detailV2&ccid=SLQxctd+&id=351D251D2055ED113E912E2D85A4227160C3DB2F&thid=OIP.SLQxctd-QMmzwiXzfhUVpgHaLO&mediaurl=https://ts1.cn.mm.bing.net/th/id/R-C.48b43172d77e40c9b3c225f37e1515a6?rik=L9vDYHEipIUtLg&riu=http%3a%2f%2fsc.68design.net%2fphotoiles%252f201702%252fOu66gdbrAF.jpg%26ehk%3d80tqh1MU8V3i1fE2r7MsbHbxsoY6Jil8gXQohi%252fu0aU%253d%26risl%3d1%26pid%3dImgRaw%26r%3d0&exph=2426&expw=1600&q=%e7%89%9b%e5%a5%b6&simid=608002769187328322&FORM=IRPRST&ck=CBF44806813D1BF816E8D22C19EE898C&selectedIndex=1&ajaxhist=0&ajaxserp=0

2、代码