首页 > 软件开发 > HTML >

HTML布局怎么做一个图片库呢

来源:互联网 2023-03-16 19:07:37 版权归原作者所有,如有侵权,请联系我们

这篇经验给大家分享关于如何实现一个图片库呈现在网页中,用到的HTML,CSS都有详细的代码在下面。GNl办公区 - 实用经验教程分享!

工具/原料

  • IDE代码编辑工具
  • 电脑

方法/步骤

  • 1

    准备好图片标签,一个DIV,一个SPAN标签,然后图片说明,结构代码如下:GNl办公区 - 实用经验教程分享!

    GNl办公区 - 实用经验教程分享!

    div class="pic">GNl办公区 - 实用经验教程分享!

    img src="/i/tulip_ballade_s.jpg" alt="">GNl办公区 - 实用经验教程分享!

    div>GNl办公区 - 实用经验教程分享!

    span>图片说明/span>GNl办公区 - 实用经验教程分享!

    /div>GNl办公区 - 实用经验教程分享!

    /div>GNl办公区 - 实用经验教程分享!

    GNl办公区 - 实用经验教程分享!

    HTML布局怎么做一个图片库呢?GNl办公区 - 实用经验教程分享!

  • 1此文章未经授权抓取自百度经验
  • 2

    给图片添加样式,并且在文本DIV也添加样式,代码如下:GNl办公区 - 实用经验教程分享!

    GNl办公区 - 实用经验教程分享!

    .pic{GNl办公区 - 实用经验教程分享!

    border: 1px solid red;GNl办公区 - 实用经验教程分享!

    padding: 15px;GNl办公区 - 实用经验教程分享!

    width: 160px;GNl办公区 - 实用经验教程分享!

    }GNl办公区 - 实用经验教程分享!

    .pic div{GNl办公区 - 实用经验教程分享!

    text-align: center;GNl办公区 - 实用经验教程分享!

    }GNl办公区 - 实用经验教程分享!

    GNl办公区 - 实用经验教程分享!

    HTML布局怎么做一个图片库呢?GNl办公区 - 实用经验教程分享!

  • 3

    整合代码,将pic的宽度设置成跟图片的宽高一样,这样使得图片跟文字的描述都能够在同一水平线上,效果如下GNl办公区 - 实用经验教程分享!

    HTML布局怎么做一个图片库呢?GNl办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!GNl办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号