用html做一个footer部分,打横放三张图片,宽度是1:1:1,高800。
时间: 2024-03-17 13:43:33 浏览: 58
html来写图片
可以使用以下的HTML和CSS代码来创建一个footer部分,其中三张图片的宽度比例为1:1:1,高度为800px:
```html
<footer>
<img src="image1.jpg" alt="Image 1" class="footer-image">
<img src="image2.jpg" alt="Image 2" class="footer-image">
<img src="image3.jpg" alt="Image 3" class="footer-image">
</footer>
```
```css
footer {
display: flex;
justify-content: space-between;
align-items: center;
height: 800px;
}
.footer-image {
width: calc(33.33% - 10px);
height: 100%;
object-fit: cover;
}
```
解释:
1. 使用`<footer>`标签来创建footer部分,并在其中嵌套三个`<img>`标签来展示图片。
2. 使用CSS的`display: flex`属性以及`justify-content: space-between`和`align-items: center`属性来让三张图片平均分配footer的空间并垂直居中。
3. 设置每个图片的宽度为`calc(33.33% - 10px)`,其中`calc()`函数用于计算CSS表达式的值,表示每个图片占用footer宽度的1/3减去10px的间距。设置高度为100%以适应footer的高度,并使用`object-fit: cover`属性来确保图片完全填充其容器。
阅读全文