CSS 图片库

来源：互联网发布：淘宝客店铺软件哪个好编辑：程序博客网时间：2024/06/05 18:32
图片库

下面的图片库是由 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>
0 0