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

comegoing-归去兮来

已于 2022-07-31 09:02:29 修改

阅读量212

点赞数

分类专栏：前端基础练习文章标签： css 前端 html css3

于 2022-07-22 15:43:20 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125933652

版权

前端基础练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、效果

二、代码实例

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>