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

时间:2026-02-13 07:03:07

1、准备好图片标签栗泪秤,一个DIV,一个SPAN标签,然后图片说明,结构代码如下:

<div class="pic">

<img src="/i/tulip_ballade_s.jpg" alt="">

<div>

<span>图片说明</span>

</div>

</div>

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

2、给图片蚊掩添加样式,并岔霸且在文本DIV也添加样式,代码如下:

.pic{

border: 1px solid red;

padding: 15px;

width: 160px;

}

.pic div{

text-align: center;

}

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

3、整合代码,将pic的宽度设置成跟图片的宽高一样,这样使得图片跟文字的描述都能够在同一水平线上,效果如下

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

© 2026 海能知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com