用html帮我写图片相框展示的设计与实现
时间: 2024-06-10 14:09:41 浏览: 14
<!DOCTYPE html>
<html>
<head>
<title>图片相框展示</title>
<style>
.container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
}
.frame{
border: 5px solid #ccc;
margin: 10px;
}
.image{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic1">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic2">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic3">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic4">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic5">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic6">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic7">
</div>
<div class="frame">
<img class="image" src="https://picsum.photos/200/200" alt="pic8">
</div>
</div>
</body>
</html>
说明:
1. 用 flex 布局实现图片相框的展示,使其具有响应式布局;
2. 用 border 属性设置相框的边框样式;
3. 用 margin 属性设置相框之间的间距;
4. 用 width 和 height 属性设置图片的宽度和高度;
5. 用 alt 属性设置图片的替代文本,以提高可访问性。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)