html+css制作网页焦点图

制作网页焦点图可以使用 HTML 和 CSS 进行实现。下面是一个简单的示例：

HTML 代码：

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 代码：

.slider {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img:first-child {
  opacity: 1;
}

.slider:hover img {
  opacity: 0.5;
}

.slider:hover img:hover {
  opacity: 1;
}

说明：

- `.slider` 类用于定义焦点图容器，设置容器的宽度、高度和溢出隐藏。
- `img` 元素用于放置图片，并设置宽度、高度、绝对定位和透明度。
- `transition` 属性用于定义图片透明度变化的过渡效果。
- `:first-child` 伪类选择器用于选择第一张图片，并设置其透明度为 1。
- `:hover` 伪类选择器用于设置鼠标悬停时所有图片的透明度为 0.5。
- `:hover` 伪类选择器和 `:hover` 子选择器用于设置鼠标悬停在某张图片上时该图片的透明度为 1。