首页网页设计菱形照片墙源代码

网页设计菱形照片墙源代码

时间: 2024-12-23 10:14:30 浏览: 2

网页设计中的菱形照片墙通常是指将图片排列成菱形状的布局，这可以使用CSS和HTML来实现。下面是一个简单的示例，展示了如何创建一个基本的菱形网格布局： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .diamond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1rem; column-gap: 0; row-gap: calc((grid-template-columns - 1) * 1rem); justify-content: space-between; align-content: start; } .diamond-grid img { width: 100%; height: auto; } </style> </head> <body> <div class="diamond-grid">  <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2">  </div> </body> </html> ``` 在这个例子中，`.diamond-grid` 类应用了 CSS 的 `grid` 布局，并通过调整列宽和行间距实现了菱形效果。你需要将 `<img>` 标签内的图片 URL 替换为你实际的照片链接。

阅读全文