当前位置：首页 > 行业动态 > 正文

html简单图片模板

admin
行业动态
2025-04-27
4275

HTML简单图片模板说明

模板结构

<div class="gallery">
  <img src="image1.jpg" alt="描述文字">
  <img src="image2.jpg" alt="描述文字">
  <img src="image3.jpg" alt="描述文字">
</div>

样式设置表

CSS属性	说明	示例值
display	设置容器为弹性布局	`flex`
justify-content	水平排列方式	`space-between`
flex-wrap	自动换行	`wrap`
max-width	图片最大宽度（响应式）	`100%`
border-radius	圆角效果	`8px`
box-shadow	投影效果	`0 4px 8px rgba(0,0,0,0.2)`
margin	图片间距	`10px`

完整示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">图片展示</title>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
    }
    .gallery img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: transform 0.3s;
    }
    .gallery img:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <div class="gallery">
    <img src="https://via.placeholder.com/300x200" alt="示例图片1">
    <img src="https://via.placeholder.com/400x300" alt="示例图片2">
    <img src="https://via.placeholder.com/500x400" alt="示例图片3">
  </div>
</body>
</html>