一、效果

二、代码实例

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%3a%2f%2fp1.ssl.qhimg.com%2ft01510389d07a75cff2.jpg&exph=866&expw=720&q=%e6%a1%83%e7%89%87%e7%b3%95&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%3a%2f%2fp1.ssl.qhmsg.com%2ft01efd7ebbd4d411a0a.jpg&exph=859&expw=1280&q=%e9%93%9c%e9%94%a3%e7%83%a7&simid=608015061383145956&FORM=IRPRST&ck=A1A7F9A12F6EBBFEA79B50D0C4BF7FC8&selectedIndex=0&ajaxhist=0&ajaxserp=0

牛奶：

https://cn.bing.com/images/search?view=detailV2&ccid=SLQxctd%2b&id=351D251D2055ED113E912E2D85A4227160C3DB2F&thid=OIP.SLQxctd-QMmzwiXzfhUVpgHaLO&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.48b43172d77e40c9b3c225f37e1515a6%3frik%3dL9vDYHEipIUtLg%26riu%3dhttp%253a%252f%252fsc.68design.net%252fphotofiles%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>

前端练习--京东图片链接相关推荐

0005 前端 Html 04 AutoFileName 图片的显示文字链接图片链接页面内链接列表加超链接的列表
以下为学习笔记,用来备忘.交流工具:Sublime Text 3 渲染:谷歌浏览器 AutoFileName工具的安装安装过程参见添加Emmet插件参考我上面安装Emmet插件的过程,基本一样. ...
C#解析Markdown文档，实现替换图片链接操作
前言又是好久没写博客了其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...
php 采集京东图片,京东商品图片采集详细教程
本文介绍采集使用八爪鱼7.0采集京东商品图片的方法:首先将京东商品搜索结果网页中图片的URL采集下来,再通过八爪鱼专用的图片批量下载工具,将采集到的图片URL中的图片,下载并保存到本地电脑中. 采集网 ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
191210P4 Java富文本编辑之图片链接本地化
Java富文本编辑之图片链接本地化作者:邵发官网:http://afanihao.cn/java 本文介绍在图文混编项目中(博客.新闻等),如何将富文本中的图片外链转为本地链接的问题.本文是Jav ...
前端Vue压缩图片视频ZIP
项目要求数据的图片.表格.视频进行zip压缩打包,刚开始的时候是后端返回链接直接下载,有点消耗服务器带宽. 然后就想着后端直接返回数据的链接,前端浏览器进行处理. 因为后端返回来的是图片或者视频的链 ...
Java实现七牛云上传图片、读取图片链接
Java后端实现七牛云上传图片.读取图片链接添加依赖 <dependency><groupId>com.qiniu</groupI ...
前端之样式化链接、web字体
前端之样式化链接链接链接状态默认样式应用样式在链接后插入外部链接图标将链接样式化为按钮 Web字体查找字体免费的字体经销商在线字体服务 Web 字体使用下载字体(第一次用) 我下载 ...
图片链接或pdf链接通过浏览器打开时，有时可以直接预览，有时却是下载，为什么？
在前端开发中,有时候需要对一些文件链接进行特殊处理,比如对于一些图片链接或者PDF链接,有时我们需要通过浏览器打开进行预览,有时又不希望通过浏览器进行打开,而是希望能够直接下载到本地.但现实效果却往往 ...

前端练习--京东图片链接

一、效果

二、代码实例

1、注意事项

2、代码

前端练习--京东图片链接相关推荐

最新文章

热门文章