CSS 图片库

最新推荐文章于 2021-08-04 08:41:37 发布

cheng0867

最新推荐文章于 2021-08-04 08:41:37 发布

阅读量385

点赞数

分类专栏： CSS

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

图片库

下面的图片库是由 CSS 创建的：

实例

<!DOCTYPE HTML>
<html>
<head>
    <style>div.img {
        margin: 3px;
        border: 1px solid #bebebe;
        height: auto;
        width: auto;
        float: left;
        text-align: center;
    }

    div.img img {
        display: inline;
        margin: 3px;
        border: 1px solid #bebebe;
    }

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

    div.desc {
        text-align: center;
        font-weight: normal;
        width: 150px;
        font-size: 12px;
        margin: 10px 5px 10px 5px;
    }</style>
</head>
<body>
<div class="img"><a target="_blank" href="/i/tulip_ballade.jpg"> <img src="/i/tulip_ballade_s.jpg" alt="Ballade"
                                                                      width="160" height="160"> </a>
    <div class="desc">在此处添加对图像的描述</div>
</div>
<div class="img"><a target="_blank" href="/i/tulip_flaming_club.jpg"> <img src="/i/tulip_flaming_club_s.jpg"
                                                                           alt="Ballade" width="160" height="160"> </a>
    <div class="desc">在此处添加对图像的描述</div>
</div>
<div class="img"><a target="_blank" href="/i/tulip_fringed_family.jpg"> <img src="/i/tulip_fringed_family_s.jpg"
                                                                             alt="Ballade" width="160" height="160">
</a>
    <div class="desc">在此处添加对图像的描述</div>
</div>
<div class="img"><a target="_blank" href="/i/tulip_peach_blossom.jpg"> <img src="/i/tulip_peach_blossom_s.jpg"
                                                                            alt="Ballade" width="160" height="160"> </a>
    <div class="desc">在此处添加对图像的描述</div>
</div>
</body>
</html>

cheng0867

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 图片库

图片库下面的图片库是由 CSS 创建的：实例HTML>html>head> style>div.img { margin: 3px; border: 1px solid #bebebe; height: auto; width: auto; float: left; te
复制链接

扫一扫