一、效果
二、代码实例
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、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东图片</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul{
width: 400px;
height: 400px;
list-style: none;
}
ul img{
width: 100%;
}
ul li{
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="https://item.jd.com/1067048.html">
<img src="../src/milk.jpg" alt="牛奶" >
</a>
</li>
<li>
<a href="https://item.jd.com/10056340475945.html">
<img src="../src/taopiangao.jpg" alt="桃片糕" >
</a>
</li>
<li>
<a href="https://item.jd.com/3230143.html">
<img src="../src/tongluoshao.jpg" alt="铜锣烧" >
</a>
</li>
</ul>
</body>
</html>