html照片墙代码
时间: 2023-06-30 15:25:51 浏览: 137
以下是一个简单的 HTML 照片墙代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>照片墙</title>
<style type="text/css">
.photo {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="photo" style="background-image: url('photo1.jpg');"></div>
<div class="photo" style="background-image: url('photo2.jpg');"></div>
<div class="photo" style="background-image: url('photo3.jpg');"></div>
<div class="photo" style="background-image: url('photo4.jpg');"></div>
<div class="photo" style="background-image: url('photo5.jpg');"></div>
<div class="photo" style="background-image: url('photo6.jpg');"></div>
</body>
</html>
```
照片墙的核心是使用 CSS 的 `display: inline-block` 属性将图片元素水平排列,并设置合适的外边距 `margin`。图片元素可以是 `img` 标签,也可以是带有背景图片的 `div` 标签。在示例代码中,使用了 `div` 标签,并通过 `background-image` 属性指定了每个照片的背景图片。为了让照片在元素中居中,使用了 `background-position: center` 和 `background-size: cover` 属性。