使用Css制作图文网页

布局规划

确定网页结构，通常包括头部、导航栏、内容区（图文混排）、页脚。使用CSS Grid或Flexbox实现响应式布局。

<div class="container">
  <header>网页标题</header>
  <nav>导航链接</nav>
  <main>
    <article class="image-text">
      <img src="image.jpg" alt="示例图片">
      <div class="text-content">...</div>
    </article>
  </main>
  <footer>版权信息</footer>
</div>

基础样式设置

设置全局样式确保跨浏览器一致性，定义图文容器的基本样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.image-text {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-bottom: 40px;
}

图文混排实现

通过浮动或Flexbox实现图文环绕效果，注意处理不同屏幕尺寸的适配。

/* 图片左文本右 */
.image-text img {
  width: 300px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .image-text {
    flex-direction: column;
  }
  .image-text img {
    width: 100%;
  }
}

视觉效果增强

添加过渡动画和悬停效果提升交互体验，注意保持视觉层次清晰。

.image-text img {
  transition: transform 0.3s ease;
}

.image-text img:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.text-content {
  line-height: 1.6;
  color: #333;
}

.text-content h2 {
  color: #2c3e50;
  margin-bottom: 15px;
}

高级布局技巧

使用CSS Shape实现非矩形图文环绕，需要浏览器支持。

.circle-text {
  shape-outside: circle(50%);
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  clip-path: circle(50%);
}

性能优化

优化图片加载和渲染性能，确保网页加载速度。

.image-text img {
  loading: lazy;
  background: #f5f5f5;
}

/* 使用CSS滤镜实现图片效果 */
.image-text img.grayscale {
  filter: grayscale(50%);
}