用visual code做一个照片集的页面和css模板
时间: 2024-03-05 11:52:16 浏览: 158
一款相册演示代码
好的,我可以为您提供一些基本的代码示例来实现这个功能。以下是一个简单的 HTML 页面,包含一个照片集和一个 CSS 模板:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>照片集</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>我的照片集</h1>
<div class="gallery">
<img src="img1.jpg" alt="照片1">
<img src="img2.jpg" alt="照片2">
<img src="img3.jpg" alt="照片3">
<img src="img4.jpg" alt="照片4">
<img src="img5.jpg" alt="照片5">
<img src="img6.jpg" alt="照片6">
</div>
</body>
</html>
```
CSS 代码:
```css
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
width: 300px;
height: 200px;
margin: 10px;
object-fit: cover;
}
```
在这个示例中,我们使用了一个 `<div>` 元素来包含图片,并使用 CSS 的 Flexbox 布局来使图片自动排列。我们还使用了 `object-fit` 属性来确保图片不会变形并占满其容器。您可以根据需要进行修改和定制。
阅读全文