当前位置：首页 > CSS

使用Css制作图文网页

2026-02-12 17:33:00CSS

CSS 制作图文网页的方法

布局设计
使用 CSS Grid 或 Flexbox 创建响应式布局。Grid 适合复杂网格结构，Flexbox 适合线性排列。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

图片样式控制
通过 object-fit 确保图片自适应容器，避免变形。添加阴影或圆角增强视觉效果。

img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

文本排版优化
使用 line-height 和 text-align 提升可读性。选择适合的字体和颜色对比度。

.text-content {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
}

悬停交互效果
为图片或文本添加悬停动画，增强用户体验。

.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

响应式适配
通过媒体查询调整不同屏幕尺寸下的布局和字体大小。

使用Css制作图文网页

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

示例完整代码结构

<!DOCTYPE html>
<html>
<head>
  <style>
    .container { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
    img { width: 100%; border-radius: 8px; }
    .text { line-height: 1.6; padding: 15px; }
    @media (max-width: 768px) {
      .container { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="image.jpg" alt="示例图片">
    <div class="text">
      <h3>标题</h3>
      <p>这里是详细的文本内容...</p>
    </div>
  </div>
</body>
</html>