使用CSS/HTML制作网页中简单的图片列表

最新推荐文章于 2023-01-21 12:32:52 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2023-01-21 12:32:52 发布

阅读量1.1k

点赞数 1

分类专栏： HTML5 CSS3

本文链接：https://blog.csdn.net/m0_47015897/article/details/112980919

版权

CSS3 同时被 2 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

效果图：
在这里插入图片描述
源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片的列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            background-color: rgb(235, 226, 211);
        }
        .img-list{
            width: 190px;
            height: 470px;
            overflow: hidden;
            background-color:white;
            margin: 50px auto;
               
        }

        .img-list img{
            width: 190px;
            height: 150px;
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
    <ul class="img-list">
        <li>
            <a target="_blank" href="https://mall.jd.com/index-10175050.html">
                <img src="./img/01/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a target="_blank" href="https://mall.jd.com/index-10175050.html">
                <img src="./img/01/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a target="_blank" href="https://mall.jd.com/index-10175050.html">
                <img src="./img/01/3.jpg" alt="">
            </a>
        </li>
    </ul>
</body>
</html>

积跬步，至千里！
加油！上学人！

Etui۹(･༥･´)و ̑̑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用CSS/HTML制作网页中简单的图片列表

效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片的列表</title> <link rel="stylesheet" href=".
复制链接

扫一扫