HTML+css制作简易图片库

最新推荐文章于 2024-07-26 14:13:59 发布

Lying01-

最新推荐文章于 2024-07-26 14:13:59 发布

阅读量3.2k

点赞数 3

分类专栏： html5 css 文章标签： css html

本文链接：https://blog.csdn.net/qq_32814941/article/details/71639179

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

CSS

<style>
    div.img {
        float:left;
        margin: 10px;
        border:1px solid #bebebe;
    }
    div.img img{
        display: inline;
        border:1px solid #bebebe;
        margin:5px;
    }

    div.img a:hover img{
        border:1px solid #000;
    }

    div.desc{
        padding:10px 2px 5px 2px;
        font-size: 14px;
        text-align: center;
    }
</style>

HTML

<body>
<div class="img">
    <a href="img/03.jpg" target="_blank">
        <img src="img/03.jpg" alt="星空" width="160" height="160">
    </a>
    <div class="desc">添加图片描述</div>
</div>
<div class="img">
    <a href="img/04.jpg" target="_blank">
        <img src="img/04.jpg" alt="多肉" width="160" height="160">
    </a>
    <div class="desc">添加图片描述</div>
</div>
<div class="img">
    <a href="img/05.jpg" target="_blank">
        <img src="img/05.jpg" alt="蓝天" width="160" height="160">
    </a>
    <div class="desc">添加图片描述</div>
</div>
</body>