资讯详情

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、代码

<!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>

标签: 92芯圆形连接器插座cx2

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台