添加三个图片盒子,第1个图片盒子里面放一张照片,第2个图片盒子里面上半截是图片,下半截是图片的标题,第3个盒子里面上半截是标题,下面半截是图片。
时间: 2024-11-16 12:19:57 浏览: 16
好的,下面是添加三个图片盒子的具体步骤和描述:
1. 第1个图片盒子:这个盒子里面放一张照片。你只需要创建一个包含图片的HTML元素即可。例如,你可以使用`<img>`标签来插入一张图片。
```html
<div class="image-box">
<img src="your-image-url.jpg" alt="Image 1">
</div>
```
2. 第2个图片盒子:这个盒子里面上半截是图片,下半截是图片的标题。你可以使用两个嵌套的HTML元素来实现这一点,例如一个`<div>`包含一个`<img>`和一个`<p>`标签。
```html
<div class="image-box">
<img src="your-image-url.jpg" alt="Image 2" style="width:100%;">
<p>这是图片2的标题</p>
</div>
```
3. 第3个盒子:这个盒子里面上半截是标题,下面半截是图片。同样地,你可以使用两个嵌套的HTML元素来实现这一点,不过这次是先放置标题再放置图片。
```html
<div class="image-box">
<p>这是图片3的标题</p>
<img src="your-image-url.jpg" alt="Image 3" style="width:100%;">
</div>
```
阅读全文