使用Css制作图文网页

使用CSS制作图文网页

布局设计

采用Flexbox或Grid布局实现响应式图文排列。Flexbox适合单行或单列布局，Grid适合复杂网格结构。例如Flexbox横向排列图文：

.container {
  display: flex;
  gap: 20px;
  align-items: center;
}

图片样式控制

通过object-fit属性控制图片填充方式，配合border-radius添加圆角效果：

.image-wrapper {
  width: 40%;
  overflow: hidden;
}
.image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

文字排版优化

使用line-height和letter-spacing提升可读性，通过text-shadow增强视觉层次：

.text-content {
  width: 60%;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.text-content h2 {
  color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

悬浮交互效果

添加过渡动画增强用户体验：

.image-wrapper:hover img {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
.text-content a {
  color: #0066cc;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.text-content a:hover {
  border-bottom-color: #0066cc;
}

响应式适配

通过媒体查询调整移动端布局：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .image-wrapper, .text-content {
    width: 100%;
  }
}

图文间距控制

使用CSS变量统一管理间距系统：

:root {
  --spacing-unit: 16px;
}
.container {
  padding: calc(var(--spacing-unit) * 2);
}
.text-content p {
  margin-bottom: var(--spacing-unit);
}